Merge pull request #721 from Tencent/docs/dropdown-menu/demo

fix(dropdown-menu): update demo
Tencent · Aug 4, 2022 · ab9f52b · ab9f52b
2 parents 363654d + d588b85
commit ab9f52b
Show file tree

Hide file tree

Showing 16 changed files with 213 additions and 294 deletions.
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
@@ -20,157 +20,17 @@ isComponent: true
 
 ## 用法
 
-### 基础使用
-
-```html
-<t-dropdown-menu>
-  <!-- 受控 -->
-  <t-dropdown-item
-    label="菜单"
-    options="{{singleSelect.options}}"
-    value="{{singleSelect.value}}"
-    bindchange="handleSingleSelect"
-  />
-  <!-- 非受控 -->
-  <t-dropdown-item label="菜单" options="{{singleSelect.options}}" defaultValue="option_3" />
-  <t-dropdown-item label="菜单" options="{{singleSelect.options}}" defaultValue="option_3" />
-  <t-dropdown-item label="两字溢出" options="{{singleSelect.options}}" defaultValue="option_3" />
-</t-dropdown-menu>
-```
+### 单选下拉菜单
 
-```js
-const singleSelectOptions = new Array(8).fill(null).map((_, i) => ({
-  label: `选项 ${i + 1}`,
-  value: `option_${i + 1}`,
-  disabled: false,
-}));
-
-Page({
-  data: {
-    singleSelect: {
-      value: 'option_3',
-      options: singleSelectOptions,
-    },
-  },
-
-  handleSingleSelect(e) {
-    this.setData({
-      'singleSelect.value': e.detail.value,
-    });
-  },
-});
-```
+{{ single }}
 
-### 多列多选
-
-```html
-<t-dropdown-menu>
-  <!-- 受控 -->
-  <t-dropdown-item
-    label="单列多选"
-    options="{{options}}"
-    value="{{value}}"
-    bindchange="handleMultipleSelect"
-    multiple
-  />
-  <!-- 非受控 -->
-  <t-dropdown-item
-    label="双列多选"
-    optionsColumns="2"
-    options="{{options}}"
-    defaultValue="{{['option_1', 'option_2']}}"
-    multiple
-  />
-  <t-dropdown-item
-    label="最多四字三列"
-    optionsColumns="3"
-    options="{{options}}"
-    defaultValue="{{['option_1', 'option_2', 'option_3']}}"
-    multiple
-  />
-</t-dropdown-menu>
-```
+### 多列下拉菜单
 
-```js
-const options = new Array(8).fill(null).map((_, i) => ({
-  label: `选项 ${i + 1}`,
-  value: `option_${i + 1}`,
-  disabled: false,
-}));
-
-Page({
-  data: {
-    value: ['option_1'],
-    options,
-  },
-
-  handleMultipleSelect(e) {
-    this.setData({
-      'multipleSelect.value': e.detail.value,
-    });
-  },
-});
-```
+{{ multi }}
 
-### 树形选择
-
-```html
-<t-dropdown-menu>
-  <t-dropdown-item
-    label="树形双列单选"
-    optionsLayout="tree"
-    options="{{doubleColumnsTree.options}}"
-    value="{{doubleColumnsTree.value}}"
-    bindchange="handleTreeSelect"
-  />
-  <t-dropdown-item
-    label="树形三列多选"
-    optionsLayout="tree"
-    options="{{tripleColumnsTree.options}}"
-    defaultValue="{{tripleColumnsTree.value}}"
-    multiple
-  />
-</t-dropdown-menu>
-```
+### 树形下拉菜单
 
-```js
-const generateTree = function (deep = 0, count = 10, prefix?: string) {
-  const ans = [];
-
-  for (let i = 0; i < count; i += 1) {
-    const value = prefix ? `${prefix}-${i}` : `${i}`;
-    const rect: any = {
-      label: `选项${chineseNumber[i]}`,
-      value,
-    };
-
-    if (deep > 0) {
-      rect.options = generateTree(deep - 1, 10, value);
-    }
-    ans.push(rect);
-  }
-
-  return ans;
-};
-
-Page({
-  data: {
-    doubleColumnsTree: {
-      options: generateTree(1),
-      value: ['0', '0-0'],
-    },
-    tripleColumnsTree: {
-      options: generateTree(2),
-      value: ['0', '0-0', ['0-0-0', '0-0-1']],
-    },
-  },
-  handleTreeSelect(e) {
-    this.setData({
-      'doubleColumnsTree.value': e.detail.value,
-    });
-  },
-})
-```
+{{ tree }}
 
 ## API
 ### DropdownMenu Props

diff --git a/src/dropdown-menu/_example/dropdown-menu.json b/src/dropdown-menu/_example/dropdown-menu.json
@@ -1,3 +1,8 @@
 {
-  "navigationBarTitleText": "Dropdown Menu 下拉菜单"
+  "navigationBarTitleText": "Dropdown Menu 下拉菜单",
+  "usingComponents": {
+    "single": "./single",
+    "multi": "./multi",
+    "tree": "./tree"
+  }
 }
diff --git a/src/dropdown-menu/_example/dropdown-menu.ts b/src/dropdown-menu/_example/dropdown-menu.ts
@@ -1,97 +1 @@
-const chineseNumber = '一二三四五六七八九十'.split('');
-
-const singleSelectOptions = new Array(8).fill(null).map((_, i) => ({
-  label: `选项${chineseNumber[i]}`,
-  value: `option_${i + 1}`,
-  disabled: false,
-}));
-
-singleSelectOptions.push({
-  label: '禁用选项',
-  value: 'disabled',
-  disabled: true,
-});
-
-const doubleColumnsOptions = [
-  ...singleSelectOptions,
-  {
-    label: '禁用选项',
-    value: 'disabled',
-    disabled: true,
-  },
-];
-
-const tripleColumnsOptions = [
-  ...doubleColumnsOptions,
-  {
-    label: '禁用选项',
-    value: 'disabled',
-    disabled: true,
-  },
-];
-
-tripleColumnsOptions.splice(8, 0, {
-  label: `选项${chineseNumber[8]}`,
-  value: `option_${9}`,
-  disabled: false,
-});
-
-const generateTree = function (deep = 0, count = 10, prefix?: string) {
-  const ans = [];
-
-  for (let i = 0; i < count; i += 1) {
-    const value = prefix ? `${prefix}-${i}` : `${i}`;
-    const rect: any = {
-      label: `选项${chineseNumber[i]}`,
-      value,
-    };
-
-    if (deep > 0) {
-      rect.options = generateTree(deep - 1, 10, value);
-    }
-    ans.push(rect);
-  }
-
-  return ans;
-};
-
-Page({
-  data: {
-    singleSelect: {
-      value: 'option_3',
-      options: singleSelectOptions,
-    },
-    multipleSelect: {
-      value: ['option_1'],
-      options: singleSelectOptions,
-    },
-    doubleColumnsOptions,
-    tripleColumnsOptions,
-    doubleColumnsTree: {
-      options: generateTree(1),
-      value: ['0', '0-0'],
-    },
-    tripleColumnsTree: {
-      options: generateTree(2),
-      value: ['0', '0-0', ['0-0-0', '0-0-1']],
-    },
-  },
-
-  handleSingleSelect(e) {
-    this.setData({
-      'singleSelect.value': e.detail.value,
-    });
-  },
-
-  handleMultipleSelect(e) {
-    this.setData({
-      'multipleSelect.value': e.detail.value,
-    });
-  },
-
-  handleTreeSelect(e) {
-    this.setData({
-      'doubleColumnsTree.value': e.detail.value,
-    });
-  },
-});
+Page({});
diff --git a/src/dropdown-menu/_example/dropdown-menu.wxml b/src/dropdown-menu/_example/dropdown-menu.wxml
@@ -2,62 +2,15 @@
   <view class="demo-title">DropdownMenu 下拉菜单</view>
   <view class="demo-desc">菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。</view>
   <t-demo title="01 类型" desc="单选下拉菜单">
-    <t-dropdown-menu>
-      <t-dropdown-item
-        label="菜单"
-        options="{{singleSelect.options}}"
-        value="{{singleSelect.value}}"
-        bindchange="handleSingleSelect"
-      />
-      <t-dropdown-item label="菜单" options="{{singleSelect.options}}" defaultValue="option_3" />
-      <t-dropdown-item label="菜单" options="{{singleSelect.options}}" defaultValue="option_3" />
-      <t-dropdown-item label="两字溢出" options="{{singleSelect.options}}" defaultValue="option_3" />
-    </t-dropdown-menu>
+    <single />
   </t-demo>
 
   <t-demo desc="多选下拉菜单">
-    <t-dropdown-menu>
-      <t-dropdown-item
-        label="单列多选"
-        options="{{multipleSelect.options}}"
-        value="{{multipleSelect.value}}"
-        bindchange="handleMultipleSelect"
-        multiple
-      />
-      <t-dropdown-item
-        label="双列多选"
-        optionsColumns="2"
-        options="{{doubleColumnsOptions}}"
-        defaultValue="{{['option_1', 'option_2']}}"
-        multiple
-      />
-      <t-dropdown-item
-        label="最多四字三列"
-        optionsColumns="3"
-        options="{{tripleColumnsOptions}}"
-        defaultValue="{{['option_1', 'option_2', 'option_3']}}"
-        multiple
-      />
-    </t-dropdown-menu>
+    <multi />
   </t-demo>
 
   <t-demo desc="树形下拉菜单">
-    <t-dropdown-menu>
-      <t-dropdown-item
-        label="树形双列"
-        optionsLayout="tree"
-        options="{{doubleColumnsTree.options}}"
-        value="{{doubleColumnsTree.value}}"
-        bindchange="handleTreeSelect"
-      />
-      <t-dropdown-item
-        label="选项最多八字树形三列"
-        optionsLayout="tree"
-        options="{{tripleColumnsTree.options}}"
-        defaultValue="{{tripleColumnsTree.value}}"
-        multiple
-      />
-    </t-dropdown-menu>
+    <tree />
   </t-demo>
 
   <t-demo title="02 状态" desc="下拉菜单状态">

diff --git a/src/dropdown-menu/_example/multi/index.js b/src/dropdown-menu/_example/multi/index.js
@@ -0,0 +1,56 @@
+const chineseNumber = '一二三四五六七八九十'.split('');
+
+const singleSelectOptions = new Array(8).fill(null).map((_, i) => ({
+  label: `选项${chineseNumber[i]}`,
+  value: `option_${i + 1}`,
+  disabled: false,
+}));
+
+singleSelectOptions.push({
+  label: '禁用选项',
+  value: 'disabled',
+  disabled: true,
+});
+
+const doubleColumnsOptions = [
+  ...singleSelectOptions,
+  {
+    label: '禁用选项',
+    value: 'disabled',
+    disabled: true,
+  },
+];
+
+const tripleColumnsOptions = [
+  ...doubleColumnsOptions,
+  {
+    label: '禁用选项',
+    value: 'disabled',
+    disabled: true,
+  },
+];
+
+tripleColumnsOptions.splice(8, 0, {
+  label: `选项${chineseNumber[8]}`,
+  value: `option_${9}`,
+  disabled: false,
+});
+
+Component({
+  data: {
+    multipleSelect: {
+      value: ['option_1'],
+      options: singleSelectOptions,
+    },
+    doubleColumnsOptions,
+    tripleColumnsOptions,
+  },
+
+  methods: {
+    handleMultipleSelect(e) {
+      this.setData({
+        'multipleSelect.value': e.detail.value,
+      });
+    },
+  },
+});