vue3-clever use of instructions

I don’t know if everyone has used vue3 in their work. Vue3 is good, but some plug-ins have not been updated to 3.0, such as my favorite custom scroll bar overlayscrollbars . If vue3 directly uses overlayscrollbars-vue will report an error. In this issue, we mainly Introduce how to use commands to apply these plug-ins, custom scroll bar overlayscrollbars and drag sortablejs .

directive

I won’t say much about the instructions here. Refer to the official documents , overlayscrollbars and sortablejs are all provided in js mode. We can initialize the plug-in in the instruction.

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>

We can pass initialization parameters through instructions, or get plug-in call instances, such as scrollReady . Of course, if you write default parameters in the instructions, you can also pass without parameters.

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

sortablejs

Here is an additional explanation. Some students used sortablejs when doing form dragging:

<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>

If you don’t set row-key , the drag data will be disordered, or you are dragging a list, and the list of key is index , this problem will also occur, because most people like to index as key , and we drag When the index will change, the index of the array will change when removing and adding, which will cause diff problems, just like everyone has an ID card, remove the person in front of a person, this person is impossible to inherit The ID of the person in front is, key should be unique and immutable for this piece of data, just like a person's ID, so do not bind index as key

This series of updates can only be organized during weekends and after get off work hours. If there are more content, the update will be slower. I hope it can be helpful to you. Please support it by star or like favorites.

This article address: https://xuxin123.com/web/vue3-directive