腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

詳解vue項(xiàng)目中使用vuedraggable

更新時(shí)間：2022年05月21日 10:45:11 作者：漁舟唱晚@

這篇文章主要介紹了vue項(xiàng)目中使用vuedraggable,本文給大家介紹了錯(cuò)誤問題分析及解決方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近在學(xué)習(xí)一個(gè)可視化搭建的項(xiàng)目，里面用的拖拽就是draggable.js。看了幾個(gè)中文的文檔，有很多坑，可能是沒有及時(shí)更新的原因。

VUe

建議去看vuedraggable的官方文檔，只不過是英文的。官方文檔：https://github.com/SortableJS/Vue.Draggable；

由于vue3已經(jīng)是默認(rèn)版本了，所以vuedraggable也對應(yīng)vue2.0和3.0有各自的版本，直接使用基本命令安裝：

npm install vuedraggable --save

會(huì)默認(rèn)安裝2.1左右的版本，由于我的項(xiàng)目是vue3構(gòu)建的，所以會(huì)報(bào)錯(cuò)：

就是draggable版本不對，導(dǎo)致錯(cuò)誤，版本換位4.1.0的就解決了

npm i vuedraggable@4.1.0 --save 或 yarn add vuedraggable@4.1.0

在官網(wǎng)里專門對vue版本的不同做了對應(yīng)的解釋，在vue2中，

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

//.vue file:
  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

With transition-group:

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

而在vue3中，這樣寫是有問題的，官網(wǎng)提示：

Breaking changes:
Use item slot instead of default to display elements#使用項(xiàng)目槽而不是默認(rèn)值來顯示元素Provide a key for items using itemKey props#使用itemKey道具為物品提供密鑰

變動(dòng)確實(shí)挺大的，寫法如下：

From:

<!-- vue 2 version -->
<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

To:

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
   </template>
</draggable>

當(dāng)使用transition時(shí)，現(xiàn)在應(yīng)該使用tag和componentData來創(chuàng)建transition

From

<!-- vue 2 version -->
<draggable v-model="myArray">
    <transition-group name="fade">
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

to

<draggable v-model="myArray" tag="transition-group" :component-data="{name:'fade'}">
  <template #item="{element}">
    <div>{{element.name}}</div>
  </template>
</draggable>

注：在進(jìn)行clone時(shí)，vue2.x版本Draggable 組件中的配置項(xiàng)寫法（:options="{group:{name: 'article',pull:'clone'}, sort: false}"）在vue3中不起效，

vue3中需要將里面的參數(shù)單獨(dú)進(jìn)行配置，如：:group="{name: 'article',pull:'clone'}" :sort='false' 等。

到此這篇關(guān)于vue項(xiàng)目中使用vuedraggable的文章就介紹到這了,更多相關(guān)vue使用vuedraggable內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: