</div>
<span slot="footer" class="dialog-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、各种数据的传递与依赖
其实每个项目，都需要一个清晰的路线，这样才能很好的开发下去，所以我的建议是，在拿到项目的时候，千万不要一股脑的去写，一定要想好怎么做，以及突发事情的发生(比如突来的需求变更)，这样既方便了我们自己，也方便了后来维护的人，也阻止了不必要的麻烦
谢谢大家的耐心的阅读，毕竟这只是一个大概的介绍，肯定存在很多不足，如果大家有建议，欢迎留言交流，也希望大家多多支持软件开发网。
