vue移動(dòng)端模態(tài)框(可傳參)的實(shí)現(xiàn)
更新時(shí)間：2019年11月20日 15:00:32 作者：那年
這篇文章主要介紹了vue移動(dòng)端模態(tài)框(可傳參)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1-封裝模態(tài)框組件Mydialog (樣式可以自己寫(xiě))
<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>
<!--內(nèi)容區(qū)域-->
<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的值（可選，如果想點(diǎn)擊確認(rèn)之后，進(jìn)行一些處理再?zèng)Q定關(guān)不關(guān)閉，可取消在這里更新visible）
this.$emit('Confirm'); // 傳遞確認(rèn)事件
},
CancelHandler () {
this.$emit('update:visible', false); // 更新visible的值
this.$emit('Cancel'); // 傳遞取消事件
},
close () {
this.visible = false;
}
},
/**
* modal 模態(tài)接口參數(shù)
* @param {string} modal.title 模態(tài)框標(biāo)題
* @param {boolean} modal.showCancelButton 是否顯示取消按鈕
* @param {string} modal.cancelButtonClass 取消按鈕樣式
* @param {string} modal.cancelButtonText 取消按鈕文字
* @param {string} modal.showConfirmButton 是否顯示確定按鈕
* @param {string} modal.confirmButtonClass 確定按鈕樣式
* @param {string} modal.confirmButtonText 確定按鈕標(biāo)文字
*/
computed: {
/**
* 格式化props進(jìn)來(lái)的參數(shù),對(duì)參數(shù)賦予默認(rèn)值
*/
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 { // 使用時(shí)沒(méi)有傳遞參數(shù)
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
頁(yè)面中引入在進(jìn)行調(diào)用
(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入組件
components: {
Mydialog
}
(3 在html中插入組件
<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>
data中的參數(shù)
showDialog: false,
dialogOption: {
text: '歡迎',
cancelButtonText: '否',
confirmButtonText: '是',
isShowCancelButton: ''
},
methods中 在需要出現(xiàn)彈框時(shí)候讓其顯示就好啦
showDialog()
this.dialogOption.text = ` <p>確認(rèn)拒絕？</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
因?yàn)樵陧?xiàng)目中經(jīng)常要使用到，而且每次使用的時(shí)候都要帶上相同的參數(shù)，所以就封裝了一個(gè)js，（模態(tài)框的工具類(lèi)），使用的時(shí)候調(diào)用就好了
1)- 新建一個(gè)js文件dialogUtil，復(fù)制下面的代碼就好了
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 || "請(qǐng)輸入彈框標(biāo)題";
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);
}
//彈框回調(diào)
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：參數(shù)， 類(lèi)型
creatByType(args, type) {
type = !!type ? type : 1;
switch (type) {
case 1:
return new normalDialog(args)
break;
case 2:
break
default:
break;
}
}
}
2) 因?yàn)楹芏囗?yè)面都用到，所以讓他成為全局的（在main中引入就好了），那么別的頁(yè)面使用就不需要引入了
import dbDiaLogUtil from './assets/js/dialogUtil' Vue.prototype.$dbDiaLogUtil = dbDiaLogUtil;
3)在使用的時(shí)候
頁(yè)面中引入組件在進(jìn)行調(diào)用
(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入組件
components: {
Mydialog
}
（3） 在html中插入組件
<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>
在data（）中用對(duì)象的形式
isShowDialog : false,
dialogOption:{text: '',cancelButtonText: '否',confirmButtonText: '確認(rèn)',isShowCancelButton: false},
dialogNormal:null,
在mounted中進(jìn)行初始化
this.dialogNormal = this.$dbDiaLogUtil.creatByType({parent:this,isShowDialog:'isShowDialog',dialogOption:'dialogOption',mydialog:'mydialog'});
最后在需要彈框的地方調(diào)用，一句代碼搞定啦
this.dialogNormal.showDialog('dialog要顯示的內(nèi)容',function(){console.log('成功執(zhí)行的')} , function(){console.log('失敗執(zhí)行的')})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue.js彈出模態(tài)框組件開(kāi)發(fā)的示例代碼
- vue+element 模態(tài)框表格形式的可編輯表單實(shí)現(xiàn)
- 利用vue實(shí)現(xiàn)模態(tài)框組件
- vue+element模態(tài)框中新增模態(tài)框和刪除功能
- vue實(shí)現(xiàn)模態(tài)框的通用寫(xiě)法推薦
- vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗組件
- 詳解如何用VUE寫(xiě)一個(gè)多用模態(tài)框組件模版
- 詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案
- Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
- Vue?dialog模態(tài)框的封裝方法
相關(guān)文章
vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue項(xiàng)目中如何使用Axios封裝http請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何使用Axios封裝http請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案
這篇文章主要介紹了詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù)
這篇文章主要介紹了Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來(lái)的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式，需要的朋友可以參考下2023-03-03
使用vue-cli3+typescript的項(xiàng)目模板創(chuàng)建工程的教程
這篇文章主要介紹了使用vue-cli3+typescript的項(xiàng)目模板創(chuàng)建工程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
這篇文章主要給大家介紹了關(guān)于vue中watch和computed區(qū)別的相關(guān)資料,computed和watch都是vue框架中的用于監(jiān)聽(tīng)數(shù)據(jù)變化的屬性,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11