介绍 & lt; template>
& lt; div v=皊how"类=癿odel-container"比;
& lt; div类=癿odel-main"祝辞
& lt; div类=癿odel-title"在{{标题}}& lt;/div>
& lt; div类=癿odel-content"v-html=癱ontent"祝辞& lt;/div>
& lt; div类=癿odel-buttons"祝辞
& lt;按钮v=癱ancelButton"@click=癱ancelClick"类=癰utton"在{{cancelText}} & lt;/button>
& lt;按钮v=癱onfirmButton"@click=癱onfirmClick"类=鞍磁onfirm"在{{confirmText}} & lt;/button>
& lt;/div>
& lt;/div>
& lt; div v-show=癿ask"类=癿odel-mask"祝辞& lt;/div>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?babel"比;
出口默认{
数据(){
返回{
显示:假的,
面具:没错,
标题:& # 39;提示& # 39;,
内容:& # 39;这是正文& # 39;,
confirmButton:没错,
cancelButton:没错,
confirmText: & # 39;确认& # 39;,
cancelText: & # 39;取消& # 39;,
cancelCallBack:()=比;{},
confirmCallBack:()=比;｛｝
};
},
方法:{
cancelClick () {
这一点。显示=false;
this.cancelCallBack ();
},
confirmClick () {
这一点。显示=false;
this.confirmCallBack ();
}
}
};
& lt;/script>
& lt;风格lang=發ess"scoped>
.model-container {
宽度:100%;
身高:100 vh;
位置:固定;
上图:0;
左:0;
z - index: var (——model-index);
显示:flex;
justify-content:中心;
对齐项目:中心;
.model-main {
位置:相对;
z - index: 9;
宽度:80%;
background - color: # ffffff;
border - radius: 10 px;
溢出:隐藏;
text-align:中心;
.model-title {
字体大小:18 px;
颜色:# 333;
宽度:100%;
填充:18 px;
粗细:大胆的;
溢出:隐藏;
空白:nowrap;}
文本溢出:省略;
}
.model-content {
字体大小:16 px;
颜色:# 666;
填充:10 px;
padding-top: 0 px;
padding-bottom: 20 px;
}
.model-buttons {
宽度:100%;
显示:flex;
对齐项目:中心;
.button {
flex: 1;
填充:18 px 10 px;
溢出:隐藏;
空白:nowrap;}
文本溢出:省略;
字体大小:16 px;
大纲:没有;
background - color: # ffffff;
border-top: 1 px固体# f2f2f2;
边境:1 px固体# f2f2f2;
,确定{
颜色:var(主题);
粗细:大胆的;
}
和:胎{
边境:0;
}
和:主动{
background - color: # f2f2f2;
}
}
}
}
.model-mask {
宽度:100%;
高度:100%;
位置:绝对的;
上图:0;
左:0;
z - index: 1;
background - color: rgba (0, 0, 0, 0.45);
}
}
& lt;/style>
小编给大家分享一vue插下件——仿微信小程序showModel模态提示窗功能的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
效果图:
下面是源码:
索引。js
从& # 39;进口Vue Vue # 39;;
从& # 39;进口模型。/model.vue& # 39;;
出口默认{
安装(Vue) {
const违约={
显示:假的,
面具:没错,
标题:& # 39;提示& # 39;,
内容:& # 39;这是正文& # 39;,
confirmButton:没错,
cancelButton:没错,
confirmText: & # 39;确认& # 39;,
cancelText: & # 39;取消& # 39;,
cancelCallBack:()=比;{},
confirmCallBack:()=比;｛｝
};
const modelVueConstructor=Vue.extend(模型);
Vue.prototype。模型美元=(选项={})=比;{
如果(Vue.prototype。isServer美元)返回;
选择=对象。分配({},违约,选项);
让父母=文档。身体;
让实例=new modelVueConstructor ({
艾尔:document.createElement (& # 39; div # 39;),
数据:选择
});
parent.appendChild(实例。el美元);
返回实例;
};
},
}; 模型。vue
通过添加实例方法,把插件添加到vue.prototype上来实现。
在使用之前需要将插件挂载到Vue全局实例上:
主要。js
从& # 39;进口VueModel。/组件/模型/index.js& # 39;; Vue.use (VueModel);
完成上述条件后,就可以在你的vue项目中使用啦:
