Vue3-巧用指令

發(fā)布：web前端培訓(xùn) 2022-02-09 14:50

推薦答案

　　Vue3-巧用指令不知道大家在工作中用上vue3了沒(méi)有，vue3好是好，但是有部分插件并沒(méi)有更新到3.0的，比如我比較喜歡的自定義滾動(dòng)條overlayscrollbars，vue3直接使用overlayscrollbars-vue會(huì)報(bào)錯(cuò)。
　　今天我們主要介紹一下如何使用指令來(lái)應(yīng)用這些插件，自定義滾動(dòng)條overlayscrollbars以及拖拽sortablejs。
　　directive
　　指令的話這里就不多說(shuō)了，參考官方文檔（https://v3.cn.vuejs.org/api/options-assets.html），overlayscrollbars以及sortablejs都是提供了js方式調(diào)用的，我們可以在指令里面進(jìn)行插件的初始化。
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>
我們可以通過(guò)指令來(lái)傳遞初始化參數(shù)，也可以獲取插件調(diào)用實(shí)例，比如scrollReady，當(dāng)然如果你指令里面寫(xiě)了默認(rèn)參數(shù)，也可以不用參數(shù)的傳遞。
<div
    class="mobiReview"
    v-OverlayScrollbars
  ></div>
sortablejs
這里算是一個(gè)額外補(bǔ)充說(shuō)明，有些同學(xué)在做表格拖拽時(shí)使用了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: '上海市普陀區(qū)金沙江路 1518 弄'
  }, {
    id: 2,
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀區(qū)金沙江路 1517 弄'
  }, {
    id: 3,
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀區(qū)金沙江路 1519 弄'
  }, {
    id: 4,
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀區(qū)金沙江路 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>
假如不設(shè)置row-key會(huì)出現(xiàn)拖拽數(shù)據(jù)錯(cuò)亂的情況，或者說(shuō)在拖拽一個(gè)列表，而列表的key為index，也會(huì)出現(xiàn)這個(gè)問(wèn)題。
因?yàn)榇蠖鄶?shù)人喜歡把index作為key的賦值，而我們拖拽時(shí)index會(huì)變動(dòng)，移除和添加時(shí)數(shù)組的索引會(huì)變，這會(huì)讓diff出現(xiàn)問(wèn)題，就好比每一個(gè)人都有一個(gè)身份證，把某個(gè)人前面的人移除掉，這個(gè)人不可能就繼承前面那個(gè)人的身份證了，key對(duì)于這條數(shù)據(jù)應(yīng)該是唯一的，不可變的，就像人的身份證一樣，故不要把index作為key來(lái)綁定。