這篇文章給大家介紹使用Vue拖拽組件列表怎么實現動態頁面配置功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

發展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務至上”的服務理念，堅持“二合一”的優良服務模式，真誠服務每家企業，認真做好每個細節，不斷完善自我，成就企業，實現共贏。行業涉及成都紗窗等，在網站建設公司、營銷型網站、WAP手機網站、VI設計、軟件開發等項目上具有豐富的設計經驗。

<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: "內容內容內容。。。。" },
    { name: "組件2", id: 2, content: "內容內容內容。。。。" },
    { name: "組件3", id: 3, content: "內容內容內容。。。。" },
    { name: "組件4", id: 4, content: "內容內容內容。。。。" },
    { name: "組件5", id: 5, content: "內容內容內容。。。。" },
    { name: "組件6", id: 6, content: "內容內容內容。。。。" },
    { name: "組件7", id: 7, content: "內容內容內容。。。。" }
   ],
   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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

關于使用Vue拖拽組件列表怎么實現動態頁面配置功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網頁標題：使用Vue拖拽組件列表怎么實現動態頁面配置功能
網頁網址：http://m.2m8n56k.cn/article38/jcgspp.html

成都網站建設公司_創新互聯，為您提供網站策劃、移動網站建設、關鍵詞優化、網站營銷、靜態網站、小程序開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯