Vue3 Composition API PerfectScrollbar Plugin 未指定元素初始化 [英] Vue3 Composition API PerfectScrollbar Plugin no element is specified to initialize

问题描述

我正在尝试为 Vue3 创建一个 Perfect Scrollbar 插件，但我卡住了初始化对象时出错:

I'm trying to create a Perfect Scrollbar plugin for Vue3 but i'm stuck on an error when i initialize the object:

错误:没有指定元素来初始化 PerfectScrollbar

Error: no element is specified to initialize PerfectScrollbar

滚动条组件:

import PerfectScrollbar from 'perfect-scrollbar'
import { isEmpty } from 'lodash'
import {
 onMounted,
 reactive,
 ref,
 h
} from 'vue'

export default {
  name: 'VuePerfectScrollbar',
  props: {
    options: {
      type: Object,
      required: false,
      default: () => {
      }
    },
    tag: {
      type: String,
      required: false,
      default: 'div'
    }
  },
  setup(props, {emit, slots}) {
    const el = ref(null)
    let ps = reactive({})
    
    onMounted(() => {
      if (isEmpty(ps)) {
        ps = new PerfectScrollbar(el, props.options)

      }
    })


    return () => h(
      props.tag,
      {
        class: 'ps',
        ref: el
      },
      slots.default && slots.default()
    )
  }
}

我在初始化之前做了一个 console.log 并且元素引用在那里，所以我不确定为什么会弹出错误.根据 this 此错误仅表示您正在调用 PerfectScrollbar一些不存在的东西！ 所以也许那时 DOM 还没有更新?我也试过 nextTick 但没用.

I did a console.log right before the initialization and the element reference is there, so i'm not sure why the error pops up. According to this This error simply means that you are calling PerfectScrollbar on something that doesn't exist! so maybe the DOM hasn't been updated at that moment? I tried with nextTick too but it didn't work.

推荐答案

您应该可以访问 ref 属性中的 value 属性，如下所示:

You should get access to the value attribute in the ref property as follows :

ps = new PerfectScrollbar(el.value, props.options)

这篇关于Vue3 Composition API PerfectScrollbar Plugin 未指定元素初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！