yangjl/CNCEC_APP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

看板

Browse Source
This commit is contained in:
杨家亮
2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uview-pro/components/u-popup/types.ts
+56
View File
@@ -0,0 +1,56 @@
import type { ExtractPropTypes, PropType } from 'vue';
import type { PopupCloseIconPos, PopupMode } from '../../types/global';
import { baseProps } from '../common/props';
import zIndex from '../../libs/config/zIndex';
/**
* PopupProps 弹窗 props 类型定义
* @description 弹出层容器，支持多种弹出方向和自定义内容
*/
export const PopupProps = {
...baseProps,
/** 显示状态 */
show: { type: Boolean, default: false },
/** 弹出方向，left|right|top|bottom|center */
mode: { type: String as PropType<PopupMode>, default: 'left' },
/** 是否显示遮罩 */
mask: { type: Boolean, default: true },
/** 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"，或者百分比"50%"，表示由内容撑开高度或者宽度 */
length: { type: [Number, String] as PropType<number | string>, default: 'auto' },
/** 是否开启缩放动画，只在mode=center时有效 */
zoom: { type: Boolean, default: true },
/** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
safeAreaInsetBottom: { type: Boolean, default: false },
/** 是否可以通过点击遮罩进行关闭 */
maskCloseAble: { type: Boolean, default: true },
/** v-model 控制弹窗显示 */
modelValue: { type: Boolean, default: false },
/** 内部参数，解决多层调用报错不能修改props值的问题 */
popup: { type: Boolean, default: true },
/** 圆角 */
borderRadius: { type: [Number, String] as PropType<number | string>, default: 0 },
/** 弹窗z-index */
zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.popup },
/** 是否显示关闭图标 */
closeable: { type: Boolean, default: false },
/** 关闭图标的名称，只能uView的内置图标 */
closeIcon: { type: String, default: 'close' },
/** 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 */
closeIconPos: { type: String as PropType<PopupCloseIconPos>, default: 'top-right' },
/** 关闭图标的颜色 */
closeIconColor: { type: String, default: 'var(--u-tips-color)' },
/** 关闭图标的大小，单位rpx */
closeIconSize: { type: [String, Number] as PropType<number | string>, default: '30' },
/** 弹窗宽度 */
width: { type: String, default: '' },
/** 弹窗高度 */
height: { type: String, default: '' },
/** 负top定位，支持rpx/px/百分比 */
negativeTop: { type: [String, Number] as PropType<number | string>, default: 0 },
/** 遮罩自定义样式 */
maskCustomStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
/** 动画时长，单位ms */
duration: { type: [String, Number] as PropType<number | string>, default: 250 }
};
export type PopupProps = ExtractPropTypes<typeof PopupProps>;
uni_modules/uview-pro/components/u-popup/u-popup.vue
+379
View File
@@ -0,0 +1,379 @@
<template>
<view
v-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';
/**
* popup 弹窗
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
* @tutorial https://uviewpro.cn/zh/components/popup.html
* @property {String} mode 弹出方向（默认left）
* @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>
*/
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的值改变，是发生在内部还是外部
// 根据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 => {
if (val) {
open();
} else if (!closeFromInner.value) {
close();
}
closeFromInner.value = false;
}
);
onMounted(() => {
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() {
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
// 造成@close事件触发两次
closeFromInner.value = true;
change('showDrawer', 'visibleSync', false);
}
/**
* 中部弹出时，点击内容区域关闭弹窗
*/
function modeCenterClose(mode: string) {
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
// 让其只在mode=center时起作用
if (mode != 'center' || !props.maskCloseAble) return;
close();
}
/**
* 打开弹窗
*/
function open() {
change('visibleSync', 'showDrawer', true);
}
/**
* 控制弹窗显示/隐藏的动画和状态
* 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
* 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
*/
function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 'showDrawer', status: boolean) {
// 如果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';
.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>