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

Question

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

错误：没有指定元素来初始化 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 error simply means that you are calling PerfectScrollbar on something that doesn't exist!当时 DOM 还没有更新？我也尝试过 nextTick 但它没有用。

标签： vue.jsvuejs3vue-composition-apiperfect-scrollbar

Answer 1

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

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