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中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡(jiǎn)單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會(huì)根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個(gè)交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了在vue項(xiàng)目中使用md5加密的方法,需要的朋友可以參考下2018-09-09
Vue寫(xiě)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能
這篇文章主要介紹了基于Vue寫(xiě)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能，在項(xiàng)目開(kāi)發(fā)的過(guò)程，經(jīng)常會(huì)遇到發(fā)送驗(yàn)證碼，點(diǎn)擊之后有60秒倒計(jì)時(shí)的按鈕，今天小編就給大家分享實(shí)例代碼，需要的朋友參考下吧2018-04-04
在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺(jué)會(huì)方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下2023-09-09
詳解Vue2和Vue3的區(qū)別以及其鉤子函數(shù)的使用
Vue.js?3?和?Vue.js?2?是兩個(gè)主要版本的流行前端框架,它們之間有很多區(qū)別,包括性能優(yōu)化、新特性和改進(jìn)的API等,下面就跟隨小編一起來(lái)看看他們的使用區(qū)別吧2024-01-01
這篇文章主要給大家介紹了關(guān)于Vue前端高效開(kāi)發(fā)之列表渲染指令的相關(guān)資料,vue.js 使用的是 v-for 指令來(lái)處理組件元素的循環(huán)迭代邏輯,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue的Scroll滾動(dòng)事件觸發(fā)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項(xiàng)目為例給大家介紹了vue項(xiàng)目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
這篇文章主要介紹了vue3項(xiàng)目中封裝axios的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
前端使用el-table自帶排序功能\后端排序方法實(shí)例
在Vue.js中使用Element UI庫(kù)時(shí)可以通過(guò)el-table組件來(lái)展示表格數(shù)據(jù),并支持列排序,下面這篇文章主要給大家介紹了關(guān)于前端使用el-table自帶排序功能\后端排序的相關(guān)資料,需要的朋友可以參考下2024-08-08