Vue3 Composition API PerfectScrollbar Plugin 没有指定要初始化的元素

Question

我正在尝试为 Vue3 创建一个 Perfect Scrollbar 插件，但在初始化对象时遇到错误：

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 This error simply means that you are calling PerfectScrollbar on something that doesn't exist! 所以也许 DOM 在那一刻没有更新？我也尝试使用 nextTick，但没有用。

Answer 1

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

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

Vue3 Composition API PerfectScrollbar Plugin 没有指定要初始化的元素

Vue3 Composition API PerfectScrollbar Plugin no element is specified to initialize

vue.js

perfect-scrollbar

vuejs3

vue-composition-api