(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;
}