init

2025-12-02 10:37:49 +08:00
commit 1f645dad3e
1183 changed files with 147673 additions and 0 deletions
--- a/src/components/PopoverInput/index.vue
+++ b/src/components/PopoverInput/index.vue
@@ -0,0 +1,128 @@
+<template>
+	<div @mouseenter="inPopover = true" @mouseleave="inPopover = false">
+		<el-popover
+			placement="top"
+			v-model:visible="visible"
+			:width="width"
+			trigger="contextmenu"
+			class="popover-input"
+			:teleported="teleported"
+			:persistent="false"
+			popper-class="!p-0"
+		>
+			<div class="flex p-3" @click.stop="">
+				<div class="popover-input__input mr-[10px] flex-1">
+					<el-select class="flex-1" :size="size" v-if="type == 'select'" v-model="inputValue" :teleported="teleported">
+						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+					</el-select>
+					<el-input
+						v-else
+						v-model.trim="inputValue"
+						:maxlength="maxlength"
+						:show-word-limit="showLimit"
+						:type="type"
+						:size="size"
+						clearable
+						:placeholder="placeholder"
+					/>
+				</div>
+				<div class="flex-none popover-input__btns">
+					<el-button link @click="close">{{ $t('common.cancelButtonText') }}</el-button>
+					<el-button type="primary" :size="size" @click="handleConfirm">{{ $t('common.confirmButtonText') }}</el-button>
+				</div>
+			</div>
+			<template #reference>
+				<div class="inline" @click.stop="handleOpen">
+					<slot></slot>
+				</div>
+			</template>
+		</el-popover>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { useEventListener } from '@vueuse/core';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+	},
+	type: {
+		type: String,
+		default: 'text',
+	},
+	width: {
+		type: [Number, String],
+		default: '300px',
+	},
+	placeholder: String,
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	options: {
+		type: Array as PropType<any[]>,
+		default: () => [],
+	},
+	size: {
+		type: String as PropType<'default' | 'small' | 'large'>,
+		default: 'default',
+	},
+	limit: {
+		type: Number,
+		default: 200,
+	},
+  maxlength: {
+    type: Number,
+    default: 20,
+  },
+	showLimit: {
+		type: Boolean,
+		default: false,
+	},
+	teleported: {
+		type: Boolean,
+		default: true,
+	},
+});
+const emit = defineEmits(['confirm', 'update:modelValue']);
+
+const visible = ref(false);
+const inPopover = ref(false);
+const inputValue = ref();
+const handleConfirm = () => {
+	close();
+	emit('confirm', inputValue.value);
+	emit('update:modelValue', inputValue.value);
+};
+
+const handleOpen = () => {
+	if (props.disabled) {
+		return;
+	}
+	visible.value = true;
+	inputValue.value = '';
+};
+
+const close = () => {
+	visible.value = false;
+};
+
+watch(
+	() => inputValue.value,
+	(value) => {
+		emit('update:modelValue', value);
+	},
+	{
+		immediate: true,
+	}
+);
+
+useEventListener(document.documentElement, 'click', () => {
+	if (inPopover.value) return;
+	close();
+});
+</script>
+
+<style scoped lang="scss"></style>