You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.3 KiB
70 lines
1.3 KiB
<template>
|
|
<fui-modal :buttons="[]" :width="width" :show="show" :maskClose="maskClose">
|
|
<!-- 默认内容插槽 -->
|
|
<slot>
|
|
<!-- 默认内容 -->
|
|
</slot>
|
|
|
|
<!-- 按钮插槽 -->
|
|
<view v-if="$slots.buttons" class="button-section">
|
|
<slot name="buttons"></slot>
|
|
</view>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<view v-if="showClose" class="fui-icon__close" @tap="handleClose">
|
|
<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
|
|
</view>
|
|
</fui-modal>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CustomModal',
|
|
props: {
|
|
// 是否显示弹窗
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 弹窗宽度
|
|
width: {
|
|
type: [String, Number],
|
|
default: 600
|
|
},
|
|
// 是否显示关闭按钮
|
|
showClose: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否允许点击遮罩关闭
|
|
maskClose: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理关闭事件
|
|
handleClose() {
|
|
this.$emit('cancel', 'close')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.button-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.fui-icon__close {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
top: 20rpx;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|