Vue项目引入外部库litepicker日历组件时触发报错该如何解决？

问题原因 #

你的报错核心是初始化Litepicker时，对应的DOM元素还没有被Vue挂载到页面上，拿到的元素是null，导致组件初始化失败，不是Litepicker和Vue不兼容。

解决方法 #

分Vue3和Vue2两种场景给出对应写法：

Vue3 + 组合式API写法

模板代码：

<input type="text" ref="pickerRef">

业务逻辑代码：

import { ref, onMounted, onUnmounted } from 'vue'
import Litepicker from 'litepicker'
// 若样式未自动引入，手动加这行
// import 'litepicker/dist/css/litepicker.css'

export default {
  setup() {
    const pickerRef = ref(null)
    let pickerInstance = null

    // 必须在onMounted钩子中执行初始化，此时DOM已完成挂载
    onMounted(() => {
      pickerInstance = new Litepicker({ 
        element: pickerRef.value 
      })
    })

    // 组件卸载时销毁实例，避免内存泄漏
    onUnmounted(() => {
      pickerInstance?.destroy()
    })

    return {
      pickerRef
    }
  }
}

Vue2 写法

模板代码和上面一致，逻辑代码如下：

import Litepicker from 'litepicker'
// 样式未生效的话同样手动引入
// import 'litepicker/dist/css/litepicker.css'

export default {
  data() {
    return {
      pickerInstance: null
    }
  },
  mounted() {
    this.pickerInstance = new Litepicker({
      element: this.$refs.pickerRef
    })
  },
  beforeDestroy() {
    if (this.pickerInstance) {
      this.pickerInstance.destroy()
    }
  }
}

注意事项 #

• 不要使用id选择器获取元素，组件复用时会出现id重复的冲突，ref是Vue框架内获取自有DOM的标准方案
• 如果初始化后样式异常，优先检查是否正确引入了Litepicker的样式文件

内容的提问来源于stack exchange，提问作者Dave