Vue3 is good, but some plug-ins have not been updated to 3.0. For example, OVERlayscrollbars is my favorite custom scrollbar. Vue3 overlayscrollbars-vue will report an error when directly used. This installment will focus on how to use the instructions to apply these plug-ins, customize overlayscrollbars and drag and drop sorTableJS.

directive

Overlayscrollbars and sorTableJS are called in JS mode. We can initialize the plug-in in the command.

The main. Js:

import { createApp } from 'vue'
import directive from './directive'

const app = createApp(App)

directive(app)
Copy the code

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)
      }
    }
  })
}
Copy the code

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>
Copy the code

We can pass initialization parameters through directives, or we can get plug-in invocation instances, such as scrollReady, or we can pass them without specifying default parameters.

 <div
    class="mobiReview"
    v-OverlayScrollbars
  ></div>
Copy the code

sortablejs

As a bonus note, some students use sorTablejs for table drags:

<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="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></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: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
  }, {
    id: 2.date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
  }, {
    id: 3.date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai
  }, {
    id: 4.date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai
  }]
})

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>
Copy the code

If you don’t set row-key, you’re going to get a problem dragging data, or you’re going to get a problem dragging a list with index as the key, because most people like index as the key, and index changes when we drag and drop, and index changes when we remove and add, This will cause diff problems, just like everyone has an ID card, and if the person in front of someone is removed, this person cannot inherit the ID card of the person in front of him. Key should be unique and immutable to this data, just like the id card of a person, so do not bind index as key.

This series of updates can only be arranged during weekends and off-duty hours. If there are too many contents, the update will be slow. I hope it will be helpful to you.

Address: xuxin123.com/web/vue3-di…