快捷導(dǎo)航

Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能

更新時(shí)間：2019年06月17日 08:43:50 作者：dora_zc

這篇文章主要介紹了Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

需求描述

最近在做一個(gè)后臺(tái)系統(tǒng)，有一個(gè)功能產(chǎn)品需求是頁(yè)面分為左右兩部分，通過(guò)右邊的組件列表來(lái)動(dòng)態(tài)配置左邊的頁(yè)面視圖，并且左邊由組件拼裝起來(lái)的視圖，可以實(shí)現(xiàn)上下拖拽改變順序，也可以刪除。

根據(jù)這個(gè)需求我做了下面這個(gè)demo。

功能分解

右邊的組件列表，可以通過(guò)拖拽克隆到左邊，拖拽結(jié)束后右邊組件列表數(shù)量不會(huì)減少
左邊的組件可以展開(kāi)或收起
左邊的組件可以上下拖拽，刪除，但不可向右邊拖拽
左邊組件拖拽過(guò)程中不改變其展開(kāi)和收起狀態(tài)

demo截圖

代碼地址

vue-draggable-list

代碼預(yù)覽

<template>
 <div class="row">
  <div class="col-5">
   <h3>組件配置頁(yè)面展示</h3>
   <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">
   <h3>可用組件列表</h3>
   <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>

總結(jié)

以上所述是小編給大家介紹的Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: