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' }
})
if (config && config.scrollReady) {
config.scrollReady(instance)
}
}
})
}vue：
{{ item }}
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)
.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：
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)
假如不设置row-key会出现拖拽数据错乱的情况，或者说在拖拽一个列表，而列表的key为index，也会出现这个问题。
因为大多数人喜欢把index作为key的赋值，而我们拖拽时index会变动，移除和添加时数组的索引会变，这会让diff出现问题，就好比每一个人都有一个身份证，把某个人前面的人移除掉，这个人不可能就继承前面那个人的身份证了，key对于这条数据应该是唯一的，不可变的，就像人的身份证一样，故不要把index作为key来绑定。
今天分享到此为止哈，想要学习更多技能知识持续关注博主哈，需要学习教程源码笔记了找助理免费领取！
