千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  IT问答库  >  Web基础知识

Vue3-巧用指令

发布:web前端培训 2022-02-09 14:50

推荐答案

  Vue3-巧用指令不知道大家在工作中用上vue3了没有,vue3好是好,但是有部分插件并没有更新到3.0的,比如我比较喜欢的自定义滚动条overlayscrollbarsvue3直接使用overlayscrollbars-vue会报错。

  今天我们主要介绍一下如何使用指令来应用这些插件,自定义滚动条overlayscrollbars以及拖拽sortablejs

v2-c7f6420386db61816337233c3a8001e5_1440w

  directive

  指令的话这里就不多说了,参考官方文档(https://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会出现拖拽数据错乱的情况,或者说在拖拽一个列表,而列表的keyindex,也会出现这个问题。

因为大多数人喜欢把index作为key的赋值,而我们拖拽时index会变动,移除和添加时数组的索引会变,这会让diff出现问题,就好比每一个人都有一个身份证,把某个人前面的人移除掉,这个人不可能就继承前面那个人的身份证了,key对于这条数据应该是唯一的,不可变的,就像人的身份证一样,故不要把index作为key来绑定。

更多问题在线答疑

专业导师线上坐镇
解答个性化学习难题

点击提交问题
问答排行榜

01 网络安全发展前景怎么样

网络安全培训 网络安全培训班 网络安全培训机构
6020 人关注

02 大数据培训机构哪些比较好

大数据培训 大数据培训班 大数据培训机构
5389 人关注

03 大数据培训分享:大数据分析的数据类型都有哪些

大数据培训 大数据培训班 大数据培训机构
5062 人关注

04 网络安全培训分享:加密软件该如何进行安全防护?

网络安全培训 网络安全培训班 网络安全培训机构
4733 人关注

05 大数据之Spark框架中RDD和DataFrame的区别

大数据培训 大数据培训班 大数据培训机构
4561 人关注

06 如何进入大数据行业?相关学习路线是什么

大数据培训 大数据培训班 大数据培训机构
4238 人关注

相关问题

web前端自学好还是培训好

关于“web前端自学好还是培训好”这个问题说法众说纷纭,有很多...

选择Web培训机构的注意事项有哪些

师资力量;老师是不是又丰富的实战开发经验,这点是非常重要的。...

Web前端主要做什么

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HT...

web前端培训分享:学Web前端的好处有哪些

web前端近几年在IT互联网行业比较火热,很多人都开始参加web前端...

web前端培训分享:Web前端需要学什么

Web前端需要学什么?好不好学?这是很多想要进入到web前端行业的学...

零基础参加web前端培训都学什么

零基础参加web前端培训都学什么?基础阶段学习HTML常用标签与表单...

IT趣味问答挑战赛

测一测
你知道多少IT梗