428 lines
13 KiB
Vue
428 lines
13 KiB
Vue
<template>
|
||
<!-- inline 模式：直接渲染内容，不显示为弹窗 -->
|
||
<view v-if="props.mode === 'inline'" class="u-popup-inline" :class="customClass" :style="inlineStyle">
|
||
<slot />
|
||
</view>
|
||
<!-- 弹窗模式 -->
|
||
<view
|
||
v-else-if="visibleSync"
|
||
class="u-drawer"
|
||
:style="$u.toStyle({ zIndex: Number(uZIndex) - 1 }, customStyle)"
|
||
:class="customClass"
|
||
hover-stop-propagation
|
||
>
|
||
<u-mask
|
||
:duration="duration"
|
||
:custom-style="maskCustomStyle"
|
||
:maskClickAble="maskCloseAble"
|
||
:z-index="Number(uZIndex) - 2"
|
||
:show="showDrawer && mask"
|
||
@click="maskClick"
|
||
></u-mask>
|
||
<view
|
||
class="u-drawer-content"
|
||
@tap="modeCenterClose(mode)"
|
||
:class="[
|
||
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
|
||
'u-drawer-' + mode,
|
||
showDrawer ? 'u-drawer-content-visible' : '',
|
||
zoom && mode == 'center' ? 'u-animation-zoom' : ''
|
||
]"
|
||
@touchmove.stop.prevent
|
||
:style="[style]"
|
||
>
|
||
<view
|
||
v-if="mode == 'center'"
|
||
class="u-mode-center-box"
|
||
@tap.stop.prevent
|
||
@touchmove.stop.prevent
|
||
:style="[centerStyle]"
|
||
>
|
||
<view v-if="closeable" @click="close" class="u-close" :class="['u-close--' + closeIconPos]">
|
||
<u-icon :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
|
||
</view>
|
||
|
||
<scroll-view class="u-drawer__scroll-view" :scroll-y="true">
|
||
<slot />
|
||
</scroll-view>
|
||
</view>
|
||
<scroll-view class="u-drawer__scroll-view" :scroll-y="true" v-else>
|
||
<slot />
|
||
</scroll-view>
|
||
<view
|
||
v-if="mode != 'center' && closeable"
|
||
@click="close"
|
||
class="u-close"
|
||
:class="['u-close--' + closeIconPos]"
|
||
>
|
||
<u-icon :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-popup',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onMounted, nextTick } from 'vue';
|
||
import { $u } from '../..';
|
||
import { PopupProps } from './types';
|
||
import uIcon from '../u-icon/u-icon.vue';
|
||
import uMask from '../u-mask/u-mask.vue';
|
||
|
||
/**
|
||
* popup 弹窗
|
||
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
|
||
* @tutorial https://uviewpro.cn/zh/components/popup.html
|
||
* @property {String} mode 弹出方向（默认left），新增 inline 模式可直接插入页面
|
||
* @property {Boolean} mask 是否显示遮罩（默认true）
|
||
* @property {Stringr | Number} length mode=left | 见官网说明（默认auto）
|
||
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
|
||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
|
||
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
|
||
* @property {Object} custom-style 用户自定义样式
|
||
* @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值
|
||
* @property {Numberr | String} border-radius 弹窗圆角值（默认0）
|
||
* @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
|
||
* @property {Boolean} closeable 是否显示关闭图标（默认false）
|
||
* @property {String} close-icon 关闭图标的名称，只能uView的内置图标
|
||
* @property {String} close-icon-pos 自定义关闭图标位置（默认top-right）
|
||
* @property {String} close-icon-color 关闭图标的颜色（默认var(--u-tips-color)）
|
||
* @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30）
|
||
* @event {Function} open 弹出层打开
|
||
* @event {Function} close 弹出层收起
|
||
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
|
||
* @example <u-popup mode="inline"><view>直接插入页面内容</view></u-popup>
|
||
*/
|
||
|
||
const props = defineProps(PopupProps);
|
||
const emit = defineEmits(['update:modelValue', 'open', 'close']);
|
||
|
||
// 组件内部状态
|
||
const visibleSync = ref(false);
|
||
const showDrawer = ref(false);
|
||
const timer = ref<ReturnType<typeof setTimeout> | null>(null);
|
||
const closeFromInner = ref(false); // value的值改变，是发生在内部还是外部
|
||
|
||
// inline 模式的样式
|
||
const inlineStyle = computed(() => {
|
||
let style: Record<string, any> = {};
|
||
if (props.width) style.width = getUnitValue(props.width);
|
||
if (props.height) style.height = getUnitValue(props.height);
|
||
if (props.borderRadius) style.borderRadius = `${props.borderRadius}rpx`;
|
||
// 合并用户自定义样式
|
||
if (props.customStyle) {
|
||
if (typeof props.customStyle === 'string') {
|
||
// 简单处理字符串样式
|
||
style = { ...style };
|
||
} else {
|
||
Object.assign(style, props.customStyle);
|
||
}
|
||
}
|
||
return style;
|
||
});
|
||
|
||
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
|
||
const style = computed(() => {
|
||
let style: Record<string, any> = {};
|
||
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
|
||
if (props.mode == 'left' || props.mode == 'right') {
|
||
style = {
|
||
width: props.width ? getUnitValue(props.width) : getUnitValue(props.length),
|
||
height: '100%',
|
||
transform: `translate3D(${props.mode == 'left' ? '-100%' : '100%'},0px,0px)`
|
||
};
|
||
} else if (props.mode == 'top' || props.mode == 'bottom') {
|
||
style = {
|
||
width: '100%',
|
||
height: props.height ? getUnitValue(props.height) : getUnitValue(props.length),
|
||
transform: `translate3D(0px,${props.mode == 'top' ? '-100%' : '100%'},0px)`
|
||
};
|
||
}
|
||
// 如果用户设置了borderRadius值，添加弹窗的圆角
|
||
style.zIndex = uZIndex.value;
|
||
if (props.borderRadius) {
|
||
switch (props.mode) {
|
||
case 'left':
|
||
style.borderRadius = `0 ${props.borderRadius}rpx ${props.borderRadius}rpx 0`;
|
||
break;
|
||
case 'top':
|
||
style.borderRadius = `0 0 ${props.borderRadius}rpx ${props.borderRadius}rpx`;
|
||
break;
|
||
case 'right':
|
||
style.borderRadius = `${props.borderRadius}rpx 0 0 ${props.borderRadius}rpx`;
|
||
break;
|
||
case 'bottom':
|
||
style.borderRadius = `${props.borderRadius}rpx ${props.borderRadius}rpx 0 0`;
|
||
break;
|
||
default:
|
||
}
|
||
// 不加可能圆角无效
|
||
style.overflow = 'hidden';
|
||
}
|
||
if (props.duration) style.transition = `all ${Number(props.duration) / 1000}s linear`;
|
||
return style;
|
||
});
|
||
|
||
// 中部弹窗的特有样式
|
||
const centerStyle = computed(() => {
|
||
let style: Record<string, any> = {};
|
||
style.width = props.width ? getUnitValue(props.width) : getUnitValue(props.length);
|
||
|
||
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度
|
||
style.height = props.height ? getUnitValue(props.height) : 'auto';
|
||
style.zIndex = uZIndex.value;
|
||
style.marginTop = `-${$u.addUnit(props.negativeTop)}`;
|
||
if (props.borderRadius) {
|
||
style.borderRadius = `${props.borderRadius}rpx`;
|
||
// 不加可能圆角无效
|
||
style.overflow = 'hidden';
|
||
}
|
||
return style;
|
||
});
|
||
|
||
// 计算整理后的z-index值
|
||
const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.popup));
|
||
|
||
watch(
|
||
() => props.modelValue,
|
||
val => {
|
||
// inline 模式下不响应 modelValue 变化
|
||
if (props.mode === 'inline') return;
|
||
if (val) {
|
||
open();
|
||
} else if (!closeFromInner.value) {
|
||
close();
|
||
}
|
||
closeFromInner.value = false;
|
||
}
|
||
);
|
||
|
||
onMounted(() => {
|
||
// inline 模式下不执行弹窗逻辑
|
||
if (props.mode === 'inline') return;
|
||
if (props.modelValue) open();
|
||
});
|
||
|
||
/**
|
||
* 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
|
||
*/
|
||
function getUnitValue(val: string | number) {
|
||
if (/(%|px|rpx|auto)$/.test(String(val))) return val;
|
||
else return val + 'rpx';
|
||
}
|
||
|
||
/**
|
||
* 遮罩被点击
|
||
*/
|
||
function maskClick() {
|
||
close();
|
||
}
|
||
|
||
/**
|
||
* 关闭弹窗
|
||
*/
|
||
function close() {
|
||
// inline 模式下不执行关闭逻辑
|
||
if (props.mode === 'inline') return;
|
||
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
|
||
// 造成@close事件触发两次
|
||
closeFromInner.value = true;
|
||
change('showDrawer', 'visibleSync', false);
|
||
}
|
||
|
||
/**
|
||
* 中部弹出时，点击内容区域关闭弹窗
|
||
*/
|
||
function modeCenterClose(mode: string) {
|
||
// inline 模式下不执行关闭逻辑
|
||
if (props.mode === 'inline') return;
|
||
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
|
||
// 让其只在mode=center时起作用
|
||
if (mode != 'center' || !props.maskCloseAble) return;
|
||
close();
|
||
}
|
||
|
||
/**
|
||
* 打开弹窗
|
||
*/
|
||
function open() {
|
||
// inline 模式下不执行打开逻辑
|
||
if (props.mode === 'inline') return;
|
||
change('visibleSync', 'showDrawer', true);
|
||
}
|
||
|
||
/**
|
||
* 控制弹窗显示/隐藏的动画和状态
|
||
* 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
|
||
* 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
|
||
*/
|
||
function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 'showDrawer', status: boolean) {
|
||
// inline 模式下不执行状态变更
|
||
if (props.mode === 'inline') return;
|
||
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
|
||
if (props.popup === true) {
|
||
emit('update:modelValue', status);
|
||
}
|
||
(param1 === 'showDrawer' ? showDrawer : visibleSync).value = status;
|
||
if (status) {
|
||
// #ifdef H5 || MP
|
||
timer.value = setTimeout(() => {
|
||
(param2 === 'showDrawer' ? showDrawer : visibleSync).value = status;
|
||
emit(status ? 'open' : 'close');
|
||
}, 50);
|
||
// #endif
|
||
// #ifndef H5 || MP
|
||
nextTick(() => {
|
||
(param2 === 'showDrawer' ? showDrawer : visibleSync).value = status;
|
||
emit(status ? 'open' : 'close');
|
||
});
|
||
// #endif
|
||
} else {
|
||
timer.value = setTimeout(() => {
|
||
(param2 === 'showDrawer' ? showDrawer : visibleSync).value = status;
|
||
emit(status ? 'open' : 'close');
|
||
}, Number(props.duration));
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '../../libs/css/style.components.scss';
|
||
|
||
// inline 模式样式
|
||
.u-popup-inline {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
position: relative;
|
||
background-color: var(--u-bg-white);
|
||
}
|
||
|
||
.u-drawer {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.u-drawer-content {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
position: absolute;
|
||
z-index: 1003;
|
||
transition: all 0.25s linear;
|
||
}
|
||
|
||
.u-drawer__scroll-view {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.u-drawer-left {
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: var(--u-bg-white);
|
||
}
|
||
|
||
.u-drawer-right {
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background-color: var(--u-bg-white);
|
||
}
|
||
|
||
.u-drawer-top {
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: var(--u-bg-white);
|
||
}
|
||
|
||
.u-drawer-bottom {
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: var(--u-bg-white);
|
||
}
|
||
|
||
.u-drawer-center {
|
||
@include vue-flex;
|
||
flex-direction: column;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
opacity: 0;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.u-mode-center-box {
|
||
min-width: 100rpx;
|
||
min-height: 100rpx;
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
position: relative;
|
||
background-color: var(--u-bg-white);
|
||
}
|
||
|
||
.u-drawer-content-visible.u-drawer-center {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
.u-animation-zoom {
|
||
transform: scale(1.15);
|
||
}
|
||
|
||
.u-drawer-content-visible {
|
||
transform: translate3D(0px, 0px, 0px) !important;
|
||
}
|
||
|
||
.u-close {
|
||
position: absolute;
|
||
z-index: 3;
|
||
}
|
||
|
||
.u-close--top-left {
|
||
top: 30rpx;
|
||
left: 30rpx;
|
||
}
|
||
|
||
.u-close--top-right {
|
||
top: 30rpx;
|
||
right: 30rpx;
|
||
}
|
||
|
||
.u-close--bottom-left {
|
||
bottom: 30rpx;
|
||
left: 30rpx;
|
||
}
|
||
|
||
.u-close--bottom-right {
|
||
right: 30rpx;
|
||
bottom: 30rpx;
|
||
}
|
||
</style>
|