//按钮组件，其实里面很简单 //组件的对应的编辑组件，里面内容和这个也差不多，下面就不写了 <template> <div :data-code="content.code"> <el-button :style="oStyle"> {{ content.text }} </el-button> //因为每个组件都有删除功能，所以写成了一个组件 <DeleteCp :aIndex="aIndex"></DeleteCp> </div> </template> <script> import DeleteCp from "@/components/DeleteCp"; export default { name: 'Btn', props: { //父组件传入的参数 content: Object, oStyle: Object, aIndex: Number }, components: { DeleteCp }, data(){ return{ btnModel: 'btn-model' } } } </script>
->最后来看看删除组件吧
<template> <div> <div @click.stop="dailogStatu"></div> <el-dialog title="提示" :visible.sync="dialogVisible" :append-to-body="appendToBody"> <div> <div></div> <div>此操作将删除该模块, 是否继续?</div> </div> <span slot="footer"> <el-button @click="dialogVisible = false" size="small">取 消</el-button> <el-button type="primary" @click="onRemove(aIndex)" size="small">确 定</el-button> </span> </el-dialog> </div> </template> <script> import { mapMutations } from "vuex"; export default { name: 'oText', props: { aIndex: Number }, data(){ return{ //这两个参数是弹框的参数 dialogVisible: false, appendToBody: true } }, methods:{ ...mapMutations(['deleteCp','setCommon']), dailogStatu(){ //主要是控制弹窗出来，并且显示该组件对应的编辑栏 this.dialogVisible = true; this.setCommon({flag: true,index: this.aIndex}) }, onRemove(index){ //点击确定删除对应的组件 let flag = false; this.deleteCp(index); this.dialogVisible = false; this.$message({ message: '该模块已删除 !', type: 'success' }); this.setCommon({flag: false,index: 0}) } } } </script>
-> 来看看效果图吧
效果图展示
结束语
好了，今天写了很多了，最后我们来梳理一下思路：
1、首先配置左侧的拖拽组件
2、配置vuex中的数据
3、app.vue中配置
4、编辑组件的配置
5、各种数据的传递与依赖
其实每个项目，都需要一个清晰的路线，这样才能很好的开发下去，所以我的建议是，在拿到项目的时候，千万不要一股脑的去写，一定要想好怎么做，以及突发事情的发生(比如突来的需求变更)，这样既方便了我们自己，也方便了后来维护的人，也阻止了不必要的麻烦
谢谢大家的耐心的阅读，毕竟这只是一个大概的介绍，肯定存在很多不足，如果大家有建议，欢迎留言交流，也希望大家多多支持脚本之家。
您可能感兴趣的文章: