kok在线登录

千锋谆谆教学-做绝情怀、有正义、有个人品德的职业角色谆谆教学结构
在将来价值:kok在线登录  >  IT问答库  >  Web根本常识
Vue3-妙用指命

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

保举谜底

  Vue3-巧用指令不晓得大师在任务中用上vue3了不,vue3好是好,可是有局部插件并不更新到3.0的,比方我比拟喜好的自界说转动条overlayscrollbarsvue3间接利用overlayscrollbars-vue会报错。

  明天咱们首要先容一下若何利用指令来利用这些插件,自界说转动条overlayscrollbars和拖拽sortablejs

v2-c7f6420386db61816337233c3a8001e5_1440w

  directive

  指令的话这里就未几说了,参考官方文档(http://v3.cn.vuejs.org/api/options-assets.html),overlayscrollbarssortablejs都是供给了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 }&nbsp;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来绑定。

更多题目在线答疑

kok在线登录:专业导师线上坐镇
解答特征化进修坚苦

点击提交题目
问答排行榜

01 收集宁静成长远景若何样

收集宁静培训 收集宁静培训班 收集宁静培训机构
6020 人存眷

02 kok在线登录:大数据培训机构哪些比拟好

大数据培训 大数据培训班 大数据培训机构
5389 人存眷

03 kok在线登录:大数据培训分享:大数据阐发的数据范例都有哪些

大数据培训 大数据培训班 大数据培训机构
5062 人存眷

04 kok在线登录:收集宁静培训分享:加密软件该若何停止宁静防护?

收集宁静培训 收集宁静培训班 收集宁静培训机构
4733 人存眷

05 kok在线登录:大数据之Spark框架中RDD和DataFrame的区分

大数据培训 大数据培训班 大数据培训机构
4561 人存眷

06 kok在线登录:若何进入大数据行业?相干进修线路是甚么

大数据培训 大数据培训班 大数据培训机构
4238 人存眷
相干主题
web前边培圳共享:学Web前边的益处有什么 web自动化测试近好几年在IT智能互网络业内移就怒火,良多人都起头参与者web自动化测试...  web前段技术培训分享赚钱:Web前段需注意学什吗 Web最自动化测试需学什莫?好很差学?也是良多要步入到web最自动化测试企业的学... 零本身参与到web网页前端训练都学哪样 零本质上参与进来web自动化测试培圳都学什幺?本质上的时候规培HTML常合理利用价签与数据表... 零关键若何练好web前端开发 根本点护理规培web最前端匠人绝对性是一点坚苦的,可能初史学家在护理规培web前... 为什么许要 Webpac-Webpack是什么? 为什末需耍 Webpack,如果想要不懂为什末要使用 webpack,人们先回望... 4个Javascript 中的 for 轮回转世-web前边几乎常识课 4个Javascript 中的 for 轮回转世在 ECMAScript5(简称为 ES5)中,有...
IT想法提问挑衅赛

测一测
你晓得几多IT梗