vue拖拽组件 店铺装修

### Vue 拖拽组件实现店铺装修功能

为了实现店铺装修的功能，Vue 可以借助 `vuedraggable` 组件来创建可拖拽布局。此工具允许用户通过简单的拖放操作来自定义页面上的各个部分。

安装所需的库可以通过如下命令完成：

对于 `vuedraggable` 的安装[^2]:

yarn add vuedraggable
# 或者使用 npm
npm install --save vuedraggable

下面是一个基本的例子展示如何利用这些技术构建一个简易版的店铺编辑器:

#### 创建基础模板结构

首先，在 HTML 文件中设置好容器区域以及可供选择放置到页面中的部件列表。

<div id="app">
  <!-- 工具栏 -->
  <div class="toolbar">
    <h3>可用组件</h3>
    <ul v-dragsource="componentsList" tag="transition-group">
      <li v-for="(component, index) in componentsList" :key="index">{{ component.name }}</li>
    </ul>
  </div>

  <!-- 编辑区 -->
  <div class="editor-area">
    <h3>当前设计稿</h3>
    <draggable v-model="currentLayout" @end="onEndDrag">
      <transition-group name="flip-list" tag="section">
        <article v-for="(item, idx) in currentLayout" :key="idx">
          {{ item }}
        </article>
      </transition-group>
    </draggable>
  </div>
</div>

#### 初始化数据并配置逻辑处理函数

接着初始化应用的数据模型，并编写相应的事件处理器来进行交互控制。

new Vue({
  el: '#app',
  data() {
    return {
      // 预设的一些组件选项
      componentsList: [
        {name: '轮播图'},
        {name: '商品推荐'},
        {name: '优惠券'}
      ],
      
      // 当前正在编辑的设计稿内容
      currentLayout: []
    }
  },
  
  methods: {
    onEndDrag(event){
      console.log('结束拖动', event);
    }
  }
});

上述代码片段展示了怎样基于 `vuedraggable` 构建一个支持拖拽添加组件的基础框架[^1]。在这个例子里面，左侧列出了几个预置好的组件供挑选；右侧则是实际显示最终效果的地方。当用户把左边某项拉入右边时就会触发相应的变化更新至视图上。