来源 | https://xuxin123.com/web/vue3-directive

不知道大家在工作中用上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' }      })      if (config && config.scrollReady) {        config.scrollReady(instance)      }    }  })}

vue：

<template>  <ul v-sortable="sortableOptions" class="listBox">    <li class="li" v-for="item in list" :key="item">{{ item }}</li>  </ul>  <div    class="mobiReview"    v-OverlayScrollbars="{ ...scrollOptions, scrollReady }"  ></div></template>
<script setup>import { reactive, toRefs } from 'vue'
const state = reactive({  list: [1, 2, 3, 4, 5],  scroll: {    instance: null  },  scrollOptions: {    className: 'os-theme-thin-dark',    scrollbars: { autoHide: 'move' }  }})
function scrollReady(instance) {  state.scroll.instance = instance}
const sortableOptions = {  animation: 150,  sort: true,  draggable: '.li',  onUpdate: (event) => {    event.stopPropagation()    state.list.splice(event.newDraggableIndex, 0, state.list.splice(event.oldDraggableIndex, 1)[0])  }}
const { list } = toRefs(state)</script>
<style lang="less" scoped>.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;  }}</style>

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

 <div    class="mobiReview"    v-OverlayScrollbars  ></div>

sortablejs

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

<template>  <el-table :data="tableData" style="width: 100%" row-key="id">    <el-table-column type="index" width="50"></el-table-column>    <el-table-column prop="date" label="日期" width="180"></el-table-column>    <el-table-column prop="name" label="姓名" width="180"></el-table-column>    <el-table-column prop="address" label="地址"></el-table-column>  </el-table></template>
<script setup>import { reactive, toRefs, onMounted } from 'vue'import { Sortable } from 'sortablejs'
const state = reactive({  tableData: [{    id: 1,    date: '2016-05-02',    name: '王小虎',    address: '上海市普陀区金沙江路 1518 弄'  }, {    id: 2,    date: '2016-05-04',    name: '王小虎',    address: '上海市普陀区金沙江路 1517 弄'  }, {    id: 3,    date: '2016-05-01',    name: '王小虎',    address: '上海市普陀区金沙江路 1519 弄'  }, {    id: 4,    date: '2016-05-03',    name: '王小虎',    address: '上海市普陀区金沙江路 1516 弄'  }]})
onMounted(() => {  const tbody = document.querySelector('.el-table__body-wrapper tbody')  Sortable.create(tbody, {    onUpdate: (event) => {      event.stopPropagation()      state.tableData.splice(event.newDraggableIndex, 0, state.tableData.splice(event.oldDraggableIndex, 1)[0])    }  })})
const { tableData } = toRefs(state)</script>

假如不设置row-key会出现拖拽数据错乱的情况，或者说在拖拽一个列表，而列表的key为index，也会出现这个问题，因为大多数人喜欢把index作为key的赋值，而我们拖拽时index会变动，移除和添加时数组的索引会变，这会让diff出现问题，就好比每一个人都有一个身份证，把某个人前面的人移除掉，这个人不可能就继承前面那个人的身份证了，key对于这条数据应该是唯一的，不可变的，就像人的身份证一样，故不要把index作为key来绑定。

本文完~

学习更多技能

请点击下方公众号