xx-applets/src/components/widgets/modal.vue

113 lines
2.4 KiB
Vue

<template>
<view class="component-widgets-modal">
<view class="modal-mask" @click="close"></view>
<view class="modal-content" :style="{ width: width }">
<view class="modal-title">
<text class="title">
{{ title }}
</text>
<text class="iconfont icon-guanbi close" v-if="showClose" @click="close"></text>
</view>
<view class="content-box">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: "component-widgets-modal",
data() {
return {};
},
props: {
title: {
type: String,
default: "默认标题",
},
width: {
type: String,
default: "650rpx",
},
showClose: {
type: Boolean,
default: true,
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {
close() {
this.$emit("close");
},
},
};
</script>
<style lang="less" scoped>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.component-widgets-modal {
z-index: 20;
position: fixed;
top: 0;
left: 0;
right: 0;
max-width: 750px;
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s;
.modal-mask {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.2;
}
.modal-content {
z-index: 5;
position: relative;
padding: 30rpx 50rpx;
box-sizing: border-box;
background-color: #fff;
}
.modal-title {
text-align: center;
line-height: 0;
padding-bottom: 15px;
border-bottom: 4rpx solid #e0e0e0;
.title {
font-size: 32rpx;
font-weight: bold;
color: #7286f1;
line-height: 32rpx;
}
.close {
position: absolute;
top: 20rpx;
right: 20rpx;
font-size: 30rpx;
line-height: 30rpx;
}
}
.content-box {
padding-top: 15rpx;
}
}
</style>