弹出框封装 编辑和新建按钮封装

TrueAndFalse
41 阅读1分钟

首先用了饿了么的插件,并且在弹出框插件中调用了我们自己封装的表单页面,并且绑定值,让表单自动生成

image.png

image.png

image.png

开始封装,新建一个页面

image.png

主页面传数据

image.png

编辑和新建按钮封装 1.绑定方法

image.png

image.png

2.发送事件给父组件

image.png

image.png

3.父组件接收方法

image.png

4.父组件接收弹窗组件的方法和数据

image.png

5.父组件更改弹窗组件的数据和属性

image.png 6.编辑按钮需要填写相关数据,所以返回值给子页面

image.png

image.png

image.png

7.字页面监听变化,如果是编辑会填写对应的内容

image.png

封装

image.png

image.png

遇到一个小问题,就是编辑,然后在点击新建,表单内容会填充 解决方法

先添加一个属性 image.png 然后在hooks中给按钮新建按钮设置空数组 image.png

然后还有一个新问题,就是只有在点击新建的时候才会显示密码框,编辑时隐藏密码 但是隐藏的功能不是所有页面都需要的,所以不能直接封装到hooks里面

步骤1 设置一个开关

image.png

2.封装hooks,可以传进两函数,一个新建按钮的,一个编辑按钮的 并且可有可无,有就执行,没有则正常来

image.png

设置方法

image.png

传入方法

image.png

avatar
文章
阅读
粉丝