vue封装共用组件-confirm
先上源码:<template><transition name="mask-bg-fade"><!-- 弹框组件 --><div class="mask" v-show=&a
·
先上源码:
<template>
<transition name="mask-bg-fade">
<!-- 弹框组件 -->
<div class="mask" v-show="show">
<div class="mask_bg"></div>
<transition name="slide-fade">
<div class="modelBox" v-show="show">
<div class="title">
<p>{{confirmModalOptions.title}}</p>
<i class="icon" v-on:click="closeModel()"></i></div>
<div class="message">
<span v-for='(item,index) in confirmModalOptions.message' :key='index'>{{item}}</span>
</div>
<div class="model_btnBox" v-show='confirmModalOptions.btnCancelText != null'>
<button v-on:click="confirmCancel()">
{{confirmModalOptions.btnCancelText}}
</button>
<button v-on:click="confirmSubmit()">
{{confirmModalOptions.btnSubmitText}}
</button>
</div>
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
name:'confirm',
props: ["confirmModalOptions"],
data() {
return {
show: false, // 是否显示模态框
}
},
methods: {
closeModel() {
this.show = false;
},
showModel() {
this.show = true;
},
confirmCancel() {
this.show = false;
if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){
this.confirmModalOptions.btnCancelFunction()
}
},
confirmSubmit() {
this.show = false;
if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){
this.confirmModalOptions.btnSubmitFunction()
}
}
}
}
</script>
<style scoped lang='scss'>
.mask{
.modelBox{ width: 6rem; height: 4rem;margin: auto;background-color: white;position: relative;top: calc(22%);border-radius: .1rem;
}
.title{padding: .1rem;text-align: center;background-color: #F7F8FA;border-top-left-radius: .1rem;border-top-right-radius: .1rem;display: flex;justify-content: center;
p{flex: 1;color: #666;}
}
.message{
padding: .2rem;height: 2.6rem;
span{display: inline-block;padding: .1rem;background-color: #24D08E;width: 1.2rem;margin: .1rem;color: white;text-align: center;border-radius: .1rem;
}
}
.model_btnBox{
text-align: center;
button{ padding: .1rem .6rem;border: none;color: white;border-radius: .1rem; margin: 0 .5rem;
&:nth-child(2){ background-color: #24D08E;
}
}
}
}
</style>
1.整个组件之间的通信是通过 props ,可以是对象可以是数组或者是函数
2.在需要的该组件的页面使用 import DConfirm from ‘../components/confirm.vue’;引入该组件并注册组件;
并且通过 v-bind指令绑定数据
3.在引入的页面采用如下方法:
function abc(){
this.$refs.myConfirm.showModel();
this.confirmOptions= {
type: "warning",
title: "缺考学生",//提示
message:this.locklist,
btnCancelText:'关闭',
btnSubmitText:'提交',
btnCancelFunction:function(){
console.log(333)
},
btnSubmitFunction:function(){
console.log(1111)
}
}
}
更多推荐
已为社区贡献11条内容
所有评论(0)