@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/TabsDemo.vue

@@ -1,283 +1,283 @@
-<template>
-  <div class="tabs-demo">
-    <h1>TDesign Tabs 组件示例</h1>
-
-    <h2>原生TDesign选项卡</h2>
-    <div class="demo-section">
-      <t-tabs :default-value="1">
-        <t-tab-panel :value="1" label="选项卡1">
-          <p style="margin: 20px">选项卡1内容区</p>
-        </t-tab-panel>
-        <t-tab-panel :value="2" label="选项卡2">
-          <p style="margin: 20px">选项卡2内容区</p>
-        </t-tab-panel>
-        <t-tab-panel :value="3" label="选项卡3">
-          <p style="margin: 20px">选项卡3内容区</p>
-        </t-tab-panel>
-      </t-tabs>
-    </div>
-
-    <h2>基础选项卡</h2>
-    <div class="demo-section">
-      <EbizTabs v-model="activeTab">
-        <EbizTabPanel value="first" label="选项卡1">
-          选项卡1内容区
-        </EbizTabPanel>
-        <EbizTabPanel value="second" label="选项卡2">
-          选项卡2内容区
-        </EbizTabPanel>
-        <EbizTabPanel value="third" label="选项卡3">
-          选项卡3内容区
-        </EbizTabPanel>
-      </EbizTabs>
-    </div>
-
-    <h2>不同位置的选项卡</h2>
-    <div class="demo-section">
-      <div class="placement-demo">
-        <h3>顶部选项卡</h3>
-        <EbizTabs placement="top">
-          <EbizTabPanel value="first" label="选项卡1">
-            顶部选项卡内容
-          </EbizTabPanel>
-          <EbizTabPanel value="second" label="选项卡2">
-            顶部选项卡内容
-          </EbizTabPanel>
-        </EbizTabs>
-      </div>
-
-      <div class="placement-demo">
-        <h3>左侧选项卡</h3>
-        <EbizTabs placement="left">
-          <EbizTabPanel value="first" label="选项卡1">
-            左侧选项卡内容
-          </EbizTabPanel>
-          <EbizTabPanel value="second" label="选项卡2">
-            左侧选项卡内容
-          </EbizTabPanel>
-        </EbizTabs>
-      </div>
-
-      <div class="placement-demo">
-        <h3>右侧选项卡</h3>
-        <EbizTabs placement="right">
-          <EbizTabPanel value="first" label="选项卡1">
-            右侧选项卡内容
-          </EbizTabPanel>
-          <EbizTabPanel value="second" label="选项卡2">
-            右侧选项卡内容
-          </EbizTabPanel>
-        </EbizTabs>
-      </div>
-
-      <div class="placement-demo">
-        <h3>底部选项卡</h3>
-        <EbizTabs placement="bottom">
-          <EbizTabPanel value="first" label="选项卡1">
-            底部选项卡内容
-          </EbizTabPanel>
-          <EbizTabPanel value="second" label="选项卡2">
-            底部选项卡内容
-          </EbizTabPanel>
-        </EbizTabs>
-      </div>
-    </div>
-
-    <h2>卡片风格选项卡</h2>
-    <div class="demo-section">
-      <EbizTabs theme="card">
-        <EbizTabPanel value="first" label="选项卡1">
-          卡片风格选项卡内容
-        </EbizTabPanel>
-        <EbizTabPanel value="second" label="选项卡2">
-          卡片风格选项卡内容
-        </EbizTabPanel>
-        <EbizTabPanel value="third" label="选项卡3">
-          卡片风格选项卡内容
-        </EbizTabPanel>
-      </EbizTabs>
-    </div>
-
-    <h2>尺寸大小</h2>
-    <div class="demo-section">
-      <div class="size-demo">
-        <h3>中尺寸(默认)</h3>
-        <EbizTabs size="medium">
-          <EbizTabPanel value="first" label="选项卡1">
-            中尺寸选项卡内容
-          </EbizTabPanel>
-          <EbizTabPanel value="second" label="选项卡2">
-            中尺寸选项卡内容
-          </EbizTabPanel>
-        </EbizTabs>
-      </div>
-
-      <div class="size-demo">
-        <h3>大尺寸</h3>
-        <EbizTabs size="large">
-          <EbizTabPanel value="first" label="选项卡1">
-            大尺寸选项卡内容
-          </EbizTabPanel>
-          <EbizTabPanel value="second" label="选项卡2">
-            大尺寸选项卡内容
-          </EbizTabPanel>
-        </EbizTabs>
-      </div>
-    </div>
-
-    <h2>可增加的选项卡</h2>
-    <div class="demo-section">
-      <EbizTabs v-model="addableActiveTab" addable @add="onAddTab">
-        <EbizTabPanel 
-          v-for="(item, index) in addableTabs" 
-          :key="item.value" 
-          :value="item.value" 
-          :label="item.label"
-          :removable="index !== 0" 
-          @remove="onRemoveTab(item)"
-        >
-          {{ item.content }}
-        </EbizTabPanel>
-      </EbizTabs>
-    </div>
-
-    <h2>可拖拽排序的选项卡</h2>
-    <div class="demo-section">
-      <EbizTabs v-model="dragSortTab" dragSort @dragSort="onDragSort">
-        <EbizTabPanel 
-          v-for="item in dragSortTabs" 
-          :key="item.value" 
-          :value="item.value" 
-          :label="item.label"
-        >
-          {{ item.content }}
-        </EbizTabPanel>
-      </EbizTabs>
-    </div>
-
-    <h2>禁用状态</h2>
-    <div class="demo-section">
-      <EbizTabs>
-        <EbizTabPanel value="first" label="选项卡1">
-          选项卡1内容
-        </EbizTabPanel>
-        <EbizTabPanel value="second" label="选项卡2" disabled>
-          选项卡2内容（禁用状态）
-        </EbizTabPanel>
-        <EbizTabPanel value="third" label="选项卡3">
-          选项卡3内容
-        </EbizTabPanel>
-      </EbizTabs>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { EbizTabs, EbizTabPanel } from '../index.js';
-import { TabPanel } from 'tdesign-vue-next';
-
-// 基础选项卡
-const activeTab = ref('first');
-
-// 可增加选项卡
-const addableTabIndex = ref(3);
-const addableActiveTab = ref('tab0');
-const addableTabs = ref([
-  {
-    value: 'tab0',
-    label: '首页',
-    content: '首页内容'
-  },
-  {
-    value: 'tab1',
-    label: '选项卡1',
-    content: '选项卡1内容'
-  },
-  {
-    value: 'tab2',
-    label: '选项卡2',
-    content: '选项卡2内容'
-  }
-]);
-
-// 可拖拽排序选项卡
-const dragSortTab = ref('drag0');
-const dragSortTabs = ref([
-  {
-    value: 'drag0',
-    label: '选项1',
-    content: '选项1内容'
-  },
-  {
-    value: 'drag1',
-    label: '选项2',
-    content: '选项2内容'
-  },
-  {
-    value: 'drag2',
-    label: '选项3',
-    content: '选项3内容'
-  }
-]);
-
-// 添加选项卡
-const onAddTab = () => {
-  const value = `tab${addableTabIndex.value}`;
-  addableTabs.value.push({
-    value,
-    label: `选项卡${addableTabIndex.value}`,
-    content: `选项卡${addableTabIndex.value}内容`
-  });
-  addableActiveTab.value = value;
-  addableTabIndex.value += 1;
-};
-
-// 删除选项卡
-const onRemoveTab = (item) => {
-  const index = addableTabs.value.findIndex((tab) => tab.value === item.value);
-  if (index !== -1) {
-    addableTabs.value.splice(index, 1);
-  }
-};
-
-// 处理拖拽排序
-const onDragSort = (context) => {
-  // 根据拖拽结果重新排序
-  dragSortTabs.value = context.currentData;
-};
-
-// 检查tdesign-vue-next依赖是否已正确安装
-onMounted(() => {
-  console.log('TabsDemo mounted');
-});
-</script>
-
-<style lang="less" scoped>
-.tabs-demo {
-  padding: 20px;
-  
-  .demo-section {
-    margin-bottom: 30px;
-  }
-  
-  .placement-demo, .size-demo {
-    margin-bottom: 20px;
-  }
-  
-  h1 {
-    font-size: 24px;
-    margin-bottom: 20px;
-  }
-  
-  h2 {
-    font-size: 20px;
-    margin: 30px 0 15px;
-  }
-  
-  h3 {
-    font-size: 16px;
-    margin-bottom: 10px;
-  }
-}
+<template>
+  <div class="tabs-demo">
+    <h1>TDesign Tabs 组件示例</h1>
+
+    <h2>原生TDesign选项卡</h2>
+    <div class="demo-section">
+      <t-tabs :default-value="1">
+        <t-tab-panel :value="1" label="选项卡1">
+          <p style="margin: 20px">选项卡1内容区</p>
+        </t-tab-panel>
+        <t-tab-panel :value="2" label="选项卡2">
+          <p style="margin: 20px">选项卡2内容区</p>
+        </t-tab-panel>
+        <t-tab-panel :value="3" label="选项卡3">
+          <p style="margin: 20px">选项卡3内容区</p>
+        </t-tab-panel>
+      </t-tabs>
+    </div>
+
+    <h2>基础选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs v-model="activeTab">
+        <EbizTabPanel value="first" label="选项卡1">
+          选项卡1内容区
+        </EbizTabPanel>
+        <EbizTabPanel value="second" label="选项卡2">
+          选项卡2内容区
+        </EbizTabPanel>
+        <EbizTabPanel value="third" label="选项卡3">
+          选项卡3内容区
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>不同位置的选项卡</h2>
+    <div class="demo-section">
+      <div class="placement-demo">
+        <h3>顶部选项卡</h3>
+        <EbizTabs placement="top">
+          <EbizTabPanel value="first" label="选项卡1">
+            顶部选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            顶部选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="placement-demo">
+        <h3>左侧选项卡</h3>
+        <EbizTabs placement="left">
+          <EbizTabPanel value="first" label="选项卡1">
+            左侧选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            左侧选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="placement-demo">
+        <h3>右侧选项卡</h3>
+        <EbizTabs placement="right">
+          <EbizTabPanel value="first" label="选项卡1">
+            右侧选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            右侧选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="placement-demo">
+        <h3>底部选项卡</h3>
+        <EbizTabs placement="bottom">
+          <EbizTabPanel value="first" label="选项卡1">
+            底部选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            底部选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+    </div>
+
+    <h2>卡片风格选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs theme="card">
+        <EbizTabPanel value="first" label="选项卡1">
+          卡片风格选项卡内容
+        </EbizTabPanel>
+        <EbizTabPanel value="second" label="选项卡2">
+          卡片风格选项卡内容
+        </EbizTabPanel>
+        <EbizTabPanel value="third" label="选项卡3">
+          卡片风格选项卡内容
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>尺寸大小</h2>
+    <div class="demo-section">
+      <div class="size-demo">
+        <h3>中尺寸(默认)</h3>
+        <EbizTabs size="medium">
+          <EbizTabPanel value="first" label="选项卡1">
+            中尺寸选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            中尺寸选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="size-demo">
+        <h3>大尺寸</h3>
+        <EbizTabs size="large">
+          <EbizTabPanel value="first" label="选项卡1">
+            大尺寸选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            大尺寸选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+    </div>
+
+    <h2>可增加的选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs v-model="addableActiveTab" addable @add="onAddTab">
+        <EbizTabPanel 
+          v-for="(item, index) in addableTabs" 
+          :key="item.value" 
+          :value="item.value" 
+          :label="item.label"
+          :removable="index !== 0" 
+          @remove="onRemoveTab(item)"
+        >
+          {{ item.content }}
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>可拖拽排序的选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs v-model="dragSortTab" dragSort @dragSort="onDragSort">
+        <EbizTabPanel 
+          v-for="item in dragSortTabs" 
+          :key="item.value" 
+          :value="item.value" 
+          :label="item.label"
+        >
+          {{ item.content }}
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>禁用状态</h2>
+    <div class="demo-section">
+      <EbizTabs>
+        <EbizTabPanel value="first" label="选项卡1">
+          选项卡1内容
+        </EbizTabPanel>
+        <EbizTabPanel value="second" label="选项卡2" disabled>
+          选项卡2内容（禁用状态）
+        </EbizTabPanel>
+        <EbizTabPanel value="third" label="选项卡3">
+          选项卡3内容
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { EbizTabs, EbizTabPanel } from '../index.js';
+import { TabPanel } from 'tdesign-vue-next';
+
+// 基础选项卡
+const activeTab = ref('first');
+
+// 可增加选项卡
+const addableTabIndex = ref(3);
+const addableActiveTab = ref('tab0');
+const addableTabs = ref([
+  {
+    value: 'tab0',
+    label: '首页',
+    content: '首页内容'
+  },
+  {
+    value: 'tab1',
+    label: '选项卡1',
+    content: '选项卡1内容'
+  },
+  {
+    value: 'tab2',
+    label: '选项卡2',
+    content: '选项卡2内容'
+  }
+]);
+
+// 可拖拽排序选项卡
+const dragSortTab = ref('drag0');
+const dragSortTabs = ref([
+  {
+    value: 'drag0',
+    label: '选项1',
+    content: '选项1内容'
+  },
+  {
+    value: 'drag1',
+    label: '选项2',
+    content: '选项2内容'
+  },
+  {
+    value: 'drag2',
+    label: '选项3',
+    content: '选项3内容'
+  }
+]);
+
+// 添加选项卡
+const onAddTab = () => {
+  const value = `tab${addableTabIndex.value}`;
+  addableTabs.value.push({
+    value,
+    label: `选项卡${addableTabIndex.value}`,
+    content: `选项卡${addableTabIndex.value}内容`
+  });
+  addableActiveTab.value = value;
+  addableTabIndex.value += 1;
+};
+
+// 删除选项卡
+const onRemoveTab = (item) => {
+  const index = addableTabs.value.findIndex((tab) => tab.value === item.value);
+  if (index !== -1) {
+    addableTabs.value.splice(index, 1);
+  }
+};
+
+// 处理拖拽排序
+const onDragSort = (context) => {
+  // 根据拖拽结果重新排序
+  dragSortTabs.value = context.currentData;
+};
+
+// 检查tdesign-vue-next依赖是否已正确安装
+onMounted(() => {
+  console.log('TabsDemo mounted');
+});
+</script>
+
+<style lang="less" scoped>
+.tabs-demo {
+  padding: 20px;
+  
+  .demo-section {
+    margin-bottom: 30px;
+  }
+  
+  .placement-demo, .size-demo {
+    margin-bottom: 20px;
+  }
+  
+  h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    font-size: 20px;
+    margin: 30px 0 15px;
+  }
+  
+  h3 {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+}
 </style>