欧美经典日韩精品_日韩高清亚洲日韩精品一区_日韩精品无码综合视频网_国产v亚洲v天堂?无码久久_中文字幕免费无码专区

千鋒教育-做有情懷、有良心、有品質的職業教育機構

當前位置:首頁  >  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 unity用什么編程語言?unity學習難度大嗎

學習 unity 語言
6020 人關注

02 python容易學嗎?學好python有什么好處?

學習 python 工作 培訓
5389 人關注

03 html是什么語言?html學習難嗎?

學習 html 語言 可以
5062 人關注

04 c語言難學嗎?c語言學好要多久?

語言 技術 學習
4733 人關注

06 學好平面設計要多久?報速成班靠譜嗎?

平面 設計 學習 時間
4238 人關注

相關問題

web前端自學好還是培訓好

關于“web前端自學好還是培訓好”這個問題說法眾說紛紜,有很多...

選擇Web培訓機構的注意事項有哪些

師資力量;老師是不是又豐富的實戰開發經驗,這點是非常重要的。...

Web前端主要做什么

前端開發是創建Web頁面或app等前端界面呈現給用戶的過程,通過HT...

web前端培訓分享:學Web前端的好處有哪些

web前端近幾年在IT互聯網行業比較火熱,很多人都開始參加web前端...

web前端培訓分享:Web前端需要學什么

Web前端需要學什么?好不好學?這是很多想要進入到web前端行業的學...

零基礎參加web前端培訓都學什么

零基礎參加web前端培訓都學什么?基礎階段學習HTML常用標簽與表單...

測一測
你知道多少IT梗

国产AV夜夜欢一区二区三区 | 国产成人AV无码精品天堂| 蜜桃视频在线观看| 免费无码高潮喷水AⅤ片在线 | 日韩精品无码人妻免费视频| 菠萝蜜视频高清在线观看| 奇米综合四色77777久久| 啊轻点灬大JI巴太粗太长在线了| 人和畜禽CROPROATION| 成人爽A毛片在线视频淮北| 少妇爆乳无码专区网站| 国产老妇伦国产熟女老妇高清 | 亚洲第一无码XXXXXX| 娇小性XXXXX极品娇小| 亚洲色成人一区二区三区 | 国产激情久久久久影院小草| 性欧美ⅩXXXX极品少妇| 韩国三级L中文字幕无码| 亚洲日韩精品无码专区网站| 色欲AV无码一区二区三区| 国产亚洲欧美日韩剧的剧情介绍| 亚洲VA中文字幕| 久久精品国产亚洲AV麻豆软件| 一对浑圆的胸乳被揉捏动态图| 男女狂进狂出动态图| 成人精品一区二区三区电影| 天堂中文在线资源| 含羞草自慰抽搐喷白浆AⅤ| 亚洲欧美日韩国产成人| 美女MM131爽爽爽| JIZZ在线观看中国少妇| 太深太粗太爽太猛了视频 | 福利乱码卡一卡二卡新区| 玩弄中年熟妇正在播放| 狠狠色丁香婷婷综合久久图片| 亚洲人成无码网WWW| 天堂中文资源在线最新版下载| 男女作爱全部免费观爱| 精品亚洲欧美无人区乱码| 51精产国品一二三产区| 日木AV无码专区亚洲AV毛片| 国产乱人伦中文无无码视频试看| 亚洲色欲综合天堂亚洲 | 毛片内射久久久一区| 含苞待放1ⅤLH花莹莹| 国产GaySeXChina男同| 啊灬啊灬啊灬快灬少妇软件| 做I爱直播APP| 少女のトゲ在线观看动漫| 韩漫无羞遮无删减漫免费| 大屁股大乳丰满人妻| 亚洲成AV人片在线观看不卡| 四虎WWW永久在线精品| 精品人妻少妇AV一区二区三区| 自拍偷自拍亚洲精品情侣| 亚洲国产精品久久久天堂麻豆宅男| 欧美成人WWW免费全部网站 | 精品久久久久久亚洲精品| 国产精品自在在线午夜 | 免费毛儿一区二区十八岁| 番茄TODO社区免费看片| 亚洲美女又黄又爽在线观看| 漂亮人妻被强中文字幕久久| 免费国产成人高清在线视频| 久久婷婷综合色丁香五月| 非洲黑人妇女XXXXXHD| А√天堂资源在线地址BT| BT天堂最新版在线WWW| 亚欧成人中文字幕一区| 蜜桃av中文字幕在线| 久久久久亚洲AV无码专区首| 东北小伙二十厘米粗大硬| JEALOUSVUE成熟五十| JΑPΑNESEHD熟女熟妇伦| H纯肉无遮掩3D动漫在线观看| 亚洲VA无码手机在线电影| 武则天裸毛片70分钟| 欧美视频在线一区| 黑人大雞巴XXOO视频| 国产综合18久久久久久| 伴郎粗大的内捧猛烈进出视频观看| 亚洲AV素人乱码| 啪啪男女爱高潮GIF| 欧美香蕉爽爽人人爽| 欧美人妻精品一区二区免费看| 好紧真爽喷水高潮视频办公室| 国产麻豆精品乱码一区| 国产日产欧洲系列| 草莓丝瓜榴莲绿巨人WWW| 亚洲中文字幕无码日韩| 我跟闺蜜公交车被弄到高潮| 糖心旗袍茶艺老师NANA的背景| 婷婷国产成人精品视频| 欧美交换配乱吟粗大免费看| 激情欧美成人小说在线视频| 嗯~使劲~别停~高H漫画| 房东天天吃我奶躁我| 国产精品IGAO视频网| 拔萝卜日本视频在线观看免费 | 色噜噜狠狠狠综合曰曰曰| 鲁鲁鲁爽爽爽在线视频观看| 国产在线观看精品一区二区三区 | 被多个男人调教奶头玩奶头| 粗大的内捧猛烈进出无码| 中文字幕AV一区中文字幕天堂 | 麻豆国产成人AV在线播放欲色| 妺妺窝人体色www九色| 欧洲女人牲交视频免费| 日韩一卡2卡3卡4卡| 无码专区6080YY免费视频| 人人妻人人爽人人澡欧美二区| 久久久久久AV无码免费网站| 国产精品亚洲А∨无码播放不卡 | 无码AV大香线蕉| 亚洲成AV人片无码迅雷下载| 一本加勒比HEZYO无码专区| 小嫩妇里面又嫩又紧| 亚洲成A人片在线观看无码| 伊人久久大香线蕉AV不变影院 | 两个男人吮她的花蒂和奶水视频 | 久久亚洲男人第一AV网站| 国内极度色诱视频网站| 久久AⅤ无码AV高潮AV喷吹| 国产一国产二国产三国产四国产五| 精品人妻少妇一区二区三区不卡| 麻豆产精国品一二三产区区| 人妻夜夜添夜夜无码AV| 武则天裸毛片70分钟| 伊人涩涩涩涩久久久AV| 被强迫的爱人 电影| 国产精品久久久久精品三级卜| 丁香花在线观看免费观看图片| 国产精品乱子伦XXXX| 精品人妻AV无码一区二区三区| 男女作爱在线播放免费网站| 少妇的丰满人妻HD高清| 亚洲乱码日产精品BD在线观看| 97久章草在线视频播放| 性一交一乱一伦一在线小视频| 亚洲熟妇无码AV| BBWBBW肥妇BBWBBW| 国产精品嫩草影院AV| 国产福利无码一区在线| 久久精品成人无码观看免费| 强奷漂亮饱满雪白少妇AV| 无码一区二区三区在线观看| 一边捏奶头一边高潮视频| 成人精品天堂一区二区三区| 精品国产国偷自产在线观看| 含羞草四叶草三叶草| 男人J放进女人P全黄动态图| 天堂中文最新版在线中文| 伊人精品无码AV一区二区三区| 成人无码免费一区二区三区| 精品人妻无码区在线视频| 人妻少妇伦在线麻豆M电影| 日本XXXⅩ色视频免费观看| 人妻去按摩店被黑人按中出| 小SAO货都湿掉奶头好硬男女| 666西方大但人文艺术| 国产乱色国产精品免费视频 | 每晚都被他添的流好多水| 特黄AAAAAAAAA毛片免费视频| 再深点灬舒服灬太大了添A| 再深点灬舒服灬太大了AV| 高跟丝袜AV专区| 老赵抱着媛媛在厨房做| 无码中文字幕AV免费放DVD| 91精品人妻一区二区三区蜜蜜挑| 国产免费无码一区二区视频| 欧美精产国品一二三类产品特点| 亚洲AV无码专区在线电影成人| 亚洲乱码一区二区三区| 波多野结衣TORRENT| 精品综合久久久久久98| 熟女高潮精品一区二区绯乐| 中文无码字幕中文有码字幕| 国产午夜理论片不卡在线观看| 人妻少妇乱子伦无码视频专区| 亚洲色成人网站www观看入口| 高潮好爽视频在线观看| 内射骚妇高清AV电影| 人妻中出受孕 中文字幕在线| 亚洲国产精品无码久久一线| 岳打开双腿开始配合交换| 国产成人无码区免费AⅤ片| 国语精品自产拍在线观看网站| 欧美午夜性春猛交XXX| 亚洲少妇一区二区视频| 国产成A人片在线观看视频| 欧美XXXX黑人又粗又大| 亚洲欧美精品SUV| 国产粉嫩呻吟一区二区三区 | 免费男人下部进女人下部视频| 亚洲AV无码AV吞精久久| 丰满少妇张开双腿无码AV| 国模少妇一区二区三区咪咕| 日本一线和三线的区别是什么| 性VIDEOSTV另类极品| 成人午夜视频一区二区无码|