vue3-巧用指令

更新日期: 2022-01-06阅读量: 75标签: 指令

不知道大伙在工作中已经用上vue3没有,vue3好是好,但是有部分插件并没有更新到3.0的,比如我比较喜欢的自定义滚动条overlayscrollbars,vue3直接使用overlayscrollbars-vue会报错,本期我们主要介绍一下如何使用指令来应用这些插件,自定义滚动条overlayscrollbars以及拖拽sortablejs

directive

指令的话这里就不多说了,参考官方文档,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来绑定。

本文地址:https://xuxin123.com/web/vue3-directive


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/11005

指令式编程 VS 声明式编程

指令式编程:告诉机器该如何做,并得到自己想要的结果。声明式编程:告诉机器您想得到什么,让机器自己计算该如何做。

vue内置指令大全_整理常用的Vue内置指令

整理vue常用的内置指令:v-bind指令、v-text指令、v- html指令、v-show指令、v-if指令、v-else 指令、v-else-if 指令、v-for 指令、v-on 指令、v-model 指令、v-once 指令、v-cloak指令、v-pre指令

如何在Vue里建立长按指令

本文将解释如何通过按下(或按住)按钮来执行功能和删除输入。首先,我将解释如何在VanillaJS中实现这一目标。然后,为它创建一个Vue指令。那么,让我们开始吧。

深入解析Vue.directive 自定义指令

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。

VUE指令大全

v-text主要用来更新textContent,可以等同于JS的text属性。v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。

Vue中的全部指令

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

vue v-for 使用问题Error in render

今天使用v-for指令的时候遇到一个错误:[Vue warn]: Error in render: \\\"TypeError: Cannot read property \\\'children\\\' of undefined\\\",猜测使用了嵌套属性的原因,在页面中无法解析出具体属性值

Vue.js 自定义指令使用场景及案例

使用场景:代码复用和抽象的主要形式是组件;当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令;但是,对于大幅度的 DOM 变动,还是应该使用组件

Vue中插槽指令

意义就是在组件里留着差值方便后续组件内容新增,而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量,组件里没有设置插件名称,页面中插槽中写了插槽名称 结果页面中插槽不会被渲染

Vue常用指令

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。Vue.js 使用了基于 HTML 的模板语法最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!