vue可用于拖動(dòng)排序組件示例
更新時(shí)間：2023年06月06日 14:21:05 作者：AshleyLv
這篇文章主要為大家介紹了vue可用于拖動(dòng)排序組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
介紹
vue-dragging 一款可任意拖動(dòng)排序的vue插件。支持桌面和移動(dòng)端，拖拽過渡動(dòng)畫美觀。支持vue1和vue2版本。非常實(shí)用。
安裝
通過NPM安裝
$ npm install awe-dnd --save
插件應(yīng)用
在main.js中，通過Vue.use導(dǎo)入插件
import VueDND from 'awe-dnd' Vue.use(VueDND)
在你的vue文件中這樣引用
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
}
}
</script>
<template>
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
</template>vue2.0的使用方式
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>vue1.0的使用方式
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }"
track-by="text"
>{{color.text}}</div>
</div>添加事件
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
:key="color.text"
>{{color.text}}</div>
</div>export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}以上就是vue可用于拖動(dòng)排序組件示例的詳細(xì)內(nèi)容，更多關(guān)于vue拖動(dòng)排序組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
組件是vue技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開發(fā)效率大幅提升,這篇文章主要給大家介紹了關(guān)于uni-app自定義組件的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vue中實(shí)現(xiàn)展示與隱藏側(cè)邊欄功能
這篇文章主要介紹了vue中實(shí)現(xiàn)展示與隱藏側(cè)邊欄功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue3組件通信方式,面試題經(jīng)常會(huì)問到vue3組件間的通信方式，今天就通過實(shí)例代碼給大家詳細(xì)介紹下，對(duì)vue3組件通信相關(guān)知識(shí)感興趣的朋友一起看看吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue2為何能通過this訪問到data與methods的屬性
這篇文章主要介紹了Vue2為何能通過this訪問到data與methods的屬性，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
本篇文章主要介紹了vuejs 單文件組件.vue 文件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue2.0 keep-alive的最佳實(shí)踐，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)
這篇文章主要介紹了Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08