style: 优化布局和交互（Loading/空状态/骨架屏）

2026-04-07 16:51:12 +08:00
parent f0e89695f4
commit 2f06aa9f5f
15 changed files with 2216 additions and 1681 deletions
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="selector-field-row">
+      <el-input
+        :model-value="displayText"
+        readonly
+        :placeholder="placeholder"
+        style="flex:1"
+      />
+      <el-button
+        type="primary"
+        :disabled="disabled"
+        style="margin-left:8px"
+        @click="$emit('select')"
+      >{{ buttonText }}</el-button>
+      <el-button
+        v-if="clearable && modelValue"
+        style="margin-left:4px"
+        @click="$emit('update:modelValue', null); $emit('clear')"
+      >清除</el-button>
+    </div>
+    <div v-if="hint" :style="{ fontSize: '12px', color: hintType === 'disabled' ? '#c0c4cc' : '#909399', marginTop: '4px' }">
+      {{ hint }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: [Number, String, Object], default: null },
+  displayText: { type: String, default: '' },
+  placeholder: { type: String, default: '请选择' },
+  buttonText: { type: String, default: '选择' },
+  disabled: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  hint: { type: String, default: '' },
+  hintType: { type: String, default: 'normal' }
+})
+
+defineEmits(['select', 'clear', 'update:modelValue'])
+</script>
+
+<style scoped>
+.selector-field-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+</style>