您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue項目中如何使用vuedraggable”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vue項目中如何使用vuedraggable”吧!
由于vue3已經(jīng)是默認版本了,所以vuedraggable也對應(yīng)vue2.0和3.0有各自的版本,直接使用基本命令安裝:
npm install vuedraggable --save
會默認安裝2.1左右的版本,由于我的項目是vue3構(gòu)建的,所以會報錯:
就是draggable版本不對,導致錯誤,版本換位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#使用項目槽而不是默認值來顯示元素Provide a key for items using itemKey props#使用itemKey道具為物品提供密鑰
變動確實挺大的,寫法如下:
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>
當使用transition時,現(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>
注:在進行clone時,vue2.x版本Draggable 組件中的配置項寫法(:options="{group:{name: 'article',pull:'clone'}, sort: false}")
在vue3中不起效,
vue3中需要將里面的參數(shù)單獨進行配置,如::group="{name: 'article',pull:'clone'}" :sort='false'
等。
到此,相信大家對“vue項目中如何使用vuedraggable”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。