欧美经典日韩精品_日韩高清亚洲日韩精品一区_日韩精品无码综合视频网_国产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成人片色在线高潮| 亚洲色播爱爱爱爱爱爱爱| 狠狠躁天天躁中文字幕| 18黑白丝水手服自慰喷水网站 | 欧美和日本操逼视频| 国产乱子伦精品免费无码专区| 中文字幕色AV一区二区三区| 午夜伦情电午夜伦情电影| 男人进入女人里面想动还是不想动| 国产强奷在线播放| 阿姨呀咿呀啊咿呀咿呀| 亚洲免费成人av| 三个男人躁我一个爽| 蜜国产精品JK白丝AV网站| 国产美女丝袜一级肛交蜜桃| xxxx免费网站| 伊人久久大香线蕉无码不卡| 午夜亚洲乱码伦小说区69堂| 清区二三区国产好的精华液| 久久九九有精品国产23百花影院 | OLDGRAANNY日本老熟妇| 亚洲国产成人无码电影| 少妇与子乱A级全毛片| 男男车车CP视频| 精品国产一区二区三区AV片| 高潮白浆潮喷正在播放| 99视频30精品视频在线观看| 亚洲熟悉妇女XXX妇女AV| 无码人妻侵犯一区侵犯| 人人妻人人添人人爽欧美一区| 久久婷婷五月综合色99啪| 国产又色又爽又黄的网站在线| 成年动作片AV免费网站| 中文字幕亚洲情99在线| 亚洲精品美女久久久久99| 无码人妻一区二区三区麻豆| 日韩AV无码中文一区二区三区| 男女啪啪进出阳道猛进| 久久精品国产国产精品四凭| 国产午夜成人无码一区二区 | 成 人 黄 色 网 站 18| 2020国产精品久久久久精品| 亚洲中文字幕精品无码AV| 亚洲AV成人片在线观看香蕉资源| 少妇午夜AV一区| 日本怡春院一区二区三区| 女人18片毛片60分钟完整版| 老司机午夜精品视频资源| 精品人妻系列无码一区二区三区| 国产无套码AⅤ在线观看| 国产成人AV无码精品天堂| 办公室被公司领导C了很多次| 中文字幕乱码人妻一区二区三区| 亚洲一区二区三区无码国产| 亚洲V欧美V日韩V国产V| 性丰满ⅩXXOOO性FREE| 天干天干啦夜天天喷水| 日韩精品无码中文字幕一区二区| 欧美熟妇另类久久久久久多毛 | 久久99精品国产麻豆蜜芽| 国产又爽又粗又猛的视频| 国产精品久久久久精品日日| 丰满人妻被粗大爽ⅩXOO| 成人无号精品一区二区三区| MM1313亚洲国产精品无码| 99久久国产综合精品女| 中文字幕乱码无码人妻系列蜜桃| 夜夜躁婷婷AV蜜桃妖精视频| 亚洲已满18点击进入在线看片| 亚洲精品无码寂寞少妇AV| 亚洲成AV人片天堂网久久| 午夜A成V人电影| 无码人妻精品中文字幕免费| 婷婷五月18永久免费网站| 四季亚洲精品成人AV无码网站| 少妇无码一区二区三区| 特级毛片爽WWW免费版| 玩弄老太太的BBB| 无遮挡啪视频APP| 无码人妻精品一区二区三区久久久 | 成人欧美激情亚洲日韩蜜臀 | 国产AV免费一区二区三区| 俄罗斯IPHONE14PRO| 丰满人妻被公侵犯完整版| 国产 中文 制服丝袜 另类| 国产成人精品一区二区三区 | 国产成人乱色伦区| 国产精品久久久久久精品电影| 国产精品自在拍首页视频8| 国产无套粉嫩白浆在线| 精品厕所偷拍各类美女TP嘘嘘| 精品福利一区二区三区免费视频| 久久寂寞少妇成人内射| 久久久久亚洲AV成人网| 美女扒开内裤无遮挡| 欧美人与动牲交免费观看视频 | 色欲AV自慰一区二区三区| 天美传媒MV免费观看软件特色| 无罩大乳的熟妇正在播放| 亚洲AV午夜福利精品一区二区| 亚洲成A人片在线观看无遮挡| 亚洲一区无码中文字幕| 696969大但人文艺术正道| 苍井空电影在线观看| 国产成人精品视频网站| 含羞草传媒入口免费网站腾讯网 | 久久99青青精品免费观看| 里面也请好好疼爱漫画最新章节 | 精品一区二区三区免费乱码视频| 久久无码人妻丰满熟妇区毛片| 欧美精品一区二区三区人妻久久久 | JIZZJIZZ日本高潮喷水| 东北妇女精品BBWBBW| 国产乱人伦精品一区二区| 精产国品一二三产品区别在| 乱世桃花免费观看完整版高清| 欧洲无人区卡一卡二| 铜铜铜铜铜铜铜好大好深色板| 亚洲AV无码一区二区二三区| 亚洲中文久久久久久精品国产| 999ZYZ玖玖资源站永久| 丰满人妻熟妇乱又伦精品| 国语自产少妇精品视频| 美女裸体A级毛片| 日韩综合亚洲色在线影院| 亚洲AV无码潮喷在线入口| 又大又紧又粉嫩18P少妇| 成人免费高清A级毛片 | 极品婬荡少妇XXXX欧美| 美女张开双腿久久久久久| 色婷婷精品亚洲AⅤ| 亚洲精品无码不卡久久久久| Chinese丰满熟妇高潮| 国产精品毛片一区二区| 久久无码人妻一区二区三区午夜| 任你躁国产自任一区二区三区| 小妖精含牢了我喂饱你| 中文字幕乱近親相姦| 国产成人亚洲综合A∨婷婷图片| 久久精品无码一区二区三区免费| 欧美黑人又大又粗XXXXX| 无码人妻一区二区三区免水牛视频| 一区二区三区国产精华液区别| 粗壮挺进邻居人妻无码| 精品视频无码一区二区三区| 人妻少妇精品无码专区APP| 亚洲 自拍 另类小说综合图区| 18禁强伦姧人妻又大又粗| 国产精品久久久久精品麻豆| 麻豆AV无码精品一区二区| 特级欧美AAAAAAA免费观看| 伊人久久大香线蕉AⅤ色| 公司办公桌C了我好几次| 久久人人爽人人爽人人片AV不| 日韩AV一区二区在线| 亚洲日韩亚洲另类激情文学| 成人爽A毛片在线视频淮北| 精品无码久久久久久久久| 日韩精品久久久久久免费| 亚洲一区二区无码成人AV| 国产99网站免在线观看| 蜜臀av午夜福利| 性av 丰满av 无码av| www.丁香五月| 久久精品女同亚洲女同| 我把英语课代表按在桌子上抄 | 国产AV人人夜夜澡人人爽| 久久综合九色综合欧洲98| 窝窝人体色WWW聚色窝魅惑| 2021国产麻豆剧传媒网站| 国产熟睡乱子伦视频| 人妻熟妇乱又伦精品视频| 一本大道在线无码一区| 国产乱妇乱子在线视频| 人妻AV资源先锋影音AV资源| 亚洲中文字幕乱码AV波多JI| 国产精品无码一区二区三区不卡 | 一面亲上边一面膜下边文字的含义| 国产AV导航大全精品| 女被啪到深处喷水GIF动态视频| 亚洲成A人片在线不卡一二三区| 俄罗斯人又更又租| 欧美18VIDEOSEX性极品| 亚洲欧洲成人A∨在线观看 | 国产午夜鲁丝片AV无码| 欧美最猛黑人XXXⅩ猛男视频| 亚洲自偷自拍另类小说| 国产精品人人爽人人做我的可爱| 琪琪电影网WWW888DVDC| 在教室伦流澡到高潮HGL动漫| 国产又爽又黄又爽又刺激| 色欲AⅤ蜜臀AV免费观看| 69SEX久久精品国产麻豆| 久久99成人精一区二区三区| 无码熟妇人妻AV在线影片| 成人无码视频在线观看| 欧美激情一区二区三区蜜桃| 亚洲熟妇无码av叧娄本色| 国精产品一二三四线免费| 我趁老师喝醉后玩弄她的身体|