fs-uni-template/components/fs-popup/fs-popup.vue

<template>
	<view class="fs-popup">
		<view class="fs-popup-drawer" :class="[direction, { show: modelValue }]" :style="[style, customStyle]">
			<slot></slot>
		</view>
		<fs-mask v-if="showMask" :modelValue="modelValue" @close="handleClose" :maskClickable="maskClickable"></fs-mask>
	</view>
</template>

<script>
/**
 * 弹出层组件
 * @description 弹出层组件
 * @property {String} direction = [left | right | top | bottom] 弹出位置
 * @property {Boolean} showMask 是否显示遮罩
 * @property {Boolean} maskClickable 遮罩是否可点击
 * @property {String} width 弹出层宽度(仅direction为left\right有效)
 * @property {String} height 弹出层高度(仅direction为top\bottom有效)
 * @property {Object} customStyle 自定义样式
 */
export default {
	name: 'fs-popup'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	modelValue: Boolean,
	direction: {
		type: String,
		default: 'left',
		validator(value) {
			return ['left', 'right', 'top', 'bottom'].includes(value)
		}
	},
	width: {
		type: String,
		default: '80%'
	},
	height: {
		type: String,
		default: '30%'
	},
	showMask: {
		type: Boolean,
		default: true
	},
	maskClickable: {
		type: Boolean,
		default: true
	},
	customStyle: {
		type: Object,
		default() {
			return {}
		}
	}
})

const style = computed(() => {
	let ret = ''
	if (props.direction === 'left' || props.direction === 'right') {
		ret = `width: ${props.width}`
	} else {
		ret = `height: ${props.height}`
	}
	return ret
})

const emits = defineEmits(['update:modelValue'])

const handleClose = () => {
	emits('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.fs-popup {
	&-drawer {
		position: fixed;
		background-color: #fff;
		z-index: 900;
		transition: all 0.3s;
		overflow: auto;
	}

	.left {
		top: var(--window-top);
		bottom: var(--window-bottom);
		left: 0;
		transform: translateX(-100%);
	}
	.right {
		top: var(--window-top);
		bottom: var(--window-bottom);
		right: 0;
		transform: translateX(100%);
	}
	.top {
		top: var(--window-top);
		right: 0;
		left: 0;
		transform: translateY(-200%);
	}
	.bottom {
		left: 0;
		bottom: var(--window-bottom);
		right: 0;
		transform: translateY(100%);
	}

	.show {
		transform: translateX(0);
	}
}
</style>