@ebiz/designer-components 0.1.2 → 0.1.5

package/src/views/TdesignCollapse.vue

@@ -1,294 +1,294 @@
-<template>
-  <div class="demo-container">
-    <h1>TDesign 折叠面板组件示例</h1>
-
-    <div class="section">
-      <h2>基础折叠面板</h2>
-      <TdesignCollapse v-model="activeValues1">
-        <TdesignCollapsePanel value="1" header="这是一个折叠标题">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="设置默认展开项">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="3" header="自定义折叠面板内容">
-          <div class="custom-content">
-            <p>这是自定义内容区域，可以包含任何元素。</p>
-            <div class="custom-buttons">
-              <t-button theme="primary" size="small">按钮 1</t-button>
-              <t-button theme="default" size="small">按钮 2</t-button>
-            </div>
-          </div>
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-      <div class="value-display">当前展开项: {{ JSON.stringify(activeValues1) }}</div>
-    </div>
-
-    <div class="section">
-      <h2>手风琴模式</h2>
-      <TdesignCollapse v-model="activeValues2" expand-mutex>
-        <TdesignCollapsePanel value="1" header="这是一个折叠标题">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="这是一个折叠标题">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="3" header="这是一个折叠标题">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-      <div class="value-display">当前展开项: {{ JSON.stringify(activeValues2) }}</div>
-    </div>
-
-    <div class="section">
-      <h2>自定义图标位置</h2>
-      <TdesignCollapse v-model="activeValues3" expand-icon-placement="right">
-        <TdesignCollapsePanel value="1" header="左侧标题，右侧图标">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="左侧标题，右侧图标">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-    </div>
-
-    <div class="section">
-      <h2>无边框模式</h2>
-      <TdesignCollapse v-model="activeValues4" borderless>
-        <TdesignCollapsePanel value="1" header="无边框模式标题">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="无边框模式标题">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-    </div>
-
-    <div class="section">
-      <h2>默认展开全部</h2>
-      <TdesignCollapse v-model="activeValues8" default-expand-all>
-        <TdesignCollapsePanel value="1" header="默认展开面板1">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="默认展开面板2">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="3" header="默认展开面板3">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-    </div>
-
-    <div class="section">
-      <h2>嵌套折叠面板</h2>
-      <TdesignCollapse v-model="activeValues5">
-        <TdesignCollapsePanel value="1" header="父级折叠面板">
-          <TdesignCollapse v-model="nestedValues">
-            <TdesignCollapsePanel value="1-1" header="嵌套面板1">
-              这是嵌套面板1的内容
-            </TdesignCollapsePanel>
-            <TdesignCollapsePanel value="1-2" header="嵌套面板2">
-              这是嵌套面板2的内容
-            </TdesignCollapsePanel>
-          </TdesignCollapse>
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-    </div>
-
-    <div class="section">
-      <h2>禁用状态</h2>
-      <TdesignCollapse v-model="activeValues6">
-        <TdesignCollapsePanel value="1" header="可展开面板">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="禁用的面板" disabled>
-          这部分内容不会被展开，因为面板已禁用。
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-    </div>
-
-    <div class="section">
-      <h2>销毁折叠内容</h2>
-      <TdesignCollapse v-model="activeValues9">
-        <TdesignCollapsePanel value="1" header="不销毁内容的面板">
-          <div class="custom-content">
-            <p>关闭后不会销毁内容，状态会保留</p>
-            <t-input v-model="inputValue1" placeholder="输入内容会被保留" />
-          </div>
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="销毁内容的面板" destroy-on-collapse>
-          <div class="custom-content">
-            <p>关闭后会销毁内容，状态不会保留</p>
-            <t-input v-model="inputValue2" placeholder="输入内容会被销毁" />
-          </div>
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-    </div>
-
-    <div class="section">
-      <h2>自定义右侧内容</h2>
-      <TdesignCollapse v-model="activeValues7">
-        <TdesignCollapsePanel value="1" header="带有右侧内容的面板">
-          <template #rightContent>
-            <div class="right-content">
-              <t-tag theme="primary">标签</t-tag>
-              <t-button theme="default" size="small" variant="text">操作</t-button>
-            </div>
-          </template>
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-    </div>
-
-    <div class="section">
-      <h2>受控用法示例</h2>
-      <div class="control-buttons">
-        <t-button @click="handleExpandAll">展开全部</t-button>
-        <t-button @click="handleCollapseAll">收起全部</t-button>
-        <t-button @click="handleToggleFirst">切换第一个</t-button>
-      </div>
-      <TdesignCollapse v-model="controlledValues" @change="handleControlledChange">
-        <TdesignCollapsePanel value="1" header="受控面板1">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="2" header="受控面板2">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-        <TdesignCollapsePanel value="3" header="受控面板3">
-          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
-        </TdesignCollapsePanel>
-      </TdesignCollapse>
-      <div class="value-display">当前展开项: {{ JSON.stringify(controlledValues) }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import { Button as TButton, Tag as TTag, Input as TInput } from 'tdesign-vue-next';
-import { TdesignCollapse, TdesignCollapsePanel } from '../index.js';
-
-export default defineComponent({
-  name: 'TdesignCollapseDemo',
-  components: {
-    TdesignCollapse,
-    TdesignCollapsePanel,
-    TButton,
-    TTag,
-    TInput
-  },
-  setup() {
-    const activeValues1 = ref(['1']);
-    const activeValues2 = ref([]);
-    const activeValues3 = ref(['1']);
-    const activeValues4 = ref(['1']);
-    const activeValues5 = ref(['1']);
-    const activeValues6 = ref(['1']);
-    const activeValues7 = ref(['1']);
-    const activeValues8 = ref([]);
-    const activeValues9 = ref(['1']);
-    const nestedValues = ref(['1-1']);
-    
-    // 用于销毁折叠面板的输入框内容示例
-    const inputValue1 = ref('');
-    const inputValue2 = ref('');
-    
-    // 受控示例
-    const controlledValues = ref(['1']);
-    
-    const handleExpandAll = () => {
-      controlledValues.value = ['1', '2', '3'];
-    };
-    
-    const handleCollapseAll = () => {
-      controlledValues.value = [];
-    };
-    
-    const handleToggleFirst = () => {
-      if (controlledValues.value.includes('1')) {
-        controlledValues.value = controlledValues.value.filter(item => item !== '1');
-      } else {
-        controlledValues.value = [...controlledValues.value, '1'];
-      }
-    };
-    
-    const handleControlledChange = (val) => {
-      console.log('面板变化事件触发', val);
-    };
-
-    return {
-      activeValues1,
-      activeValues2,
-      activeValues3,
-      activeValues4,
-      activeValues5,
-      activeValues6,
-      activeValues7,
-      activeValues8,
-      activeValues9,
-      nestedValues,
-      inputValue1,
-      inputValue2,
-      controlledValues,
-      handleExpandAll,
-      handleCollapseAll,
-      handleToggleFirst,
-      handleControlledChange
-    };
-  }
-});
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-h1 {
-  font-size: 24px;
-  color: #0052d9;
-  margin-bottom: 20px;
-}
-
-.section {
-  margin-bottom: 40px;
-}
-
-h2 {
-  font-size: 18px;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #eee;
-}
-
-.value-display {
-  margin-top: 12px;
-  font-size: 14px;
-  color: #666;
-  font-family: monospace;
-}
-
-.custom-content {
-  padding: 8px 0;
-}
-
-.custom-buttons {
-  margin-top: 12px;
-  display: flex;
-  gap: 8px;
-}
-
-.right-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.control-buttons {
-  margin-bottom: 16px;
-  display: flex;
-  gap: 8px;
-}
+<template>
+  <div class="demo-container">
+    <h1>TDesign 折叠面板组件示例</h1>
+
+    <div class="section">
+      <h2>基础折叠面板</h2>
+      <TdesignCollapse v-model="activeValues1">
+        <TdesignCollapsePanel value="1" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="设置默认展开项">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="自定义折叠面板内容">
+          <div class="custom-content">
+            <p>这是自定义内容区域，可以包含任何元素。</p>
+            <div class="custom-buttons">
+              <t-button theme="primary" size="small">按钮 1</t-button>
+              <t-button theme="default" size="small">按钮 2</t-button>
+            </div>
+          </div>
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+      <div class="value-display">当前展开项: {{ JSON.stringify(activeValues1) }}</div>
+    </div>
+
+    <div class="section">
+      <h2>手风琴模式</h2>
+      <TdesignCollapse v-model="activeValues2" expand-mutex>
+        <TdesignCollapsePanel value="1" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+      <div class="value-display">当前展开项: {{ JSON.stringify(activeValues2) }}</div>
+    </div>
+
+    <div class="section">
+      <h2>自定义图标位置</h2>
+      <TdesignCollapse v-model="activeValues3" expand-icon-placement="right">
+        <TdesignCollapsePanel value="1" header="左侧标题，右侧图标">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="左侧标题，右侧图标">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>无边框模式</h2>
+      <TdesignCollapse v-model="activeValues4" borderless>
+        <TdesignCollapsePanel value="1" header="无边框模式标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="无边框模式标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>默认展开全部</h2>
+      <TdesignCollapse v-model="activeValues8" default-expand-all>
+        <TdesignCollapsePanel value="1" header="默认展开面板1">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="默认展开面板2">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="默认展开面板3">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>嵌套折叠面板</h2>
+      <TdesignCollapse v-model="activeValues5">
+        <TdesignCollapsePanel value="1" header="父级折叠面板">
+          <TdesignCollapse v-model="nestedValues">
+            <TdesignCollapsePanel value="1-1" header="嵌套面板1">
+              这是嵌套面板1的内容
+            </TdesignCollapsePanel>
+            <TdesignCollapsePanel value="1-2" header="嵌套面板2">
+              这是嵌套面板2的内容
+            </TdesignCollapsePanel>
+          </TdesignCollapse>
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>禁用状态</h2>
+      <TdesignCollapse v-model="activeValues6">
+        <TdesignCollapsePanel value="1" header="可展开面板">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="禁用的面板" disabled>
+          这部分内容不会被展开，因为面板已禁用。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>销毁折叠内容</h2>
+      <TdesignCollapse v-model="activeValues9">
+        <TdesignCollapsePanel value="1" header="不销毁内容的面板">
+          <div class="custom-content">
+            <p>关闭后不会销毁内容，状态会保留</p>
+            <t-input v-model="inputValue1" placeholder="输入内容会被保留" />
+          </div>
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="销毁内容的面板" destroy-on-collapse>
+          <div class="custom-content">
+            <p>关闭后会销毁内容，状态不会保留</p>
+            <t-input v-model="inputValue2" placeholder="输入内容会被销毁" />
+          </div>
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>自定义右侧内容</h2>
+      <TdesignCollapse v-model="activeValues7">
+        <TdesignCollapsePanel value="1" header="带有右侧内容的面板">
+          <template #rightContent>
+            <div class="right-content">
+              <t-tag theme="primary">标签</t-tag>
+              <t-button theme="default" size="small" variant="text">操作</t-button>
+            </div>
+          </template>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>受控用法示例</h2>
+      <div class="control-buttons">
+        <t-button @click="handleExpandAll">展开全部</t-button>
+        <t-button @click="handleCollapseAll">收起全部</t-button>
+        <t-button @click="handleToggleFirst">切换第一个</t-button>
+      </div>
+      <TdesignCollapse v-model="controlledValues" @change="handleControlledChange">
+        <TdesignCollapsePanel value="1" header="受控面板1">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="受控面板2">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="受控面板3">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+      <div class="value-display">当前展开项: {{ JSON.stringify(controlledValues) }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import { Button as TButton, Tag as TTag, Input as TInput } from 'tdesign-vue-next';
+import { TdesignCollapse, TdesignCollapsePanel } from '../index.js';
+
+export default defineComponent({
+  name: 'TdesignCollapseDemo',
+  components: {
+    TdesignCollapse,
+    TdesignCollapsePanel,
+    TButton,
+    TTag,
+    TInput
+  },
+  setup() {
+    const activeValues1 = ref(['1']);
+    const activeValues2 = ref([]);
+    const activeValues3 = ref(['1']);
+    const activeValues4 = ref(['1']);
+    const activeValues5 = ref(['1']);
+    const activeValues6 = ref(['1']);
+    const activeValues7 = ref(['1']);
+    const activeValues8 = ref([]);
+    const activeValues9 = ref(['1']);
+    const nestedValues = ref(['1-1']);
+    
+    // 用于销毁折叠面板的输入框内容示例
+    const inputValue1 = ref('');
+    const inputValue2 = ref('');
+    
+    // 受控示例
+    const controlledValues = ref(['1']);
+    
+    const handleExpandAll = () => {
+      controlledValues.value = ['1', '2', '3'];
+    };
+    
+    const handleCollapseAll = () => {
+      controlledValues.value = [];
+    };
+    
+    const handleToggleFirst = () => {
+      if (controlledValues.value.includes('1')) {
+        controlledValues.value = controlledValues.value.filter(item => item !== '1');
+      } else {
+        controlledValues.value = [...controlledValues.value, '1'];
+      }
+    };
+    
+    const handleControlledChange = (val) => {
+      console.log('面板变化事件触发', val);
+    };
+
+    return {
+      activeValues1,
+      activeValues2,
+      activeValues3,
+      activeValues4,
+      activeValues5,
+      activeValues6,
+      activeValues7,
+      activeValues8,
+      activeValues9,
+      nestedValues,
+      inputValue1,
+      inputValue2,
+      controlledValues,
+      handleExpandAll,
+      handleCollapseAll,
+      handleToggleFirst,
+      handleControlledChange
+    };
+  }
+});
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 24px;
+  color: #0052d9;
+  margin-bottom: 20px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+h2 {
+  font-size: 18px;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.value-display {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #666;
+  font-family: monospace;
+}
+
+.custom-content {
+  padding: 8px 0;
+}
+
+.custom-buttons {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.right-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.control-buttons {
+  margin-bottom: 16px;
+  display: flex;
+  gap: 8px;
+}
 </style>