productDev/dmMes.git

			@@ -1,304 +0,0 @@
			<template>
			<view class="u-popup">
			<u-overlay
			:show="show"
			@click="overlayClick"
			v-if="overlay"
			:duration="overlayDuration"
			:customStyle="overlayStyle"
			:opacity="overlayOpacity"
			></u-overlay>
			<u-transition
			:show="show"
			:customStyle="transitionStyle"
			:mode="position"
			:duration="duration"
			@afterEnter="afterEnter"
			@click="clickHandler"
			>
			<view
			class="u-popup__content"
			:style="[contentStyle]"
			@tap.stop="noop"
			>
			<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
			<slot></slot>
			<view
			v-if="closeable"
			@tap.stop="close"
			class="u-popup__content__close"
			:class="['u-popup__content__close--' + closeIconPos]"
			hover-class="u-popup__content__close--hover"
			hover-stay-time="150"
			>
			<u-icon
			name="close"
			color="#909399"
			size="18"
			bold
			></u-icon>
			</view>
			<u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
			</view>
			</u-transition>
			</view>
			</template>

			<script>
			import props from './props.js';

			/**
			* popup 弹窗
			* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
			* @tutorial https://www.uviewui.com/components/popup.html
			* @property {Boolean} show 是否展示弹窗 (默认 false )
			* @property {Boolean} overlay 是否显示遮罩（默认 true ）
			* @property {String} mode 弹出方向（默认 'bottom' ）
			* @property {String \| Number} duration 动画时长，单位ms （默认 300 ）
			* @property {String \| Number} overlayDuration 遮罩层动画时长，单位ms （默认 350 ）
			* @property {Boolean} closeable 是否显示关闭图标（默认 false ）
			* @property {Object \| String} overlayStyle 自定义遮罩的样式
			* @property {String \| Number} overlayOpacity 遮罩透明度，0-1之间（默认 0.5）
			* @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭弹窗（默认 true ）
			* @property {String \| Number} zIndex 层级（默认 10075 ）
			* @property {Boolean} safeAreaInsetBottom 是否为iPhoneX留出底部安全距离（默认 true ）
			* @property {Boolean} safeAreaInsetTop 是否留出顶部安全距离（状态栏高度）（默认 false ）
			* @property {String} closeIconPos 自定义关闭图标位置（默认 'top-right' ）
			* @property {String \| Number} round 圆角值（默认 0）
			* @property {Boolean} zoom 当mode=center时是否开启缩放（默认 true ）
			* @property {Object} customStyle 组件的样式，对象形式
			* @event {Function} open 弹出层打开
			* @event {Function} close 弹出层收起
			* @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
			*/
			export default {
			name: 'u-popup',
			mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
			data() {
			return {
			overlayDuration: this.duration + 50
			}
			},
			watch: {
			show(newValue, oldValue) {
			if (newValue === true) {
			// #ifdef MP-WEIXIN
			const children = this.$children
			this.retryComputedComponentRect(children)
			// #endif
			}
			}
			},
			computed: {
			transitionStyle() {
			const style = {
			zIndex: this.zIndex,
			position: 'fixed',
			display: 'flex',
			}
			style[this.mode] = 0
			if (this.mode === 'left') {
			return uni.$u.deepMerge(style, {
			bottom: 0,
			top: 0,
			})
			} else if (this.mode === 'right') {
			return uni.$u.deepMerge(style, {
			bottom: 0,
			top: 0,
			})
			} else if (this.mode === 'top') {
			return uni.$u.deepMerge(style, {
			left: 0,
			right: 0
			})
			} else if (this.mode === 'bottom') {
			return uni.$u.deepMerge(style, {
			left: 0,
			right: 0,
			})
			} else if (this.mode === 'center') {
			return uni.$u.deepMerge(style, {
			alignItems: 'center',
			'justify-content': 'center',
			top: 0,
			left: 0,
			right: 0,
			bottom: 0
			})
			}
			},
			contentStyle() {
			const style = {}
			// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
			// 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
			const {
			safeAreaInsets
			} = uni.$u.sys()
			if (this.mode !== 'center') {
			style.flex = 1
			}
			// 背景色，一般用于设置为transparent，去除默认的白色背景
			if (this.bgColor) {
			style.backgroundColor = this.bgColor
			}
			if(this.round) {
			const value = uni.$u.addUnit(this.round)
			if(this.mode === 'top') {
			style.borderBottomLeftRadius = value
			style.borderBottomRightRadius = value
			} else if(this.mode === 'bottom') {
			style.borderTopLeftRadius = value
			style.borderTopRightRadius = value
			} else if(this.mode === 'center') {
			style.borderRadius = value
			}
			}
			return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
			},
			position() {
			if (this.mode === 'center') {
			return this.zoom ? 'fade-zoom' : 'fade'
			}
			if (this.mode === 'left') {
			return 'slide-left'
			}
			if (this.mode === 'right') {
			return 'slide-right'
			}
			if (this.mode === 'bottom') {
			return 'slide-up'
			}
			if (this.mode === 'top') {
			return 'slide-down'
			}
			},
			},
			methods: {
			// 点击遮罩
			overlayClick() {
			if (this.closeOnClickOverlay) {
			this.$emit('close')
			}
			},
			close(e) {
			this.$emit('close')
			},
			afterEnter() {
			this.$emit('open')
			},
			clickHandler() {
			// 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
			if(this.mode === 'center') {
			this.overlayClick()
			}
			this.$emit('click')
			},
			// #ifdef MP-WEIXIN
			retryComputedComponentRect(children) {
			// 组件内部需要计算节点的组件
			const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
			'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
			'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
			'u-tabs', 'u-tooltip'
			]
			// 历遍所有的子组件节点
			for (let i = 0; i < children.length; i++) {
			const child = children[i]
			// 拿到子组件的子组件
			const grandChild = child.$children
			// 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
			if (names.includes(child.$options.name) && typeof child?.init === 'function') {
			// 需要进行一定的延时，因为初始化页面需要时间
			uni.$u.sleep(50).then(() => {
			child.init()
			})
			}
			// 如果子组件还有孙组件，进行递归历遍
			if (grandChild.length) {
			this.retryComputedComponentRect(grandChild)
			}
			}
			}
			// #endif
			}
			}
			</script>

			<style lang="scss" scoped>
			@import "../../libs/css/components.scss";
			$u-popup-flex:1 !default;
			$u-popup-content-background-color: #fff !default;

			.u-popup {
			flex: $u-popup-flex;

			&__content {
			background-color: $u-popup-content-background-color;
			position: relative;

			&--round-top {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			}

			&--round-left {
			border-top-left-radius: 0;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 10px;
			}

			&--round-right {
			border-top-left-radius: 10px;
			border-top-right-radius: 0;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 0;
			}

			&--round-bottom {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			}

			&--round-center {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			}

			&__close {
			position: absolute;

			&--hover {
			opacity: 0.4;
			}
			}

			&__close--top-left {
			top: 15px;
			left: 15px;
			}

			&__close--top-right {
			top: 15px;
			right: 15px;
			}

			&__close--bottom-left {
			bottom: 15px;
			left: 15px;
			}

			&__close--bottom-right {
			right: 15px;
			bottom: 15px;
			}
			}
			}
			</style>