vue移动端模态框(可传参)的实现
更新时间：2019年11月20日 15:00:32 作者：那年
这篇文章主要介绍了vue移动端模态框(可传参)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1-封装模态框组件Mydialog (样式可以自己写)
<template>
<transition name="modal" tag="div">
<div class="modal" v-show="visible" transition="fade">
<div class="modal-dialog">
<div class="modal-content">
<!--头部-->
<div class="modal-header">
<slot name="header">
<!-- <p class="title">{{modal.title}}</p> -->
</slot>
<a @click="close(0)" class="xd xd-close" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>
<!--内容区域-->
<div class="modal-body">
<slot name="body">
</slot>
</div>
<!--尾部,操作按钮-->
<div class="modal-footer">
<slot name="footer">
<slot name="button" class="footer">>
<a v-if="modal.showCancelButton" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button" :class="modal.cancelButtonClass" @click="close">{{modal.cancelButtonText}}</a>
<a v-if="modal.showConfirmButton" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button" :class="modal.confirmButtonClass" @click="close()">{{modal.confirmButtonText}}</a>
</slot>
</slot>
</div>
</div>
</div>
</div>
<!-- <div v-show="show" class="modal-backup"></div> -->
</transition>
</template>
<script>
export default {
props: {
visible: { type: Boolean, default: false },
options: {
type: Object,
default: {}
}
},
// 采用v-bind将visible传入
methods: {
ConfirmHandler () {
this.$emit('update:visible', false); // 更新visible的值（可选，如果想点击确认之后，进行一些处理再决定关不关闭，可取消在这里更新visible）
this.$emit('Confirm'); // 传递确认事件
},
CancelHandler () {
this.$emit('update:visible', false); // 更新visible的值
this.$emit('Cancel'); // 传递取消事件
},
close () {
this.visible = false;
}
},
/**
* modal 模态接口参数
* @param {string} modal.title 模态框标题
* @param {boolean} modal.showCancelButton 是否显示取消按钮
* @param {string} modal.cancelButtonClass 取消按钮样式
* @param {string} modal.cancelButtonText 取消按钮文字
* @param {string} modal.showConfirmButton 是否显示确定按钮
* @param {string} modal.confirmButtonClass 确定按钮样式
* @param {string} modal.confirmButtonText 确定按钮标文字
*/
computed: {
/**
* 格式化props进来的参数,对参数赋予默认值
*/
modal () {
let modal = this.options;
if (modal) {
modal = {
title: modal.title || '提示',
showCancelButton: typeof modal.showCancelButton == 'undefined' ? true : modal.showCancelButton,
cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
showConfirmButton: typeof modal.showConfirmButton == 'undefined' ? true : modal.cancelButtonClass,
confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
};
} else { // 使用时没有传递参数
modal = {
title: '提示',
showCancelButton: true,
cancelButtonClass: 'btn-default',
cancelButtonText: '取消',
showConfirmButton: true,
confirmButtonClass: 'btn-active',
confirmButtonText: '确定',
};
}
return modal;
},
},
}
</script>
<style lang="scss" scoped>
.modal-enter-active {
animation: modal-in 0.35s linear;
}
.modal-leave-active {
animation: modal-in 0.35s reverse linear;
}
@keyframes modal-in {
0% {
transform: translateY(-20px) rotateX(-35deg);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateY(0) rotateX(0);
opacity: 1;
}
}
.modal {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
outline: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.8);
}
.modal-dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
width: 608px;
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 24px 7px rgba(0, 0, 0, 0.11);
z-index: 1002;
overflow: hidden;
.modal-content {
> div {
// padding: 0.15rem 0.4rem;
}
.modal-header {
background: url("../assets/images/tournaments/1.png") no-repeat;
background-size: cover;
height: 70px;
img {
width: 100%;
}
}
.modal-body {
// padding: 90px 0 72px 0;
color: #3c3c43;
font-size: 25px;
border-bottom: 1px solid #bdbdbd;
font-weight: 500;
}
.footer {
a {
font-size: 30px;
color: #2c2c2c;
}
}
.modal-footer {
padding: 30px 0 40px 0;
color: #3c3c43;
font-size: 30px;
font-weight: 500;
}
}
}
.modal-backup {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
}
</style>
2-使用方法1
页面中引入在进行调用
(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入组件
components: {
Mydialog
}
(3 在html中插入组件
<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>
data中的参数
showDialog: false,
dialogOption: {
text: '欢迎',
cancelButtonText: '否',
confirmButtonText: '是',
isShowCancelButton: ''
},
methods中 在需要出现弹框时候让其显示就好啦
showDialog()
this.dialogOption.text = ` <p>确认拒绝？</p> `;
this.dialogOption.isShowCancelButton = true
this.showDialog = true;
this.$refs.mydialog.confirm().then(() => {
this.showDialog = false;
this.refuse(id)
}).catch(() => {
this.showDialog = false;
})
},
3.使用方法2
因为在项目中经常要使用到，而且每次使用的时候都要带上相同的参数，所以就封装了一个js，（模态框的工具类），使用的时候调用就好了
1)- 新建一个js文件dialogUtil，复制下面的代码就好了
class normalDialog {
constructor(args) {
// console.log("args",args);
this.parent = args.parent;
this.isShowDialog = args.isShowDialog;
this.dialogOption = this.parent[args.dialogOption];
this.mydialog = this.parent.$refs[args.mydialog];
// console.log("dialogOption=",this.dialogOption);
}
showDialog(text, showCancelButton, success, error) {
console.log("showDialog=="+text);
this.dialogOption.text = text || "请输入弹框标题";
let suc = typeof showCancelButton == "function" ? showCancelButton : success;
let err = typeof showCancelButton == "function" ? success : error;
if (typeof showCancelButton != "function") {
this.dialogOption.isShowCancelButton = !!showCancelButton;
} else {
this.dialogOption.isShowCancelButton = true;
}
this.parent[this.isShowDialog] = true;
this.confirm(suc, err);
}
//弹框回调
confirm(success, error) {
let self = this;
this.mydialog.confirm().then(() => {
typeof success == "function" && success();
self.parent[this.isShowDialog] = false;
}).catch(() => {
typeof error == "function" && error();
self.parent[this.isShowDialog] = false;
})
}
toString() {
// console.log(this.name + " : " + this.age);
}
}
export default {
//args：参数， 类型
creatByType(args, type) {
type = !!type ? type : 1;
switch (type) {
case 1:
return new normalDialog(args)
break;
case 2:
break
default:
break;
}
}
}
2) 因为很多页面都用到，所以让他成为全局的（在main中引入就好了），那么别的页面使用就不需要引入了
import dbDiaLogUtil from './assets/js/dialogUtil' Vue.prototype.$dbDiaLogUtil = dbDiaLogUtil;
3)在使用的时候
页面中引入组件在进行调用
(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入组件
components: {
Mydialog
}
（3） 在html中插入组件
<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>
在data（）中用对象的形式
isShowDialog : false,
dialogOption:{text: '',cancelButtonText: '否',confirmButtonText: '确认',isShowCancelButton: false},
dialogNormal:null,
在mounted中进行初始化
this.dialogNormal = this.$dbDiaLogUtil.creatByType({parent:this,isShowDialog:'isShowDialog',dialogOption:'dialogOption',mydialog:'mydialog'});
最后在需要弹框的地方调用，一句代码搞定啦
this.dialogNormal.showDialog('dialog要显示的内容',function(){console.log('成功执行的')} , function(){console.log('失败执行的')})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
CodeMirror提供了强大的代码编辑功能,而Vue.js使得组件的创建和数据绑定变得非常简单,当用户编辑代码时,实时预览会根据代码的变化进行更新,从而为用户提供了一个交互式的编程环境,这篇文章主要介绍了Vue中如何进行代码编辑器与实时预览,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了在vue项目中使用md5加密的方法,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了基于Vue写一个简单的倒计时按钮功能，在项目开发的过程，经常会遇到发送验证码，点击之后有60秒倒计时的按钮，今天小编就给大家分享实例代码，需要的朋友参考下吧2018-04-04
在Vue3项目中需要频繁使用某一个方法,配置到全局感觉会方便很多,这篇文章主要给大家介绍了关于Vue3使用全局函数或变量的2种常用方式,需要的朋友可以参考下2023-09-09
Vue.js 3 和 Vue.js 2 是两个主要版本的流行前端框架,它们之间有很多区别,包括性能优化、新特性和改进的API等,下面就跟随小编一起来看看他们的使用区别吧2024-01-01
这篇文章主要给大家介绍了关于Vue前端高效开发之列表渲染指令的相关资料,vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了Vue的Scroll滚动事件触发方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能，文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法，感兴趣的朋友跟随脚本之家小编一起学习吧2018-04-04
这篇文章主要介绍了vue3项目中封装axios的示例代码,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
在Vue.js中使用Element UI库时可以通过el-table组件来展示表格数据,并支持列排序,下面这篇文章主要给大家介绍了关于前端使用el-table自带排序功能\后端排序的相关资料,需要的朋友可以参考下2024-08-08
最新评论