m8-mcp-server 1.0.0

package/dist/data/m8mpdoc-develop/009-UI/347/273/204/344/273/266/039-treeselect/345/210/206/347/261/273/351/200/211/346/213/251.md

@@ -0,0 +1,631 @@
+# 组件使用
+
+## treeselect 分类选择
+
+### 介绍
+
+-   分类选择组件。
+
+### 代码演示
+
+#### 单选模式
+
+`item`为分类显示所需的数据，数据格式见下方示例。`main-active-index`表示左侧高亮选项的索引，`active-id`表示右侧高亮选项的 `id`
+
+::: ifdef M83
+
+```html
+<em-tree-select
+    :items="items"
+    :active-id.sync="activeId"
+    :main-active-index.sync="activeIndex"
+    @click-nav="onNavClick"
+    @click-item="onItemClick"
+></em-tree-select>
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    text: '所有城市',
+                    children: [
+                        {
+                            text: '温州',
+                            id: 1,
+                            disabled: true
+                        },
+                        {
+                            text: '杭州',
+                            id: 2
+                        },
+                        {
+                            text: '南京',
+                            id: 3
+                        },
+                        {
+                            text: '苏州',
+                            id: 4
+                        }
+                    ]
+                },
+                {
+                    text: '浙江',
+                    children: [
+                        {
+                            text: '温州',
+                            id: 1,
+                            disabled: true
+                        },
+                        {
+                            text: '杭州',
+                            id: 2
+                        }
+                    ]
+                },
+                {
+                    text: '江苏',
+                    children: [
+                        {
+                            text: '南京',
+                            id: 3
+                        },
+                        {
+                            text: '苏州',
+                            id: 4
+                        }
+                    ]
+                }
+            ],
+            activeId: 1,
+            activeIndex: 1
+        };
+    },
+    methods: {
+        onNavClick(index) {
+            Toast({
+                message: `触发点击事件，index:${index}`
+            });
+        },
+        onItemClick(item) {
+            Toast({
+                message: `触发点击事件，item:${JSON.stringify(item)}`
+            });
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-tree-select
+    :items="items"
+    :v-model:active-id="activeId"
+    :v-model:main-active-index="activeIndex"
+    @click-nav="onNavClick"
+    @click-item="onItemClick"
+></em-tree-select>
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const items = ref([
+    {
+        text: '所有城市',
+        children: [
+            {
+                text: '温州',
+                id: 1,
+                disabled: true
+            },
+            {
+                text: '杭州',
+                id: 2
+            },
+            {
+                text: '南京',
+                id: 3
+            },
+            {
+                text: '苏州',
+                id: 4
+            }
+        ]
+    },
+    {
+        text: '浙江',
+        children: [
+            {
+                text: '温州',
+                id: 1,
+                disabled: true
+            },
+            {
+                text: '杭州',
+                id: 2
+            }
+        ]
+    },
+    {
+        text: '江苏',
+        children: [
+            {
+                text: '南京',
+                id: 3
+            },
+            {
+                text: '苏州',
+                id: 4
+            }
+        ]
+    }
+]);
+
+const activeId = ref(1);
+const activeIndex = ref(1);
+
+const onNavClick = (index) => {
+    Toast({
+        message: `触发点击事件，index:${index}`
+    });
+};
+
+const onItemClick = (item) => {
+    Toast({
+        message: `触发点击事件，item:${JSON.stringify(item)}`
+    });
+};
+
+const emToastRef = ref(null);
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+#### 多选模式
+
+`active-id`为数组格式时，可以选中多个右侧选项
+
+::: ifdef M83
+
+```html
+<em-tree-select
+    :items="items"
+    :active-id.sync="activeIds"
+    :main-active-index.sync="activeIndex1"
+    @click-nav="onNavClick"
+    @click-item="onItemClick"
+></em-tree-select>
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    text: '所有城市',
+                    children: [
+                        {
+                            text: '温州',
+                            id: 1,
+                            disabled: true
+                        },
+                        {
+                            text: '杭州',
+                            id: 2
+                        },
+                        {
+                            text: '南京',
+                            id: 3
+                        },
+                        {
+                            text: '苏州',
+                            id: 4
+                        }
+                    ]
+                },
+                {
+                    text: '浙江',
+                    children: [
+                        {
+                            text: '温州',
+                            id: 1,
+                            disabled: true
+                        },
+                        {
+                            text: '杭州',
+                            id: 2
+                        }
+                    ]
+                },
+                {
+                    text: '江苏',
+                    children: [
+                        {
+                            text: '南京',
+                            id: 3
+                        },
+                        {
+                            text: '苏州',
+                            id: 4
+                        }
+                    ]
+                }
+            ],
+            activeIds: [2],
+            activeIndex1: 1
+        };
+    },
+    methods: {
+        onNavClick(index) {
+            Toast({
+                message: `触发点击事件，index:${index}`
+            });
+        },
+        onItemClick(item) {
+            Toast({
+                message: `触发点击事件，item:${JSON.stringify(item)}`
+            });
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-tree-select
+    :items="items"
+    :v-model:active-id="activeIds"
+    :v-model:main-active-index="activeIndex1"
+    @click-nav="onNavClick"
+    @click-item="onItemClick"
+></em-tree-select>
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const items = ref([
+    {
+        text: '所有城市',
+        children: [
+            {
+                text: '温州',
+                id: 1,
+                disabled: true
+            },
+            {
+                text: '杭州',
+                id: 2
+            },
+            {
+                text: '南京',
+                id: 3
+            },
+            {
+                text: '苏州',
+                id: 4
+            }
+        ]
+    },
+    {
+        text: '浙江',
+        children: [
+            {
+                text: '温州',
+                id: 1,
+                disabled: true
+            },
+            {
+                text: '杭州',
+                id: 2
+            }
+        ]
+    },
+    {
+        text: '江苏',
+        children: [
+            {
+                text: '南京',
+                id: 3
+            },
+            {
+                text: '苏州',
+                id: 4
+            }
+        ]
+    }
+]);
+
+const activeIds = ref([2]);
+const activeIndex1 = ref(1);
+
+const onNavClick = (index) => {
+    Toast({
+        message: `触发点击事件，index:${index}`
+    });
+};
+
+const onItemClick = (item) => {
+    Toast({
+        message: `触发点击事件，item:${JSON.stringify(item)}`
+    });
+};
+
+const emToastRef = ref(null);
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+#### 自定义内容
+
+通过`content`插槽可以自定义右侧区域的内容
+
+::: ifdef M83
+
+```html
+<em-tree-select :items="items1" :main-active-index.sync="activeIndex2" @click-nav="onNavClick">
+    <template #content>
+        <em-image v-if="activeIndex2 === 0" :width="240" :height="190" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+        <em-image :width="240" :height="190" v-if="activeIndex2 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+    </template>
+</em-tree-select>
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    data() {
+        return {
+            activeIndex2: 1,
+            items1: [{ text: '分组1' }, { text: '分组2' }]
+        };
+    },
+    methods: {
+        onNavClick(index) {
+            Toast({
+                message: `触发点击事件，index:${index}`
+            });
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-tree-select :items="items1" :v-model:main-active-index="activeIndex2" @click-nav="onNavClick">
+    <template #content>
+        <em-image v-if="activeIndex2 === 0" :width="240" :height="190" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+        <em-image :width="240" :height="190" v-if="activeIndex2 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+    </template>
+</em-tree-select>
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const items1 = ref([{ text: '分组1' }, { text: '分组2' }]);
+
+const activeIndex2 = ref(1);
+
+const onNavClick = (index) => {
+    Toast({
+        message: `触发点击事件，index:${index}`
+    });
+};
+
+const emToastRef = ref(null);
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+#### 徽标提示
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
+
+::: ifdef M83
+
+```html
+<em-tree-select :items="items2" :main-active-index.sync="activeIndex3"></em-tree-select>
+```
+
+```js
+export default {
+    data() {
+        return {
+            activeIndex3: 1,
+            items2: [
+                {
+                    text: '浙江',
+                    dot: true,
+                    children: [
+                        {
+                            text: '温州',
+                            id: 1,
+                            disabled: true
+                        },
+                        {
+                            text: '杭州',
+                            id: 2
+                        }
+                    ]
+                },
+                {
+                    text: '江苏',
+                    badge: 5,
+                    children: [
+                        {
+                            text: '南京',
+                            id: 3
+                        },
+                        {
+                            text: '苏州',
+                            id: 4
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-tree-select :items="items2" :v-model:main-active-index="activeIndex3"></em-tree-select>
+```
+
+```js
+import { ref } from 'vue';
+const items2 = ref([
+    {
+        text: '浙江',
+        dot: true,
+        children: [
+            {
+                text: '温州',
+                id: 1,
+                disabled: true
+            },
+            {
+                text: '杭州',
+                id: 2
+            }
+        ]
+    },
+    {
+        text: '江苏',
+        badge: 5,
+        children: [
+            {
+                text: '南京',
+                id: 3
+            },
+            {
+                text: '苏州',
+                id: 4
+            }
+        ]
+    }
+]);
+
+const activeIndex3 = ref(1);
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数              |              说明               | 类型                                 | 默认值     |
+| :---------------- | :-----------------------------: | :----------------------------------- | :--------- |
+| items             |       分类显示所需的数据        | Item[]                               | `[]`       |
+| height            |      高度，默认单位为`px`       | number / string                      | `300`      |
+| main-active-index |        左侧选中项的索引         | number / string                      | `0`        |
+| active-id         | 右侧选中项的 `id`，支持传入数组 | number / string /(number / string)[] | `0`        |
+| max               |       右侧项最大选中个数        | number / string                      | `Infinity` |
+| selected-icon     |   自定义右侧栏选中状态的图标    | string                               | `success`  |
+
+#### Slots
+
+| 名称    |        说明        |
+| :------ | :----------------: |
+| content | 自定义右侧区域内容 |
+
+#### Events
+
+| 事件名     |         说明         | 回调参数                  |
+| :--------- | :------------------: | :------------------------ |
+| click-nav  |  点击左侧导航时触发  | index：被点击的导航的索引 |
+| click-item | 点击右侧选择项时触发 | data: 该点击项的数据      |
+
+#### Item 数据结构
+
+`items` 整体为一个数组，数组内包含一系列描述分类的对象，每个分类里，`text`表示当前分类的名称，`children`表示分类里的可选项。
+
+```js
+[
+    {
+        // 导航名称
+        text: '所有城市',
+        // 导航名称右上角徽标，2.5.6 版本开始支持
+        badge: 3,
+        // 是否在导航名称右上角显示小红点
+        dot: true,
+        // 导航节点额外类名
+        className: 'my-class',
+        // 该导航下所有的可选项
+        children: [
+            {
+                // 名称
+                text: '温州',
+                // id，作为匹配选中状态的标识符
+                id: 1,
+                // 禁用选项
+                disabled: true
+            },
+            {
+                text: '杭州',
+                id: 2
+            }
+        ]
+    }
+];
+```
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-tree-select"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-tree-select"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+
+ <style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>