<template> <div> <el-button type="primary" @click="handleClick">打开对话框</el-button> <el-button type="primary" @click="handleRecord">待优化点</el-button> <dee-dialog :dialog-visible="dialogVisible" @handleClose="handleClose"> <dee-card :id="id" :name="cardName" :shape="shape" :icon="icon" :show="show" :shadow="shadow"> <dee-step :steps="steps" :height="height" /> </dee-card> </dee-dialog> <dee-dialog :dialog-visible="reDialogVisible" @handleClose="reDialogVisible=false"> <p>1、step组件中active应该修改为属性传值,当前处理哪一步应该由父组件决定</p> <p>2、step组件中布局形式应该从父组件获取,step组件可以给一个默认值,需求不同布局方式可能存在差异</p> <p>3、dialog组件中可以增加确认和取消按钮,可以通过状态控制是否渲染,父组件只监听对应的事件处理业务逻辑</p> <p>4、dialog组件中增加自定义按钮,对于特殊业务场景增加其它按钮进行业务逻辑处理</p> <p>5、dialog组件增加可拖拽功能</p> <p>6、将pagination默认集成到table中,通过状态控制是否渲染,默认可以是渲染状态</p> <p>7、pagination的pageSize和currentPage可以进行合并后通过一个事件触发,当前组件中共有四个方法</p> <p>8、接口调用不建议通过vuex进行跳转,如果有数据需要保存到vuex中,可以在获取到数据后通过commit进行vuex中的数据状态更新</p> <p>9、form中的数据建议直接通过一个数组控制,减少数据结构的复杂性,便于操作,目前结构是formData:[{split,data}],form结构是在data中进行控制</p> <p>10、form中建议增加提交和取消按钮,其它按钮可以通过自定义的方式进行添加,和第3,4条类似</p> </dee-dialog> </div> </template> <script> export default { name: 'Test', components: { }, data() { return { dialogVisible: false, reDialogVisible: false, cardName: 'card名称', shape: 1, id: 1, icon: '', show: true, lock: true, shadow: true, height: '200px', steps: [{ title: '步骤一', description: '这是步骤一的描述' }, { title: '步骤二', description: '这是步骤二描述' }, { title: '步骤三', description: '这是步骤三的描述' }] } }, methods: { handleClick() { this.dialogVisible = true }, handleClose() { this.dialogVisible = false }, handleRecord() { this.reDialogVisible = true } } } </script>