@ebiz/designer-components 0.0.18 → 0.0.19

package/src/views/TdesignSelect.vue

@@ -0,0 +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;
+}
+</style> 

package/src/views/TdesignSwiper.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="swiper-demo">
+    <h1>TDesign 轮播框组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>1. 基础轮播</h2>
+      <ebiz-swiper>
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>2. 垂直布局</h2>
+      <ebiz-swiper direction="vertical" :height="200">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>3. 自定义导航器位置</h2>
+      <ebiz-swiper :navigation="{ placement: 'outside' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>4. 分式导航器</h2>
+      <ebiz-swiper :navigation="{ type: 'fraction' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>5. 渐隐模式</h2>
+      <ebiz-swiper animation="fade">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>6. 手动控制</h2>
+      <div class="control-panel">
+        <t-button @click="currentIndex = (currentIndex - 1 + swiperItems.length) % swiperItems.length">上一张</t-button>
+        <t-button @click="currentIndex = (currentIndex + 1) % swiperItems.length">下一张</t-button>
+      </div>
+      <ebiz-swiper v-model:current="currentIndex" :autoplay="false">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>7. 自定义导航器大小</h2>
+      <ebiz-swiper :navigation="{ size: 'large' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { EbizSwiper, EbizSwiperItem } from '../index.js';
+import { Button as TButton } from 'tdesign-vue-next';
+
+export default {
+  name: 'TdesignSwiperDemo',
+  components: {
+    EbizSwiper,
+    EbizSwiperItem,
+    TButton
+  },
+  setup() {
+    const currentIndex = ref(0);
+    
+    const swiperItems = [
+      { label: '1', color: '#0052D9' },
+      { label: '2', color: '#0594FA' },
+      { label: '3', color: '#05A573' },
+      { label: '4', color: '#D54941' },
+      { label: '5', color: '#ED7B2F' },
+      { label: '6', color: '#9B38D3' }
+    ];
+    
+    return {
+      currentIndex,
+      swiperItems
+    };
+  }
+};
+</script>
+
+<style scoped>
+.swiper-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+  border: 1px solid #eaeaea;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+h1 {
+  margin-bottom: 30px;
+  color: #333;
+}
+
+h2 {
+  margin-bottom: 15px;
+  color: #666;
+  font-size: 18px;
+}
+
+.demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: white;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.control-panel {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+</style>