自定义element-plus的弹框样式

项目中弹框使用频繁,需要统一样式风格,此组件可以自定义弹框的头部样式和内容

一、文件结构如下:
自定义element-plus的弹框样式_第1张图片 

自定义element-plus的弹框样式_第2张图片 

 二、自定义myDialog组件

需求:

1.自定义弹框头部背景样式和文字

2.自定义弹框内容

3.基本业务流程框架

自定义element-plus的弹框样式_第3张图片

components/myDialog/index.vue完整代码:





三、使用组件

实现方法:

1.通过插槽自定义弹框中的表单内容

2.父子组件传值

3.ref直接获取dom

自定义element-plus的弹框样式_第4张图片

 dialogDemo/dialog.vue完整代码:




添加或编辑成功后,刷新页面

自定义element-plus的弹框样式_第5张图片

  dialogDemo/index.vue完整代码:




自定义element-plus的弹框样式_第6张图片

 

你可能感兴趣的:(项目,vue.js,javascript,前端,element-plus,typescript)