(vue)draggable的使用:

nyf_unknown

已于 2022-07-25 11:57:48 修改

阅读量527

点赞数

分类专栏： VUE 文章标签： vue.js javascript css3

于 2022-06-06 09:31:01 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/125102469

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

该博客介绍了如何在 Vue.js 应用中利用 draggable 组件实现元素的拖拽操作，并展示了如何结合关闭按钮动态管理组件。通过设置 v-model、item-key 和 disabled 属性，以及运用 v-for 循环渲染子组件，并在 goClose 方法中删除对应项，实现了拖拽禁用和板块关闭的功能。样式部分定义了网格布局和关闭按钮的样式，使得拖拽元素具有良好的视觉效果。

摘要由CSDN通过智能技术生成

(vue)draggable的使用:

// 1.html
 <draggable
   v-if="flag"
   v-model="gridLists"
   class="grid-container"
   item-key="grid"
   animation="300"
   chosenClass="chosen"
   forceFallback="true"
   disabled="true"  // 禁止拖拽
 >
   <div class="line" v-for="(item, index) in gridLists" :key="index">
     <div :is="item.component"></div> // 组件内容
     <span class="el-icon-close" @click="goClose(item.num)"></span>  // 关闭按钮
   </div>
 </draggable>
 
// 2.引入子组件
	import HotSearch from "@/components/Intelligence/search/HotSearch";
	import Trend from "@/components/Intelligence/search/Trend";

// 3.子组件数组
  data() {
    return { 
      gridLists: [
        { grid: "cn", num: 1, component: HotSearch },
        { grid: "cn", num: 2, component: Trend },
      ],
    };
  },
  
// 4.方法
// 板块关闭
goClose(num) {
  this.gridLists.forEach((item, index) => {
    if (item.num == num) {
      this.gridLists.splice(index, 1);
    }
  });
},

效果：
在这里插入图片描述

// 5.样式
  .grid-container {
    width: 100%;
    height: 86vh;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: 33.3% 33.3% 33.3%;
  }
  .line {
    position: relative;
    font-size: 2em;
    cursor: pointer;
    height: 560px;
    background-color: rgb(242, 242, 242);
    margin-right: 10px;
    margin-bottom: 10px;
  }
  // 关闭按钮
  .close {
    width: 50px;
    height: 50px;
  }
  .el-icon-close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
  }
  .el-icon-close:before {
    position: absolute;
    content: "";
    width: 2px;
    height: 20px;
    background: blue;
    transform: rotate(45deg);
    top: -3px;
    left: -11px;
  }
  .el-icon-close:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    background: blue;
    transform: rotate(-45deg);
    top: -3px;
    left: -11px;
  }