小編給大家分享一下vue插件--仿微信小程序showModel模態提示窗功能的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
效果圖：
下面是源碼：
index.js
import Vue from 'vue';
import model from './model.vue';
export default {
install(Vue) {
const defaults = {
show: false,
mask: true,
title: '提示',
content: '這是正文',
confirmButton: true,
cancelButton: true,
confirmText: '確認',
cancelText: '取消',
cancelCallBack: () => {},
confirmCallBack: () => {}
};
const modelVueConstructor = Vue.extend(model);
Vue.prototype.$model = (options = {}) => {
if (Vue.prototype.$isServer) return;
options = Object.assign({}, defaults, options);
let parent = document.body ;
let instance = new modelVueConstructor({
el: document.createElement('div'),
data: options
});
parent.appendChild(instance.$el);
return instance;
};
},
};model.vue
<template>
<div v-if="show" class="model-container">
<div class="model-main">
<div class="model-title">{{title}}</div>
<div class="model-content" v-html="content"></div>
<div class="model-buttons">
<button v-if="cancelButton" @click="cancelClick" class="button">{{cancelText}}</button>
<button v-if="confirmButton" @click="confirmClick" class="button confirm">{{confirmText}}</button>
</div>
</div>
<div v-show="mask" class="model-mask"></div>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
show: false,
mask: true,
title: '提示',
content: '這是正文',
confirmButton: true,
cancelButton: true,
confirmText: '確認',
cancelText: '取消',
cancelCallBack: () => {},
confirmCallBack: () => {}
};
},
methods: {
cancelClick(){
this.show = false;
this.cancelCallBack();
},
confirmClick(){
this.show = false;
this.confirmCallBack();
}
}
};
</script>
<style lang="less" scoped>
.model-container{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: var(--model-index);
display: flex;
justify-content: center;
align-items: center;
.model-main{
position: relative;
z-index: 9;
width: 80%;
background-color: #ffffff;
border-radius: 10px;
overflow: hidden;
text-align: center;
.model-title{
font-size: 18px;
color: #333;
width: 100%;
padding: 18px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.model-content{
font-size: 16px;
color: #666;
padding: 10px;
padding-top: 0px;
padding-bottom: 20px;
}
.model-buttons{
width: 100%;
display: flex;
align-items: center;
.button{
flex: 1;
padding: 18px 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
outline: none;
background-color: #ffffff;
border-top: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
&.confirm{
color: var(--theme);
font-weight: bold;
}
&:last-child{
border-right: 0;
}
&:active{
background-color: #f2f2f2;
}
}
}
}
.model-mask{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,0.45);
}
}
</style>通過添加實例方法，把插件添加到vue.prototype上來實現。
在使用之前需要將插件掛載到Vue全局實例上：
main.js
import VueModel from './components/model/index.js'; Vue.use(VueModel);
完成上述條件后，就可以在你的vue項目中使用啦：
this.$model({
show: true,
title: "提示",
content: "提示內容",
cancelButton: true,
confirmCallBack: () => {
console.log("確認");
},
cancelCallBack: () => {
console.log("取消");
}
});以上是vue插件--仿微信小程序showModel模態提示窗功能的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
