vue3-巧用指令前端vue3

不知道大伙在工作中已经用上vue3没有，vue3好是好，但是有部分插件并没有更新到3.0的，比如我比较喜欢的自定义滚动条overlayscrollbars，vue3直接使用overlayscrollbars-vue会报错，本期我们主要介绍一下如何使用指令来应用这些插件，自定义滚动条overlayscrollbars以及拖拽sortablejs。
directive 指令的话这里就不多说了，参考官方文档，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' } }) if (config && config.scrollReady) { config.scrollReady(instance) } } }) }

vue：

.listBox { display: flex; list-style: none; > li { width: 100px; height: 100px; margin: 10px; background-color: red; display: flex; justify-content: center; align-items: center; cursor: move; } } .mobiReview { height: 500px; width: 300px; .box { height: 1000px; } }

我们可以通过指令来传递初始化参数，也可以获取插件调用实例，比如scrollReady，当然如果你指令里面写了默认参数，也可以不用参数的传递。

sortablejs 这里算是一个额外补充说明，有些同学在做表格拖拽时使用了sortablejs：

假如不设置row-key会出现拖拽数据错乱的情况，或者说在拖拽一个列表，而列表的key为index，也会出现这个问题，因为大多数人喜欢把index作为key的赋值，而我们拖拽时index会变动，移除和添加时数组的索引会变，这会让diff出现问题，就好比每一个人都有一个身份证，把某个人前面的人移除掉，这个人不可能就继承前面那个人的身份证了，key对于这条数据应该是唯一的，不可变的，就像人的身份证一样，故不要把index作为key来绑定。
本系列更新只有利用周末和下班时间整理，比较多的内容的话更新会比较慢，希望能对你有所帮助，请多多star或点赞收藏支持一下。
【vue3-巧用指令】本文地址：https://xuxin123.com/web/vue3-directive