81 lines
1.2 KiB
Vue
81 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<view class="dialogBox" v-show="dialogVisible">
|
||
|
|
<view class="mask" @click="hideFn"></view>
|
||
|
|
<view class="dialogContent">
|
||
|
|
<!-- <view class="dialogTitle">
|
||
|
|
<slot name="title"></slot>
|
||
|
|
<text @click="hideFn" style="float: right;">X</text>
|
||
|
|
</view> -->
|
||
|
|
<!-- <view class="dialogInner"> -->
|
||
|
|
<slot name="content"></slot>
|
||
|
|
<!-- </view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
canClickMask:{
|
||
|
|
type:Boolean,
|
||
|
|
default:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialogVisible:false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
showFn(){
|
||
|
|
this.dialogVisible=true
|
||
|
|
},
|
||
|
|
hideFn(){
|
||
|
|
if(this.canClickMask){
|
||
|
|
this.dialogVisible=false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hideFn2(){
|
||
|
|
this.dialogVisible=false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.dialogBox{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
.mask{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background-color: rgba(0,0,0,0.4);
|
||
|
|
}
|
||
|
|
.dialogTitle{
|
||
|
|
padding: 30rpx;
|
||
|
|
}
|
||
|
|
.dialogContent{
|
||
|
|
width: calc(100% - 90px);
|
||
|
|
position: fixed;
|
||
|
|
left: 90rpx;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.dialogInner{
|
||
|
|
padding: 0 30rpx;
|
||
|
|
}
|
||
|
|
</style>
|