174 lines
4.1 KiB
Vue
174 lines
4.1 KiB
Vue
<!--
|
||
desc: 弹窗组件
|
||
date: 20230719
|
||
参数说明：
|
||
isShowPopup：是否打开弹窗，布尔类型
|
||
isOverlay: 是否显示遮罩
|
||
mode: 弹出方向 String类型 默认：bottom 可选值 top / right / bottom / center
|
||
duration: 遮罩打开或收起的动画过渡时间，单位ms
|
||
closeable: 是否显示关闭图标
|
||
overlayOpacity:遮罩透明度，0-1之间，勿与overlayStyle共用
|
||
closeOnClickOverlay: 点击遮罩是否关闭
|
||
safeAreaInsetTop:是否留出顶部安全距离（状态栏高度）默认false
|
||
closeIconPos：自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
|
||
round: 设置圆角值，仅对mode = top | bottom | center有效
|
||
bgColor:背景色，一般用于特殊弹窗内容场景，设置为transparent可去除默认的白色背景
|
||
zoom:当mode=center时 是否开启缩放
|
||
-->
|
||
<template>
|
||
<view>
|
||
<u-popup
|
||
:show="isShowPopup"
|
||
:overlay="isOverlay"
|
||
:mode="mode"
|
||
:duration="duration"
|
||
:closeable="closeable"
|
||
:overlayOpacity="overlayOpacity"
|
||
:closeOnClickOverlay="closeOnClickOverlay"
|
||
:overlayStyle="{ 'touch-action': 'none' }"
|
||
:safeAreaInsetTop="safeAreaInsetTop"
|
||
:closeIconPos="closeIconPos"
|
||
:round="round"
|
||
bgColor="bgColor"
|
||
:zoom="zoom"
|
||
@close="handleCloseClick"
|
||
@open="handlerPopupOpen"
|
||
>
|
||
<view class="buttom" v-if="buttomBtn">
|
||
<text @click="handleCloseClick" v-if="showCancle">取消</text>
|
||
<text class="title" v-if="showtitle">{{ title }}</text>
|
||
<text @click="handleConfirmClick" v-if="showSubmitBtn">确定</text>
|
||
<slot name="btn" style="width:100%;"></slot>
|
||
</view>
|
||
<view class="scrool" :style="{ height: popuoHeight }">
|
||
<slot></slot>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
isOverlay: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
mode: {
|
||
type: String,
|
||
default: "bottom",
|
||
},
|
||
popuoHeight: {
|
||
type: String,
|
||
default: "800rpx",
|
||
},
|
||
duration: {
|
||
type: [Number, String],
|
||
default: 300,
|
||
},
|
||
closeable: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
overlayOpacity: {
|
||
type: [Number, String],
|
||
default: 0.5,
|
||
},
|
||
closeOnClickOverlay: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
showSubmitBtn: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
showCancle: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
showtitle: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
buttomBtn: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
safeAreaInsetTop: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
closeIconPos: {
|
||
type: String,
|
||
default: "top-right",
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
round: {
|
||
type: [Number, String],
|
||
default: 0,
|
||
},
|
||
bgColor: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
zoom: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
isShowPopup: false,
|
||
};
|
||
},
|
||
methods: {
|
||
// 弹窗关闭时触发的方法
|
||
handlerPopupClose() {
|
||
this.isShowPopup = false;
|
||
},
|
||
// 弹窗打卡触发的方法
|
||
handlerPopupOpen() {
|
||
// this.isShowPopup = true
|
||
},
|
||
handleConfirmClick() {
|
||
this.$emit("handleConfirmClick");
|
||
},
|
||
handleCloseClick() {
|
||
this.isShowPopup = false;
|
||
this.$emit("handleCloseClick");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.buttom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f2f3f4;
|
||
width: 100%;
|
||
view{
|
||
width: 100%;
|
||
}
|
||
|
||
text {
|
||
padding: 20rpx 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
text:last-child {
|
||
color: #3c9cff;
|
||
}
|
||
}
|
||
|
||
.scrool {
|
||
overflow-y: scroll; // 超出滚动
|
||
overscroll-behavior: none; // 禁止滚动溢出
|
||
}
|
||
.title {
|
||
font-weight: bold;
|
||
}
|
||
</style> |