标签：组件 style 系统 gdi 节点 20px input mod ret
背景
新开发的项目中使用了VUE框架，一套管理系统。因为大多都是对表的操作，比如增删改查。因为这些业务关系对单个记录修改的时候用的是模态框，用element-ui的 dialog组件
问题
记录的新增和编辑用的是相同的表单元素，所以肯定是不会用两个单独的组件，VUE也强调要组件复用。我的做法是用一个组件来写记录的编辑界面
1）新增和编辑的时候打开同一个组件，如何区分编辑和新增
2）列表的组件和编辑的表单组件是两个文件，数据通过props传递
3）视图也逻辑都要在一个组件里；
4）列表组件控制dialog显示，表单组件写重置，保存等逻辑；
做法
Angular的做法
之前一直用angular做单页面应用，用的模态框是ng-dialog，每次实例化一个ngDialog.open() 就会在body的结束标签前新增一个DOM节点。我用一个factory服务存放ngDialog.open()，每次调用的都是同一个单例对象的方法。这样做有几个好处
VUE的做法
<!-- list组件 --> <template> <div class="btns"> <button class="btn btn-default" @click="add">新增</button> <button class="btn btn-default" @click="edit">修改</button> </div> <el-dialog title="新增编辑表单" v-model="showDialog"> <user-form :show-dialog="showDialog" :dialog-type="dialogType" ref="userForm" v-on:close="closeDialog"></user-form> </el-dialog> </template> <script> import userForm from ‘user-form.vue‘; export default{ data(){ return{ showDialog:false, dialogType:‘‘ } }, created(){ }, methods:{ add(){ this.showDialog = true; //打开el-dialog this.dialogType = ‘add‘; //操作类型 }, edit(){ this.showDialog = true; //打开el-dialog this.dialogType = ‘edit‘; }, closeDialog(){ this.showDialog = false; //隐藏el-dialog } } } </script>
<!-- 新增修改表单组件 --> <template> <el-form :model="userForm" ref="userForm" label-width="120px"> <el-form-item label="名字" prop="name"> <el-input v-model="userForm.name"></el-input> </el-form-item> <el-form-item> <el-button @click="save">保 存</el-button> </el-form-item> </el-form> </template> <script> export default{ props:[‘showDialog‘ ‘dialogType‘], data(){ return{ userForm:{ name:‘‘ } } }, methods:{ save(){ //事件通知父组件修改el-model的显示状态 this.$emit(‘close‘); } }, watch:{ showDialog(n, o){ //根据dialog的状态重置表单 if(n) this.$refs.userForm.resetFields() }, dialogType(n, o){ switch(n){ case ‘add‘: //新增 break; case ‘edit‘: //编辑 break; } } } } </script>
还有一种方法是把el-dialog组件和el-form组件写到一个组件里，showDialog属性在表单组件里声明，在列表里使用$refs调用子组件的属性并修改；
标签：组件 style 系统 gdi 节点 20px input mod ret
原文地址：http://www.cnblogs.com/zhang-jian/p/7440880.html
