111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<template>
|
||
<uni-popup ref="popupbase" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
||
<view v-if="visible" class="detail-popup" :style="{
|
||
width: width,
|
||
backgroundColor: bgColor,
|
||
maxHeight: '80vh',
|
||
overflowY: 'auto'
|
||
}">
|
||
<!-- 默认插槽，可以设置弹窗的内容 -->
|
||
<slot></slot>
|
||
|
||
<!-- 关闭按钮 -->
|
||
<view class="close-btn" @click="close" v-if="showClose">
|
||
<image :src="$img1('common/close.png')" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'DetailPopup',
|
||
props: {
|
||
// 自定义弹窗背景色
|
||
bgColor: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
},
|
||
// 自定义弹窗宽度
|
||
width: {
|
||
type: String,
|
||
default: '570rpx'
|
||
},
|
||
// 是否显示关闭按钮
|
||
showClose: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false
|
||
}
|
||
},
|
||
created() {
|
||
// 可以在这里初始化数据
|
||
},
|
||
methods: {
|
||
// 打开弹窗方法
|
||
open() {
|
||
this.visible = true;
|
||
|
||
// 使用nextTick确保DOM更新后再打开弹窗
|
||
this.$nextTick(() => {
|
||
if (this.$refs.popupbase) {
|
||
// 小程序环境下需要额外延迟
|
||
setTimeout(() => {
|
||
this.$refs.popupbase.open();
|
||
}, 50);
|
||
} else {
|
||
console.error('popup ref不存在，请检查组件是否正确挂载');
|
||
// 延迟后再次尝试
|
||
setTimeout(() => {
|
||
if (this.$refs.popupbase) {
|
||
this.$refs.popupbase.open();
|
||
}
|
||
}, 300);
|
||
}
|
||
});
|
||
|
||
// 触发open事件
|
||
this.$emit('open');
|
||
},
|
||
|
||
// 关闭弹窗方法
|
||
close() {
|
||
this.visible = false;
|
||
if (this.$refs.popupbase) {
|
||
this.$refs.popupbase.close();
|
||
}
|
||
|
||
// 触发close事件
|
||
this.$emit('close');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail-popup {
|
||
position: relative;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
// 关闭按钮
|
||
.close-btn {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -80rpx;
|
||
transform: translateX(-50%);
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style> |