Vue3-巧用指令不晓得大师在任务中用上vue3了不,vue3好是好,可是有局部插件并不更新到3.0的,比方我比拟喜好的自界说转动条overlayscrollbars,vue3间接利用overlayscrollbars-vue会报错。
明天咱们首要先容一下若何利用指令来利用这些插件,自界说转动条overlayscrollbars和拖拽sortablejs。
directive
指令的话这里就未几说了,参考官方文档(http://v3.cn.vuejs.org/api/options-assets.html),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来绑定。