vue 实战 区域内小组件元素拖拽 示例
<template>
<div>
<el-button type="primary" @click="showDialog = true">快捷布局</el-button>
<el-dialog title="快捷布局配置" :visible.sync="showDialog">
<el-row :gutter="20">
<el-col>
<el-card class="box-card" header="开始面板引流区">
<draggable tag="div" class="buttons-container" v-model="drainComponents" >
<el-button v-for="component in drainComponents"
:key="component.comId"
class="button"
:style="{ backgroundColor: component.color }">
<div class="button-content">
<div>{{ component.name }}</div>
<div class="component-id">{{ component.comId }}</div>
</div>
</el-button>
</draggable>
</el-card>
</el-col>
<el-col>
<el-card class="box-card" header="开始面板数据区">
<draggable tag="div" class="buttons-container" v-model="dataComponents" >
<el-button v-for="component in dataComponents"
:key="component.comId"
class="button"
:style="{ backgroundColor: component.color }">
<div class="button-content">
<div>{{ component.name }}</div>
<div class="component-id">{{ component.comId }}</div>
</div>
</el-button>
</draggable>
</el-card>
</el-col>
<el-col>
<el-card class="box-card" header="生活中默认区域">
<draggable tag="div" class="buttons-container" v-model="liveComponents" >
<el-button v-for="component in liveComponents"
:key="component.comId"
class="button"
:style="{ backgroundColor: component.color }">
<div class="button-content">
<div>{{ component.name }}</div>
<div class="component-id">{{ component.comId }}</div>
</div>
</el-button>
</draggable>
</el-card>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="saveLayout">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import draggable from 'vuedraggable';
// 生成柔和颜色的函数
const generateSoftColor = () => {
const hue = Math.floor(Math.random() * 360);
const saturation = 60 + Math.random() * 20; // 饱和度在60%-80%之间
const lightness = 70 + Math.random() * 20; // 亮度在70%-90%之间
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
};
// 通用的转换函数
const convertDataList = (dataList) => {
return dataList.map(item => ({
comId: item.comId,
name: item.name,
weight: item.weight,
color: generateSoftColor()
}));
};
const sortedDataList = (dataList) => {
return dataList.slice().sort((a, b) => b.weight - a.weight);
}
// 数据列表
const dataList1 = [
{ comId: '1000009', name: '对方如果', property: 0, type: 0, weight: 4 },
{ comId: '1000004', name: '辅导费人', property: 0, type: 0, weight: 1 },
{ comId: '1000010', name: '电电风扇', property: 0, type: 0, weight: 2 },
{ comId: '1000006', name: '小组件', property: 0, type: 0, weight: 3 },
{ comId: '1000007', name: '飒飒飒飒', property: 0, type: 0, weight: 5 },
{ comId: '1000011', name: '你说的分手', property: 0, type: 0, weight: 6 },
{ comId: '1000012', name: '大润发儿童', property: 0, type: 0, weight: 9 },
{ comId: '1000013', name: '大方的发过的', property: 0, type: 0, weight: 8 }
];
const dataList2 = [
{ comId: '1000001', name: '哈哈哈', property: 0, type: 1, weight: 2 },
{ comId: '1000005', name: '测试组件名称', property: 0, type: 1, weight: 2 },
{ comId: '1000002', name: '啦啦啦', property: 1, type: 0, weight: 0 }
];
const dataList3 = [
{ comId: '1000017', name: 'GV地方大幅度', property: 0, type: 0, weight: 3 },
{ comId: '1000016', name: '奋斗奋斗发的', property: 0, type: 0, weight: 2 },
{ comId: '1000008', name: '大幅度发', property: 0, type: 0, weight: 1 },
{ comId: '1000003', name: '似懂非懂发', property: 1, type: 1, weight: 0 },
{ comId: '1000014', name: '个人发一个发帖人', property: 0, type: 0, weight: 0 },
{ comId: '1000015', name: '会更好多说点', property: 0, type: 0, weight: 0 }
];
export default {
components: { draggable },
data() {
return {
showDialog: false,
drainComponents: convertDataList(sortedDataList(dataList1)),
dataComponents: convertDataList(sortedDataList(dataList2)),
liveComponents: convertDataList(sortedDataList(dataList3))
};
},
methods: {
generateSoftColor,
convertDataList,
removeColorSet(data) {
for(let i=0;i<data.length;i++){
delete data[i].color;
}
return data
},
updateWeights(data) {
for(let i=0;i<data.length;i++) {
data[i].weight = data.length - i;
}
return data
},
saveLayout() {
this.showDialog = false;
this.drainComponents = this.updateWeights(this.drainComponents)
this.dataComponents = this.updateWeights(this.dataComponents)
this.liveComponents = this.updateWeights(this.liveComponents)
this.printComponentVal();
// Remove 'color' field from each dictionary
// this.drainComponents = this.removeColorSet(this.drainComponents)
// console.log("this.drainComponents", this.drainComponents)
// this.dataComponents = this.removeColorSet(this.dataComponents)
// console.log("this.dataComponents", this.dataComponents)
// this.liveComponents = this.removeColorSet(this.liveComponents)
// console.log("this.liveComponents", this.liveComponents)
},
printComponentVal() {
console.log("this.drainComponents", this.drainComponents)
console.log("this.dataComponents", this.dataComponents)
console.log("this.liveComponents", this.liveComponents)
},
}
};
</script>
<style scoped>
.box-card {
margin-bottom: 20px;
}
.buttons-container {
display: flex;
flex-wrap: wrap;
}
.button {
margin: 5px;
flex: 0 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button-content {
text-align: center;
}
.component-id {
font-size: 0.8em;
color: #666;
}
.buttons-container .button:first-child {
margin-left: 10px;
}
</style>
原文地址：https://blog.csdn.net/weixin_41987016/article/details/140631479
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！