您好,登錄后才能下訂單哦!
這篇文章給大家介紹使用Vue拖拽組件列表怎么實現(xiàn)動態(tài)頁面配置功能,內(nèi)容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
<template> <div class="row"> <div class="col-5"> <h4>組件配置頁面展示</h4> <draggable tag="el-collapse" class="dragArea list-group" :list="list2" group="comp" @change="log" > <el-collapse class="list-group-item left" v-for="(element,index) in list2" :key="index" v-model="activeNames" @change="handleChange" > <el-collapse-item :name="element.id"> <template slot="title"> <span>{{element.name}}</span> <i class="el-icon-circle-close" @click.stop="deleteItem(index)"></i> </template> <div>{{ element.content }}</div> </el-collapse-item> </el-collapse> </draggable> </div> <div class="col-5"> <h4>可用組件列表</h4> <draggable class="dragArea list-group" :list="list1" :group="{ name: 'comp', pull: 'clone', put: false }" @change="log" > <div class="list-group-item" v-for="element in list1" :key="element.id">{{ element.name }}</div> </draggable> </div> </div> </template> <script> import draggable from "vuedraggable"; export default { name: "clone", display: "Clone", order: 2, components: { draggable }, data() { return { list1: [ { name: "組件1", id: 1, content: "內(nèi)容內(nèi)容內(nèi)容。。。。" }, { name: "組件2", id: 2, content: "內(nèi)容內(nèi)容內(nèi)容。。。。" }, { name: "組件3", id: 3, content: "內(nèi)容內(nèi)容內(nèi)容。。。。" }, { name: "組件4", id: 4, content: "內(nèi)容內(nèi)容內(nèi)容。。。。" }, { name: "組件5", id: 5, content: "內(nèi)容內(nèi)容內(nèi)容。。。。" }, { name: "組件6", id: 6, content: "內(nèi)容內(nèi)容內(nèi)容。。。。" }, { name: "組件7", id: 7, content: "內(nèi)容內(nèi)容內(nèi)容。。。。" } ], list2: [], activeNames: [], count: 0 }; }, methods: { log: function(evt) { console.log(evt); if (evt.added) { this.count += 1; const item = evt.added.element; const idx = this.list2.findIndex(e => e.id === item.id); let temp = JSON.parse(JSON.stringify(this.list2)); temp[idx].id = this.count; this.list2 = temp; } }, handleChange: function() {}, deleteItem: function(index) { this.list2.splice(index, 1); } } }; </script>
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
關(guān)于使用Vue拖拽組件列表怎么實現(xiàn)動態(tài)頁面配置功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(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)容。