站长资源网络编程
vue移动端模态框(可传参)的实现
简介1-封装模态框组件Mydialog (样式可以自己写)
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' "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" "function" "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 "htmlcode">
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('失败执行的')})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：微信小程序实现音乐播放器
下一篇：微信小程序实现上拉加载功能