vue 封装dialog_自己封装dialog组件
在项目中我们常常要求各页面样式统一,所以在使用组件时封装居多
使用方法
import CustomDialog from '@/components/customDialog/index.vue'
// dialogTitle 必传,doConfirm 有提交按钮必传
// 如果内部引用form表单,可为设置通用样式
//
form-item-half 可设置一行两个表单组件展示
half-right 需为一行中的右侧添加,左侧不用添加
-->
:visible.sync="dialogVisible"
:before-close="beforeColse"
:width="width"
:modal="modalBoolean"
:showClose="showClose"
:custom-class="customName"
@close="handleClose"
>
{{cancelButton.text}}
class="confirm-button"
v-show="confirmButton.flag"
:loading="confirming"
@click="handleConfirm"
>{{confirmButton.text}}
export default {
props: {
showClose: {// 控制右上关闭按钮的显示
default: true,
type: Boolean
},
customName: { // 弹窗的类名
type: String,
default () {
return ''
}
},
modalBoolean: { // 控制遮盖层
default: true,
type: Boolean
},
dialogTitle: { // 必传,弹框组件标题
type: String,
required: true
},
defaultButtonGroup: { // 默认显示底部按钮组
default: true,
type: Boolean
},
width: {
type: String,
default: '50%'
},
cancelButton: { // 取消按钮
type: Object,
default () {
return {
flag: true,
text: '取消'
}
}
},
confirmButton: { // 确认按钮
type: Object,
default () {
return {
flag: true,
text: '确认'
}
}
},
beforeCloseFun: [Function, String], // 弹框关闭前回调
doCancel: [Function, String] // 取消按钮事件
},
data () {
return {
dialogVisible: false,
confirming: false
}
},
methods: {
/**
* @description: 控制弹框的显示与隐藏
* @param {Boolean} val true或false
*/
changeDialogStatus (val) {
this.dialogVisible = val
},
/**
* @description: 关闭前的回调,会暂停 Dialog 的关闭
*/
beforeColse () {
if (this.beforeCloseFun && typeof this.beforeCloseFun === 'function') {
this.beforeCloseFun((callStatus) => {
this.changeDialogStatus(callStatus)
})
} else {
this.changeDialogStatus(false)
}
},
/**
* @description: 弹框组件关闭按钮触发事件
*/
handleClose () {
this.changeDialogStatus(false)
},
/**
* @description:取消按钮事件
*/
handleCancel () {
if (this.doCancel && typeof this.doCancel === 'function') {
this.doCancel((callStatus) => {
this.changeDialogStatus(callStatus)
})
} else {
this.changeDialogStatus(false)
}
},
/**
* @description: 确定按钮事件
*/
handleConfirm () {
this.confirming = true
this.$emit('doConfirm', (callStatus) => {
this.changeDialogStatus(callStatus)
this.confirming = false
})
}
}
}
.common-dialog{
.el-dialog{
margin-top: 8vh !important;
padding-left: 12px;
padding-right: 29px;
.el-dialog__header{
height: 58px;
line-height: 58px;
font-size: 17px;
border-bottom: 1px solid #eeeeee;
padding: 0px 0px 0px 10px;
.el-dialog__headerbtn{
top:15px;
}
.el-dialog__close.el-icon.el-icon-close{
font-size: 17px;
font-weight: bold;
}
}
.el-dialog__body{
padding: 16px 20px 0px 12px;
}
.el-dialog__footer{
height: 72px;
line-height: 72px;
padding: 0px;
border-top: 1px solid #eeeeee;
.el-button.el-button--default{
width: 73px;
border-radius: 6px;
&:hover,&:focus{
background-color: #736df1;
color: #ffffff;
}
}
.confirm-button{
background-color: #736df1;
color: #ffffff;
}
.cancel-button{
color: #999999;
}
}
}
}
.refacte-quick-form{
*{
box-sizing: border-box;
}
.el-form-item.is-required{
.el-form-item__label{
&:before{
content: ''
}
&:after{
content: '*';
color: #F56C6C;
position: relative;
bottom: 3px;
left: 3px;
}
}
}
.el-form-item{
margin-bottom: 22px;
}
.el-input__inner{
height: 36px;
width: 888px;
font-size: 13px;
}
.el-textarea__inner{
width: 888px;
}
.el-form-item.form-item-half{
display: inline-block;
.el-input__inner{
width: 361px;
}
}
.el-form-item.form-item-half.half-right{
margin-left: 59px;
}
.el-form-item__label{
width: 105px !important;
text-align: left;
font-size: 14px;
}
.el-form-item__content{
margin-left: 105px !important;
}
}
可加拖动
:w="dw"
:h="dh"
:x="xp"
:y="yp"
:draggable="canDraggable"
:resizable="canResizable"
class-name="my-class"
class-name-active="my-active-class"
:handles="[''tm'',''bm'',''ml'',''mr'']"
>
data () {
return {
dw: 0,
dh: 0,
xp: 0,
yp: 0,
canResizable: false,
canDraggable: false,
isShow: false,
dialogVisible: false,
confirming: false
}
},
calculate () {
const { clientWidth, clientHeight } = document.body
const { width, height } = this.customStyle
const fs = clientWidth / 10
const w = width * fs / 192
const h = height * fs / 192
const x = clientWidth / 2 - w / 2
const y = clientHeight / 2 - h / 2
this.dw = w
this.dh = h
this.xp = x
this.yp = y
}
**
将时间转换成字符串时间**
toLocaleString()
vue 封装dialog_自己封装dialog组件相关推荐
- vue封装自己的组件库 02.封装dialog组件
link: https://blog.csdn.net/weixiaowei_2016/article/details/104702793 四.封装一个element-ui风格的dialog组件 前置 ...
- 解剖vantweapp的dialog组件,论如何封装一个通用性高的组件。
首先我们先从dialog组件的源码开始分析. 先看dialog这个组件的目录: dialog.d.ts(作用大概是区分参数的类型,强类型化) dialog.js(dialog.alert(),clos ...
- Vue回炉重造之封装防刷新考试倒计时组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
- vue组件封装技巧,如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧 当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...
- vue图片上传及压缩组件的封装
vue图片上传及压缩组件的封装 源码地址 使用方法: 先去上面的链接把组件,复制到自己的components文件夹内 1.先下载 cnpm install compressorjs --save-de ...
- dialog组件的封装
1.新建一个Vue文件 关键点: ① :visible.sync="dialogVisible" ② props:['row','value'] ③ watch监听 <tem ...
- vue滑动窗口_vue-floating 浮窗组件、封装基于better-scroll的滑动组件、vue自定义手势指令...
本篇主要是为了介绍和如何使用之前撸的三个vue在移动端常用的组件,现已开源,欢迎大家使用: 一个基于vue的浮窗组件,可在屏幕内自由拖拽,拖拽后的位置即可不变,也可在移动过程中手指释放浮窗横向贴边. ...
- vue项目中element-ui的分页器(组件封装)
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
- 手动封装element-ui里面的button组件
首先我们知道vue里面包含有父子组件 但是你知道如果要进行一个element的手动组件封装 怎么封装吗 1首先第一步 首先我们建立一个组件 最好设置在一个文件目录下比如components 只是一个普 ...
最新文章
- AI+大数据顶级技术盛会开幕在即,6.6折特惠票限时抢购
- 五个指标看BCH,它距离“币圈金本位”还有多远?
- 【转】Asp.net控件开发学习笔记整理篇 - Asp.net客户端状态管理
- (Java)注解和反射
- [ASM C/C++] C语言数组
- CCAI2018丨大会日程发布 聚焦AI展望未来
- php-常量、运算符
- feignclient注解使用_从 Feign 使用注意点到 RESTFUL 接口设计规范
- 计算机入门在线阅读,电脑入门基础教程..doc
- linux tomcat守护_linux下非root用户运行tomcat
- 强一致性和弱一致性的区别
- 怎么把php查询到的值显示到下拉框中_RazorSQL for Mac(数据库工具查询) v8.5.0
- python图像识别数字_使用python和tensorflow从Image中识别数字
- Guava LoadingCache用法
- 执行引擎(Execution Engine)总结
- 台风怎么看内存颗粒_内存应该怎么选?看完你就知道了。影驰 星曜 DDR4-3000 8G 内存测评(RGB真的强)...
- 9700usb网卡 linux驱动,0fe6:9700 usb网卡,终于编译成功驱动。
- linux驱动数码管-基于74HC164D
- 《数字经济全景白皮书》中国商业银行普惠金融可持续发展能力评价2022
- OpenGL LookAt函数理解
热门文章
- Go安装swagger:swagger的安装与使用
- PHP上传方式base64图片的接收方式
- Yii的where中的in写法
- matlab遗传算法m文件,matlab上安装遗传算法工具箱
- 如果java使用什么声明类_如果声明一个类时使用abstract修饰符,则表明该类是()_学小易找答案...
- 线性代数可以速成吗_英语真的可以速成吗?
- 运行java程序时找不到_基本Java运行时程序找不到python
- 需求调研计划_干货!如何做好一个BI项目的规划和需求定义?
- python下的所有文件_python批量复制文件夹下所有文件大小
- kafka配置_Kafka生产环境的几个重要配置参数