不晓得大伙在工作中曾经用上 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:
<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
来绑定。
本系列更新只有利用周末和下班时间整顿,比拟多的内容的话更新会比较慢,心愿能对你有所帮忙,请多多 star 或点赞珍藏反对一下。
本文地址:https://xuxin123.com/web/vue3-directive