vue3-巧用指令

千锋HTML5大前端

已于 2022-06-30 11:28:52 修改

阅读量555

点赞数

分类专栏：前端技术文章文章标签： vue.js javascript 前端 html5

于 2022-06-29 10:24:49 首次发布

本文链接：https://blog.csdn.net/sdasadasds/article/details/125515562

版权

本文介绍了在vue3中如何利用指令来巧妙地应用未更新到3.0的插件，如overlayscrollbars和sortablejs。通过在指令中初始化插件并传递参数，解决了由于某些插件不支持vue3导致的问题。同时，文章还提醒在使用sortablejs进行表格拖拽时要注意key的唯一性和不变性，避免数据错乱。

摘要由CSDN通过智能技术生成

vue3-巧用指令

不知道大家在工作中用上vue3了没有，vue3好是好，但是有部分插件并没有更新到3.0的，比如我比较喜欢的自定义滚动条overlayscrollbars，vue3直接使用overlayscrollbars-vue会报错。

今天我们主要介绍一下如何使用指令来应用这些插件，自定义滚动条overlayscrollbars以及拖拽sortablejs。

directive

指令的话这里就不多说了，参考官方文档（https://v3.cn.vuejs.org/api/options-assets.html#directives），overlayscrollbars以及sortablejs都是提供了js方式调用的，我们可以在指令里面进行插件的初始化。

main.js：

import {
    createApp } from 'vue'
import directive from './directive'

const app = createApp(App)

directive(app)

directive：

import {
    Sortable } from 'sortablejs'
import 'overlayscrollbars/css/OverlayScrollbars.css'
import OverlayScrollbars from 'overlayscrollbars'

export default function(app) {
   
  app.directive('focus', {
   
    mounted(el) {
   
      el.focus()
    }
  })
  app.directive('sortable', {
   
    mounted(el, binding) {
   
      const config = binding.value
      new Sortable(el, config || {
   })
    }
  })
  app.directive('OverlayScrollbars', {
   
    mounted(el, binding) {
   
      const config = binding.value
      const instance = OverlayScrollbars(el, config || {
   
        scrollbars: {
    autoHide: 'move' }
      }