@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/TdesignSelect.vue

@@ -1,474 +1,474 @@
-<template>
-  <div class="tdesign-select-demo">
-    <h2>TDesign 选择器示例</h2>
-    
-    <div class="section">
-      <h3>基础选择器</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value1"
-          placeholder="请选择"
-          :options="baseOptions"
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>多选选择器</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value2"
-          placeholder="请选择多项"
-          :options="baseOptions"
-          multiple
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>可搜索选择器</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value3"
-          placeholder="请输入搜索"
-          :options="baseOptions"
-          filterable
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>带标签的选择器</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="valueWithLabel"
-          label="选择器："
-          placeholder="带标签的选择器"
-          :options="baseOptions"
-          clearable
-        />
-      </div>
-    </div>
-
-    <div class="section">
-      <h3>自定义键名选择器</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="valueWithKeys"
-          placeholder="自定义键名选择器"
-          :options="customKeyOptions"
-          :keys="{label: 'text', value: 'id'}"
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>尺寸变体</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value4Small" 
-          placeholder="小尺寸" 
-          :options="baseOptions" 
-          size="small" 
-          clearable
-        />
-        <ebiz-tdesign-select 
-          v-model="value4Medium" 
-          placeholder="中尺寸" 
-          :options="baseOptions" 
-          size="medium" 
-          clearable
-        />
-        <ebiz-tdesign-select 
-          v-model="value4Large" 
-          placeholder="大尺寸" 
-          :options="baseOptions" 
-          size="large" 
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>无边框选择器</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value5"
-          placeholder="无边框样式"
-          :options="baseOptions"
-          borderless
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>状态变体</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value6Success" 
-          placeholder="成功状态" 
-          :options="baseOptions" 
-          status="success" 
-          tips="成功的提示信息"
-          clearable
-        />
-        <ebiz-tdesign-select 
-          v-model="value6Warning" 
-          placeholder="警告状态" 
-          :options="baseOptions" 
-          status="warning" 
-          tips="警告的提示信息"
-          clearable
-        />
-        <ebiz-tdesign-select 
-          v-model="value6Error" 
-          placeholder="错误状态" 
-          :options="baseOptions" 
-          status="error" 
-          tips="错误的提示信息"
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>特殊状态</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value7Disabled" 
-          placeholder="禁用状态" 
-          :options="baseOptions" 
-          disabled 
-        />
-        <ebiz-tdesign-select 
-          v-model="value7Loading" 
-          placeholder="加载状态" 
-          :options="baseOptions" 
-          loading 
-          loadingText="加载中..." 
-        />
-        <ebiz-tdesign-select 
-          v-model="value7Readonly" 
-          placeholder="只读状态" 
-          :options="baseOptions" 
-          readonly 
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>自适应宽度</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value8"
-          placeholder="宽度自适应"
-          :options="baseOptions"
-          autoWidth
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>可创建选项</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value9"
-          placeholder="输入创建新选项"
-          :options="baseOptions"
-          creatable
-          filterable
-          clearable
-          @create="handleCreate"
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>多选折叠显示</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="valueCollapsed"
-          placeholder="多选折叠显示"
-          :options="moreOptions"
-          multiple
-          :minCollapsedNum="2"
-          clearable
-          :collapsedItems="({ collapsedSelectedItems }) => `+${collapsedSelectedItems.length}`"
-        />
-      </div>
-    </div>
-
-    <div class="section">
-      <h3>虚拟滚动</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="valueWithScroll"
-          placeholder="虚拟滚动（大数据量）"
-          :options="largeDataOptions"
-          :scroll="{ type: 'virtual', threshold: 100 }"
-          clearable
-          @scroll="handleVirtualScroll"
-        />
-      </div>
-    </div>
-
-    <div class="section">
-      <h3>带前缀图标</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="valueWithIcon"
-          placeholder="带图标的选择器"
-          :options="baseOptions"
-          prefixIcon="search"
-          clearable
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>事件处理</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="value10" 
-          placeholder="包含多种事件" 
-          :options="baseOptions" 
-          clearable
-          @change="handleChange"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @clear="handleClear"
-          @keydown="handleKeydown"
-          @mouseenter="handleMouseEnter"
-          @mouseleave="handleMouseLeave"
-        />
-      </div>
-      <div class="event-log">
-        <p>事件日志：</p>
-        <div v-for="(log, index) in eventLogs" :key="index">
-          {{ log }}
-        </div>
-      </div>
-    </div>
-
-    <div class="section">
-      <h3>自定义选项面板</h3>
-      <div class="select-row">
-        <ebiz-tdesign-select 
-          v-model="valueWithPanel"
-          placeholder="带自定义面板的选择器"
-          :options="baseOptions"
-          clearable
-        >
-          <template #panelTopContent>
-            <div class="custom-panel-header">自定义面板顶部内容</div>
-          </template>
-          <template #panelBottomContent>
-            <div class="custom-panel-footer">自定义面板底部内容</div>
-          </template>
-        </ebiz-tdesign-select>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { EbizTdesignSelect } from '../index.js'
-
-export default {
-  name: 'TdesignSelectDemo',
-  components: {
-    EbizTdesignSelect
-  },
-  data() {
-    return {
-      // 基础选项数据
-      baseOptions: [
-        { label: '选项一', value: '1' },
-        { label: '选项二', value: '2' },
-        { label: '选项三', value: '3' },
-        { label: '选项四', value: '4' },
-        { label: '选项五', value: '5' }
-      ],
-      
-      // 自定义键名选项数据
-      customKeyOptions: [
-        { text: '自定义选项一', id: '101' },
-        { text: '自定义选项二', id: '102' },
-        { text: '自定义选项三', id: '103' }
-      ],
-
-      // 多项选项数据
-      moreOptions: Array.from({ length: 20 }).map((_, index) => ({
-        label: `选项 ${index + 1}`,
-        value: `${index + 1}`
-      })),
-      
-      // 各种示例的选中值
-      value1: '',
-      value2: [],
-      value3: '',
-      value4Small: '',
-      value4Medium: '',
-      value4Large: '',
-      value5: '',
-      value6Success: '',
-      value6Warning: '',
-      value6Error: '',
-      value7Disabled: '',
-      value7Loading: '',
-      value7Readonly: '1',
-      value8: '',
-      value9: '',
-      value10: '',
-      valueWithLabel: '',
-      valueWithKeys: '',
-      valueCollapsed: [],
-      valueWithPanel: '',
-      valueWithIcon: '',
-      valueWithScroll: '',
-      
-      // 事件日志
-      eventLogs: [],
-
-      // 大数据选项
-      largeDataOptions: Array.from({ length: 5000 }).map((_, index) => ({
-        label: `大数据选项 ${index + 1}`,
-        value: `large-${index + 1}`
-      }))
-    }
-  },
-  methods: {
-    // 创建新选项
-    handleCreate(value) {
-      this.baseOptions.push({
-        label: value,
-        value: `new-${this.baseOptions.length + 1}`
-      });
-      this.addEventLog(`创建了新选项: ${value}`);
-    },
-    
-    // 选中值变化
-    handleChange(value, context) {
-      this.addEventLog(`选中值变化: ${value}`);
-    },
-    
-    // 获得焦点
-    handleFocus(context) {
-      this.addEventLog('选择器获得焦点');
-    },
-    
-    // 失去焦点
-    handleBlur(value, context) {
-      this.addEventLog('选择器失去焦点');
-    },
-    
-    // 清空选项
-    handleClear(context) {
-      this.addEventLog('选择器被清空');
-    },
-
-    // 键盘按下
-    handleKeydown(value, context) {
-      this.addEventLog(`键盘按下: ${value.key}`);
-    },
-
-    // 鼠标进入
-    handleMouseEnter(context) {
-      this.addEventLog('鼠标进入选择器');
-    },
-
-    // 鼠标离开
-    handleMouseLeave(context) {
-      this.addEventLog('鼠标离开选择器');
-    },
-
-    // 虚拟滚动事件
-    handleVirtualScroll({ scrollTop, scrollBottom }) {
-      this.addEventLog(`滚动位置: 顶部${scrollTop}px, 底部${scrollBottom}px`);
-    },
-    
-    // 添加事件日志
-    addEventLog(log) {
-      const now = new Date();
-      const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
-      this.eventLogs.unshift(`[${time}] ${log}`);
-      
-      // 只保留最近10条日志
-      if (this.eventLogs.length > 10) {
-        this.eventLogs = this.eventLogs.slice(0, 10);
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tdesign-select-demo {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.section {
-  margin-bottom: 30px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 20px;
-}
-
-h2 {
-  margin-bottom: 20px;
-  font-size: 24px;
-  color: #0052d9;
-}
-
-h3 {
-  margin-bottom: 12px;
-  font-size: 18px;
-  color: #333;
-}
-
-.select-row {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.event-log {
-  margin-top: 16px;
-  background-color: #f5f5f5;
-  padding: 12px;
-  border-radius: 6px;
-  max-height: 200px;
-  overflow-y: auto;
-  font-family: monospace;
-  font-size: 14px;
-}
-
-.event-log p {
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.custom-panel-header,
-.custom-panel-footer {
-  padding: 8px 12px;
-  background-color: #f0f5ff;
-  color: #0052d9;
-  text-align: center;
-  border-radius: 3px;
-  margin: 4px 0;
-}
-
-.custom-panel-footer {
-  background-color: #f5f5f5;
-  color: #666;
-}
+<template>
+  <div class="tdesign-select-demo">
+    <h2>TDesign 选择器示例</h2>
+    
+    <div class="section">
+      <h3>基础选择器</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value1"
+          placeholder="请选择"
+          :options="baseOptions"
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>多选选择器</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value2"
+          placeholder="请选择多项"
+          :options="baseOptions"
+          multiple
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>可搜索选择器</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value3"
+          placeholder="请输入搜索"
+          :options="baseOptions"
+          filterable
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带标签的选择器</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="valueWithLabel"
+          label="选择器："
+          placeholder="带标签的选择器"
+          :options="baseOptions"
+          clearable
+        />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>自定义键名选择器</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="valueWithKeys"
+          placeholder="自定义键名选择器"
+          :options="customKeyOptions"
+          :keys="{label: 'text', value: 'id'}"
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>尺寸变体</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value4Small" 
+          placeholder="小尺寸" 
+          :options="baseOptions" 
+          size="small" 
+          clearable
+        />
+        <ebiz-tdesign-select 
+          v-model="value4Medium" 
+          placeholder="中尺寸" 
+          :options="baseOptions" 
+          size="medium" 
+          clearable
+        />
+        <ebiz-tdesign-select 
+          v-model="value4Large" 
+          placeholder="大尺寸" 
+          :options="baseOptions" 
+          size="large" 
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>无边框选择器</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value5"
+          placeholder="无边框样式"
+          :options="baseOptions"
+          borderless
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>状态变体</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value6Success" 
+          placeholder="成功状态" 
+          :options="baseOptions" 
+          status="success" 
+          tips="成功的提示信息"
+          clearable
+        />
+        <ebiz-tdesign-select 
+          v-model="value6Warning" 
+          placeholder="警告状态" 
+          :options="baseOptions" 
+          status="warning" 
+          tips="警告的提示信息"
+          clearable
+        />
+        <ebiz-tdesign-select 
+          v-model="value6Error" 
+          placeholder="错误状态" 
+          :options="baseOptions" 
+          status="error" 
+          tips="错误的提示信息"
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>特殊状态</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value7Disabled" 
+          placeholder="禁用状态" 
+          :options="baseOptions" 
+          disabled 
+        />
+        <ebiz-tdesign-select 
+          v-model="value7Loading" 
+          placeholder="加载状态" 
+          :options="baseOptions" 
+          loading 
+          loadingText="加载中..." 
+        />
+        <ebiz-tdesign-select 
+          v-model="value7Readonly" 
+          placeholder="只读状态" 
+          :options="baseOptions" 
+          readonly 
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>自适应宽度</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value8"
+          placeholder="宽度自适应"
+          :options="baseOptions"
+          autoWidth
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>可创建选项</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value9"
+          placeholder="输入创建新选项"
+          :options="baseOptions"
+          creatable
+          filterable
+          clearable
+          @create="handleCreate"
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>多选折叠显示</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="valueCollapsed"
+          placeholder="多选折叠显示"
+          :options="moreOptions"
+          multiple
+          :minCollapsedNum="2"
+          clearable
+          :collapsedItems="({ collapsedSelectedItems }) => `+${collapsedSelectedItems.length}`"
+        />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>虚拟滚动</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="valueWithScroll"
+          placeholder="虚拟滚动（大数据量）"
+          :options="largeDataOptions"
+          :scroll="{ type: 'virtual', threshold: 100 }"
+          clearable
+          @scroll="handleVirtualScroll"
+        />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>带前缀图标</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="valueWithIcon"
+          placeholder="带图标的选择器"
+          :options="baseOptions"
+          prefixIcon="search"
+          clearable
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>事件处理</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="value10" 
+          placeholder="包含多种事件" 
+          :options="baseOptions" 
+          clearable
+          @change="handleChange"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @clear="handleClear"
+          @keydown="handleKeydown"
+          @mouseenter="handleMouseEnter"
+          @mouseleave="handleMouseLeave"
+        />
+      </div>
+      <div class="event-log">
+        <p>事件日志：</p>
+        <div v-for="(log, index) in eventLogs" :key="index">
+          {{ log }}
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>自定义选项面板</h3>
+      <div class="select-row">
+        <ebiz-tdesign-select 
+          v-model="valueWithPanel"
+          placeholder="带自定义面板的选择器"
+          :options="baseOptions"
+          clearable
+        >
+          <template #panelTopContent>
+            <div class="custom-panel-header">自定义面板顶部内容</div>
+          </template>
+          <template #panelBottomContent>
+            <div class="custom-panel-footer">自定义面板底部内容</div>
+          </template>
+        </ebiz-tdesign-select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignSelect } from '../index.js'
+
+export default {
+  name: 'TdesignSelectDemo',
+  components: {
+    EbizTdesignSelect
+  },
+  data() {
+    return {
+      // 基础选项数据
+      baseOptions: [
+        { label: '选项一', value: '1' },
+        { label: '选项二', value: '2' },
+        { label: '选项三', value: '3' },
+        { label: '选项四', value: '4' },
+        { label: '选项五', value: '5' }
+      ],
+      
+      // 自定义键名选项数据
+      customKeyOptions: [
+        { text: '自定义选项一', id: '101' },
+        { text: '自定义选项二', id: '102' },
+        { text: '自定义选项三', id: '103' }
+      ],
+
+      // 多项选项数据
+      moreOptions: Array.from({ length: 20 }).map((_, index) => ({
+        label: `选项 ${index + 1}`,
+        value: `${index + 1}`
+      })),
+      
+      // 各种示例的选中值
+      value1: '',
+      value2: [],
+      value3: '',
+      value4Small: '',
+      value4Medium: '',
+      value4Large: '',
+      value5: '',
+      value6Success: '',
+      value6Warning: '',
+      value6Error: '',
+      value7Disabled: '',
+      value7Loading: '',
+      value7Readonly: '1',
+      value8: '',
+      value9: '',
+      value10: '',
+      valueWithLabel: '',
+      valueWithKeys: '',
+      valueCollapsed: [],
+      valueWithPanel: '',
+      valueWithIcon: '',
+      valueWithScroll: '',
+      
+      // 事件日志
+      eventLogs: [],
+
+      // 大数据选项
+      largeDataOptions: Array.from({ length: 5000 }).map((_, index) => ({
+        label: `大数据选项 ${index + 1}`,
+        value: `large-${index + 1}`
+      }))
+    }
+  },
+  methods: {
+    // 创建新选项
+    handleCreate(value) {
+      this.baseOptions.push({
+        label: value,
+        value: `new-${this.baseOptions.length + 1}`
+      });
+      this.addEventLog(`创建了新选项: ${value}`);
+    },
+    
+    // 选中值变化
+    handleChange(value, context) {
+      this.addEventLog(`选中值变化: ${value}`);
+    },
+    
+    // 获得焦点
+    handleFocus(context) {
+      this.addEventLog('选择器获得焦点');
+    },
+    
+    // 失去焦点
+    handleBlur(value, context) {
+      this.addEventLog('选择器失去焦点');
+    },
+    
+    // 清空选项
+    handleClear(context) {
+      this.addEventLog('选择器被清空');
+    },
+
+    // 键盘按下
+    handleKeydown(value, context) {
+      this.addEventLog(`键盘按下: ${value.key}`);
+    },
+
+    // 鼠标进入
+    handleMouseEnter(context) {
+      this.addEventLog('鼠标进入选择器');
+    },
+
+    // 鼠标离开
+    handleMouseLeave(context) {
+      this.addEventLog('鼠标离开选择器');
+    },
+
+    // 虚拟滚动事件
+    handleVirtualScroll({ scrollTop, scrollBottom }) {
+      this.addEventLog(`滚动位置: 顶部${scrollTop}px, 底部${scrollBottom}px`);
+    },
+    
+    // 添加事件日志
+    addEventLog(log) {
+      const now = new Date();
+      const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
+      this.eventLogs.unshift(`[${time}] ${log}`);
+      
+      // 只保留最近10条日志
+      if (this.eventLogs.length > 10) {
+        this.eventLogs = this.eventLogs.slice(0, 10);
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-select-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+.select-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.event-log {
+  margin-top: 16px;
+  background-color: #f5f5f5;
+  padding: 12px;
+  border-radius: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.event-log p {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.custom-panel-header,
+.custom-panel-footer {
+  padding: 8px 12px;
+  background-color: #f0f5ff;
+  color: #0052d9;
+  text-align: center;
+  border-radius: 3px;
+  margin: 4px 0;
+}
+
+.custom-panel-footer {
+  background-color: #f5f5f5;
+  color: #666;
+}
 </style>