一，使用效果

多个页面要使用这样的弹窗效果，所以需要封装一个dialog

二,实现代码

1，初步封装

<template><div class="comDialog"><!-- 编辑/新增  弹框 --><el-dialog:visible.sync="visible":width="width":close-on-click-modal="closeOnClickModal":show-close="false"><div slot="title" class="dialog-title">{{title}}</div><div><slot></slot></div><div slot="footer"><div class="tan_dialog"><slot name="leftButton"></slot><el-button @click="cancel" type="info" class="tan_cal">取 消</el-button><el-button type="primary" @click="visibleSure" class="tan_sure">{{sureBtn}}</el-button></div></div></el-dialog></div>
</template>
<script>
export default {props: {title: String,value: {type: Boolean,default: false},width:{type: String,default: '660'},closeOnClickModal:{type:Boolean,default:true},sureBtn:{type: String,default: '确 定'},},data() {return {visible: this.value};},mounted() {},watch: {value() {this.visible = this.value;},visible: {handler(newName) {this.$emit("input", newName);},deep: true}},methods: {visibleSure() {this.$emit("confirm");},cancel(){this.$emit('cancel');setTimeout(()=>{this.visible=false},0)}}
};
</script>
<style scoped>
</style>

2，对应不同业务的再处理

<template><div><!-- 添加 / 编辑 类目弹框 --><com-dialog :title="title"  v-model="dialogVisible" @confirm="confirm"><div class="form_dialog"><el-form ref="dialogVisiForm" label-width="120px" :rules="rules" :model="Form"><el-form-item label="种类 :" prop="category"><el-input v-model="Form.category"></el-input></el-form-item><el-form-item label="标题 :" prop="title"><el-input v-model.number="Form.title" ></el-input></el-form-item><el-form-item label="类型 :" prop="type"><el-input v-model="Form.type"></el-input></el-form-item><el-form-item label="打印机编号 :" prop="number"><el-input v-model.number="Form.number"></el-input></el-form-item><el-form-item label="打印机密钥 :" prop="password"><el-input v-model.number="Form.password"></el-input></el-form-item><el-form-item label="打印联数 :" prop="amount"><el-input v-model.number="Form.amount"></el-input></el-form-item></el-form></div></com-dialog></div>
</template>
<script>
import comDialog from "@/components/comDialog";
export default {components: {comDialog},props: {value: {type: Boolean,default: false},title: {type: String,default: ""},propsFrom:{default: {category: "",title: '',type: "",number: "",password: "",amount: ""}}},data() {return {dialogVisible: this.value,Form: this.propsFrom,rules: {category: [{ required: true, message: "请输入种类", trigger: "blur" }],number: [{ required: true, message: "请输入打印机编号", trigger: "blur" }],password: [{ required: true, message: "请输入打印机编号", trigger: "blur" }],amount: [{ required: true, message: "请输入打印机编号", trigger: "blur" }]}};},methods: {confirm(){this.$refs['dialogVisiForm'].validate((valid) => {if (valid) {this.$emit("getConfirm", this.Form);} else {console.log('error submit!!');return false;}});}},watch: {propsFrom(val){this.Form=val},value() {this.dialogVisible = this.value;},dialogVisible: {handler(newName) {this.$emit("input", newName);},deep: true}}
};
</script>
<style scoped lang="less">
.line{.spanLine{display: block;text-align: center;color: #999999;}
}
</style>

3，具体项目页面的使用

import dialogComponent from "./dialogComponent.vue";
export default {components: {dialogComponent},

和

 <!-- 编辑对话框 --><dialog-component  title="编辑打印机" v-model="dialogVisible" @getConfirm="getConfirm" :propsFrom="form" ref="formRef"> </dialog-component>

dialog的二次封装相关推荐

Android 应用程序集成FaceBook 登录及二次封装
1.首先在Facebook 开发者平台注册一个账号 https://developers.facebook.com/ 开发者后台 https://developers.facebook.com/ap ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
Glide二次封装库的使用
更多代码可以查询本人GitHub:欢迎阅读,star点起来. Glide二次封装库源码前言为什么选择Glide? Glide 轻量级速度快可以根据所需加载图片的大小自动适配所需分辨率的图支 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
Android 应用程序集成Google 登录及二次封装
谷歌登录API: https://developers.google.com/identity/sign-in/android/ 1.注册并且登录google网站 https://accounts. ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
iOS安全之二次封装AFN并设置请求头/执行HTTPS加强安全
以前都是直接复制粘贴二次封装好的代码 , 现在都忘了怎么写 . 恰好当前项目要用到请求头 , 在网上学习了一下 , 统一敲了一遍 .自从到了现在公司 , 才发现要学的东西太多了 , 当然 , 有个好的 ...
java二次封装_基于OKhttp+Rxjava2+Retrofit进行二次封装
概述基于Retrofit进行二次封装,优雅的初始化设置.基于Okhttp拦截器和基础缓存,封装了无网络和其他所有场景的缓存策略支持,以及频繁调用请求的丢弃策略. 特性 1.基于Retrofit的二次 ...
selenium + python自动化测试unittest框架学习（五）webdriver的二次封装
因为webdriver的api方法很长,再加上大多数的定位方式是以xpath方式定位,更加让代码看起来超级长,为了使整体的代码看起来整洁,对webdriver进行封装,学习资料来源于虫师的<se ...
使用二次封装的openStack发行版本网卡至少有2个
使用二次封装的openStack发行版本网卡至少有2个 posted on 2017-03-16 10:44 秦瑞It行程实录阅读(...) 评论(...) 编辑收藏转载于:https://ww ...

dialog的二次封装

一，使用效果

二,实现代码

1，初步封装

2，对应不同业务的再处理

3，具体项目页面的使用

dialog的二次封装相关推荐

最新文章

热门文章