init

src/components/Popup/index.vue

@@ -0,0 +1,118 @@
+<template>
+	<div class="dialog">
+		<div class="dialog__trigger" @click="open">
+			<!-- 触发弹窗 -->
+			<slot name="trigger"></slot>
+		</div>
+		<el-dialog
+			v-model="visible"
+			:custom-class="customClass"
+			:center="center"
+			:append-to-body="true"
+			:width="width"
+			:close-on-click-modal="clickModalClose"
+			@closed="close"
+		>
+			<!-- 弹窗内容 -->
+			<template v-if="title" #header>{{ title }}</template>
+
+			<!-- 自定义内容 -->
+			<slot>{{ content }}</slot>
+			<!-- 底部弹窗页脚 -->
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="handleEvent('cancel')">
+						{{ $t('common.cancelButtonText') }}
+					</el-button>
+					<el-button type="primary" @click="handleEvent('confirm')">
+						{{ $t('common.confirmButtonText') }}
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+	props: {
+		title: {
+			// 弹窗标题
+			type: String,
+			default: '',
+		},
+		content: {
+			// 弹窗内容
+			type: String,
+			default: '',
+		},
+		width: {
+			// 弹窗的宽度
+			type: String,
+			default: '400px',
+		},
+		disabled: {
+			// 是否禁用
+			type: Boolean,
+			default: false,
+		},
+		async: {
+			// 是否开启异步关闭
+			type: Boolean,
+			default: false,
+		},
+		clickModalClose: {
+			// 点击遮罩层关闭对话窗口
+			type: Boolean,
+			default: false,
+		},
+		center: {
+			// 是否居中布局
+			type: Boolean,
+			default: false,
+		},
+		customClass: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: ['confirm', 'cancel', 'close', 'open'],
+	setup(props, { emit }) {
+		const visible = ref(false);
+
+		const handleEvent = (type: 'confirm' | 'cancel') => {
+			emit(type);
+			if (!props.async || type === 'cancel') {
+				close();
+			}
+		};
+
+		const close = () => {
+			visible.value = false;
+			nextTick(() => {
+				emit('close');
+			});
+		};
+		const open = () => {
+			if (props.disabled) {
+				return;
+			}
+			emit('open');
+			visible.value = true;
+		};
+		provide('visible', visible);
+		return {
+			visible,
+			handleEvent,
+			close,
+			open,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.dialog-body {
+	white-space: pre-line;
+}
+</style>