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.
107 lines
1.9 KiB
107 lines
1.9 KiB
<template> |
|
<view class="sp-pop"> |
|
<u-popup |
|
:mode="mode" |
|
border-radius="10" |
|
:mask-close-able="false" |
|
v-model="show" |
|
:closeable="!hideClose" |
|
@close="closePop" |
|
> |
|
<view class="pop-content" :style="{width: width}"> |
|
<view class="pop-title" v-if="title">{{ title }}</view> |
|
<!-- <view class="pop-icon" v-if="icon"> |
|
<u-image |
|
:width="iconSize" |
|
mode="widthFix" |
|
:src="`/static/img/betone-sp-component/pop/${icon}.svg`" |
|
></u-image> |
|
</view> --> |
|
<slot></slot> |
|
</view> |
|
</u-popup> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
name: "spPop", |
|
model: { |
|
prop: "value", |
|
event: "changeShow", |
|
}, |
|
props: { |
|
value: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
icon: { |
|
type: String, |
|
default: "", |
|
}, |
|
iconSize: { |
|
type: String | Number, |
|
default: 120, |
|
}, |
|
title: { |
|
type: String, |
|
default: "", |
|
}, |
|
hideClose: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
mode: { |
|
type: String, |
|
default: 'bottom', |
|
}, |
|
width: { |
|
type: String, |
|
default: '', |
|
} |
|
}, |
|
watch: { |
|
value(show) { |
|
this.show = show; |
|
}, |
|
}, |
|
data() { |
|
return { |
|
show: false, |
|
}; |
|
}, |
|
created() { |
|
// this.show = true; |
|
}, |
|
methods: { |
|
closePop() { |
|
this.show = false; |
|
this.$emit("changeShow", false); |
|
this.$emit("close"); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.sp-pop { |
|
.pop-content { |
|
padding: 20rpx 32rpx; |
|
min-height: 300rpx; |
|
box-sizing: border-box; |
|
max-height: 88vh; |
|
.pop-icon { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 48rpx 0; |
|
} |
|
.pop-title { |
|
color: #333; |
|
text-align: center; |
|
font-size: 32rpx; |
|
font-style: normal; |
|
font-weight: 500; |
|
line-height: 1.5; /* 150% */ |
|
} |
|
} |
|
} |
|
</style> |