m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/008-cell/345/215/225/345/205/203/346/240/274.md

@@ -0,0 +1,213 @@
+# 组件使用
+
+## cell 单元格
+
+### 介绍
+
+-   单元格组件。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+`Cell` 可以单独使用，也可以与 `CellGroup` 搭配使用，`CellGroup` 可以为 `Cell` 提供上下外边框。由于最后一个 `Cell` 和 `CellGroup` 的下边都有边框，会有边框重叠问题，需要手动将最后一个 `Cell` 设置成不显示边框。
+
+```html
+<em-cell-group>
+    <em-cell title="单元格" value="内容" />
+    <em-cell title="单元格" value="内容" label="描述信息" :border="false" />
+</em-cell-group>
+```
+
+#### 单元格大小
+
+通过 `size` 属性可以控制单元格的大小。
+
+```html
+<em-cell title="单元格" value="内容" size="large" />
+<em-cell title="单元格" value="内容" size="large" label="描述信息" />
+```
+
+#### 展示图标
+
+通过 `icon` 属性在标题左侧展示图标。
+
+```html
+<em-cell title="单元格" icon="location-o" />
+```
+
+#### 只设置 value
+
+只设置 `value` 时，内容会靠左对齐。
+
+```html
+<em-cell value="内容" />
+```
+
+#### 展示箭头
+
+设置 `is-link` 属性后会在单元格右侧显示箭头，并且可以通过 `arrow-direction` 属性控制箭头方向。
+
+```html
+<em-cell title="单元格" is-link />
+<em-cell title="单元格" is-link value="内容" />
+<em-cell title="单元格" is-link arrow-direction="down" value="内容" />
+```
+
+#### 页面导航
+
+可以通过 `url` 属性进行 `URL` 跳转，或通过 `to` 属性进行路由跳转。
+
+```html
+<em-cell title="URL 跳转" is-link url="/van/mobile.html" />
+<em-cell title="路由跳转" is-link to="index" />
+```
+
+#### 分组标题
+
+通过 `CellGroup` 的 `title` 属性可以指定分组标题。
+
+```html
+<em-cell-group title="分组1">
+    <em-cell title="单元格" value="内容" />
+</em-cell-group>
+<em-cell-group title="分组2">
+    <em-cell title="单元格" value="内容" />
+</em-cell-group>
+```
+
+#### 使用插槽
+
+如以上用法不能满足你的需求，可以使用插槽来自定义内容。
+
+```html
+<em-cell value="内容" is-link>
+    <!-- 使用 title 插槽来自定义标题 -->
+    <template #title>
+        <span class="custom-title">单元格</span>
+        <em-tag type="danger">标签</em-tag>
+    </template>
+</em-cell>
+
+<em-cell title="单元格" icon="shop-o">
+    <!-- 使用 rightIcon 插槽来自定义右侧图标 -->
+    <template #rightIcon>
+        <em-icon name="search" class="search-icon" />
+    </template>
+</em-cell>
+
+<style>
+    .custom-title {
+        margin-right: 4px;
+        vertical-align: middle;
+    }
+
+    .search-icon {
+        font-size: 16px;
+        line-height: inherit;
+    }
+</style>
+```
+
+#### 垂直居中
+
+通过 `center` 属性可以让 `Cell` 的左右内容都垂直居中。
+
+```html
+<em-cell center title="单元格" value="内容" label="描述信息" />
+```
+
+### API
+
+#### CellGroup Props
+
+| 参数   |      说明      | 类型    | 默认值 | ::: ifdef M83 weex 端支持 ::: endif |
+| :----- | :------------: | :------ | :----- | :---------------------------------- |
+| title  |    分组标题    | string  | -      | 是                                  |
+| border | 是否显示外边框 | boolean | `true` | 是                                  |
+
+#### Cell Props
+
+| 参数            |                        说明                        | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
+| :-------------- | :------------------------------------------------: | :-------------- | :--------- | :---------------------------------- |
+| title           |                      左侧标题                      | number / string | -          | 是                                  |
+| value           |                      右侧内容                      | number / string | -          | 是                                  |
+| label           |                 标题下方的描述信息                 | string          | -          | 是                                  |
+| size            |             单元格大小，可选值为 large             | string          | -          | 是                                  |
+| icon            |               左侧图标名称或图片链接               | string          | -          | 是                                  |
+| icon-prefix     |   图标类名前缀，同 Icon 组件的 class-prefix 属性   | string          | `van-icon` | 否                                  |
+| url             |                点击后跳转的链接地址                | string          | -          | 是                                  |
+| to              | 点击后跳转的目标路由对象，同 vue-router 的 to 属性 | string / object | -          | 是                                  |
+| border          |                   是否显示内边框                   | boolean         | `true`     | 是                                  |
+| replace         |            是否在跳转时替换当前页面历史            | boolean         | `false`    | 是                                  |
+| clickable       |                  是否开启点击反馈                  | boolean         | `false`    | 是                                  |
+| is-link         |           是否展示右侧箭头并开启点击反馈           | boolean         | `false`    | 是                                  |
+| required        |                是否显示表单必填星号                | boolean         | `false`    | 是                                  |
+| center          |                 是否使内容垂直居中                 | boolean         | `false`    | 否（weex 端默认居中）               |
+| arrow-direction |          箭头方向，可选值为 left up down           | string          | `right`    | 是                                  |
+| extraPosition   |       extra 插槽的位置，可选值为 left right        | string          | `right`    | 是                                  |
+| title-style     |                  左侧标题额外样式                  | string          | -          | 否                                  |
+| title-class     |                  左侧标题额外类名                  | string          | -          | 否                                  |
+| value-class     |                  右侧内容额外类名                  | string          | -          | 否                                  |
+| label-class     |                  描述信息额外类名                  | string          | -          | 否                                  |
+
+#### Cell Events
+
+| 事件名 |       说明       | 回调参数     |
+| :----- | :--------------: | :----------- |
+| click  | 点击单元格时触发 | event: Event |
+
+#### CellGroup Slots
+
+| 名称    |      说明      |
+| :------ | :------------: |
+| default |    默认插槽    |
+| title   | 自定义分组标题 |
+
+#### Cell Slots
+
+| 名称      |             说明             |
+| :-------- | :--------------------------: |
+| default   |   自定义右侧 value 的内容    |
+| title     |   自定义左侧 title 的内容    |
+| label     | 自定义标题下方 label 的内容  |
+| icon      |        自定义左侧图标        |
+| rightIcon | 自定义右侧按钮，默认为 arrow |
+| extra     |    自定义单元格的额外内容    |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-cell"
+ 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-cell"
+ 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>

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/009-checkbox/345/244/215/351/200/211/346/241/206.md

@@ -0,0 +1,501 @@
+# 组件使用
+
+## checkbox 复选框
+
+### 介绍
+
+-   复选框。
+
+### 代码演示
+
+#### 基础用法
+
+通过`v-model`绑定复选框的勾选状态
+
+```html
+<em-checkbox v-model="checked">复选框</em-checkbox>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            checked: true
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+const checked = ref(true);
+```
+
+::: endif
+
+#### 禁用状态
+
+通过设置`disabled`属性可以禁用复选框
+
+```html
+<em-checkbox v-model="checked" disabled>复选框</em-checkbox>
+```
+
+#### 自定义形状
+
+将`shape`属性设置为`round`，复选框的形状会变成圆形,
+
+其他形状属性值需要在组件中预设，建议其他形状使用【自定义图标】
+
+```html
+<em-checkbox v-model="checked" shape="round">复选框</em-checkbox>
+```
+
+#### 自定义颜色
+
+通过`checked-color`属性设置选中状态的图标颜色
+
+```html
+<em-checkbox v-model="checked" checked-color="#07c160">复选框</em-checkbox>
+```
+
+#### 自定义大小
+
+通过`icon-size`属性可以自定义图标的大小
+
+```html
+<em-checkbox v-model="checked" icon-size="24px">复选框</em-checkbox>
+```
+
+#### 自定义图标
+
+通过 `icon` 插槽自定义图标，可以通过`slotProps`判断是否为选中状态
+
+**注意：**
+
+因微信和支付宝小程序兼容性问题，需在 `em-checkbox` 或 `em-checkbox-group` 标签上添加 `icon` 属性， 纯 h5 环境中可不加
+
+```html
+<em-checkbox v-model="checked" icon>
+    自定义图标
+    <template #icon="props">
+        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
+    </template>
+</em-checkbox>
+
+<style>
+    .img-icon {
+        height: 20px;
+    }
+</style>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            checked: true,
+            activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+            inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+const checked = ref(true);
+const activeIcon = ref('https://img.yzcdn.cn/vant/user-active.png');
+const inactiveIcon = ref('https://img.yzcdn.cn/vant/user-inactive.png');
+```
+
+::: endif
+
+#### 中选框
+
+设置 `indeterminate` 属性可调整复选框风格
+
+```html
+<em-checkbox v-model="checked" :indeterminate="indeterminate">中选框</em-checkbox>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            checked: true,
+            indeterminate: true
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+const checked = ref(true);
+const indeterminate = ref(true);
+```
+
+::: endif
+
+#### 禁用文本点击
+
+设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换
+
+```html
+<em-checkbox v-model="checked" label-disabled>复选框</em-checkbox>
+```
+
+#### 复选框组
+
+复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态
+
+```html
+<em-checkbox-group v-model="result">
+    <em-checkbox name="a">复选框 a</em-checkbox>
+    <em-checkbox name="b">复选框 b</em-checkbox>
+</em-checkbox-group>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            result: ['a', 'b']
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const result = ref(['a', 'b']);
+```
+
+::: endif
+
+#### 水平排列
+
+将`direction`属性设置为`horizontal`后，复选框组会变成水平排列
+
+```html
+<em-checkbox-group v-model="result" direction="horizontal">
+    <em-checkbox name="a">复选框 a</em-checkbox>
+    <em-checkbox name="b">复选框 b</em-checkbox>
+</em-checkbox-group>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            result: []
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const result = ref([]);
+```
+
+::: endif
+
+#### 限制最大可选数
+
+通过`max`属性可以限制复选框组的最大可选数
+
+```html
+<em-checkbox-group v-model="result" :max="2">
+    <em-checkbox name="a">复选框 a</em-checkbox>
+    <em-checkbox name="b">复选框 b</em-checkbox>
+    <em-checkbox name="c">复选框 c</em-checkbox>
+</em-checkbox-group>
+```
+
+#### 全选与反选
+
+通过`CheckboxGroup`实例上的`toggleAll`方法可以实现全选与反选
+
+```html
+<em-checkbox-group v-model="result" ref="checkboxGroup">
+    <em-checkbox name="a">复选框 a</em-checkbox>
+    <em-checkbox name="b">复选框 b</em-checkbox>
+    <em-checkbox name="c">复选框 c</em-checkbox>
+</em-checkbox-group>
+
+<em-button type="primary" @click="checkAll">全选</em-button>
+<em-button type="info" @click="toggleAll">反选</em-button>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            result: []
+        };
+    },
+    methods: {
+        checkAll() {
+            this.$refs.checkboxGroup.toggleAll(true);
+        },
+        toggleAll() {
+            this.$refs.checkboxGroup.toggleAll();
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const result = ref([]);
+const checkboxGroup = ref(null);
+const checkAll = () => {
+    // 获取 checkboxGroup 的引用并调用 toggleAll
+    checkboxGroup.value.toggleAll(true);
+};
+
+const toggleAll = () => {
+    // 获取 checkboxGroup 的引用并调用 toggleAll
+    checkboxGroup.value.toggleAll();
+};
+```
+
+::: endif
+
+#### 搭配单元格组件使用
+
+此时你需要再引入`Cell`和`CellGroup`组件，并通过`Checkbox`实例上的 `toggle` 方法触发切换
+
+```html
+<em-checkbox-group v-model="result">
+    <em-cell-group>
+        <em-cell v-for="(item, index) in list" clickable :key="item" :title="`复选框 ${item}`" @click="toggle(index)">
+            <template #rightIcon>
+                <em-checkbox :name="item" ref="checkboxes" />
+            </template>
+        </em-cell>
+    </em-cell-group>
+</em-checkbox-group>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            list: ['a', 'b'],
+            result: []
+        };
+    },
+    methods: {
+        toggle(index) {
+            this.$refs.checkboxes[index].toggle();
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const list = ref(['a', 'b']);
+const result = ref([]);
+const checkboxes = ref([]);
+
+const toggle = (index) => {
+    checkboxes.value[index].toggle(); // 假设这里用来切换选中状态
+};
+```
+
+::: endif
+
+### API
+
+#### Checkbox Props
+
+| 参数                                                                         |                      说明                      | 类型            | 默认值    |
+| :--------------------------------------------------------------------------- | :--------------------------------------------: | :-------------- | :-------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |                 是否为选中状态                 | boolean         | `false`   |
+| name                                                                         |       标识符，注意微信小程序请传递字符串       | any             | -         |
+| shape                                                                        |             形状，可选值为 `round`             | string          | `square`  |
+| indeterminate                                                                |                   启用中选框                   | boolean         | `false`   |
+| disabled                                                                     |                 是否禁用复选框                 | boolean         | `false`   |
+| label-disabled                                                               |             是否禁用复选框文本点击             | boolean         | `false`   |
+| label-position                                                               |           文本位置，可选值为 `left`            | string          | `right`   |
+| icon-size                                                                    |            图标大小，默认单位为`px`            | number / string | `20px`    |
+| icon                                                                         | 自定义图标依赖该属性用于兼容微信和支付宝小程序 | boolean         | `false`   |
+| checked-color                                                                |                  选中状态颜色                  | string          | `#1989fa` |
+| bind-group                                                                   |               是否与复选框组绑定               | boolean         | `true`    |
+
+#### CheckboxGroup Props
+
+| 参数                                                                         |                      说明                      | 类型            | 默认值     |
+| :--------------------------------------------------------------------------- | :--------------------------------------------: | :-------------- | :--------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |               所有选中项的标识符               | any[]           | -          |
+| disabled                                                                     |               是否禁用所有复选框               | boolean         | `false`    |
+| max                                                                          |             最大可选数，0 为无限制             | number / string | 0          |
+| icon                                                                         | 自定义图标依赖该属性用于兼容微信和支付宝小程序 | boolean         | `false`    |
+| direction                                                                    |         排列方向，可选值为`horizontal`         | string          | `vertical` |
+| icon-size                                                                    |      所有复选框的图标大小，默认单位为`px`      | number / string | `20px`     |
+| checked-color                                                                |            所有复选框的选中状态颜色            | string          | `#1989fa`  |
+
+#### Checkbox Events
+
+| 事件名                                        |           说明           | 回调参数         |
+| :-------------------------------------------- | :----------------------: | :--------------- |
+| change                                        | 当绑定值变化时触发的事件 | checked: boolean |
+| click                                         |     点击复选框时触发     | event: Event     |
+| ::: ifdef M84 update:checked `v8.4` ::: endif |  用于同步 checked 事件   | checked: boolean |
+
+#### CheckboxGroup Events
+
+| 事件名 |           说明           | 回调参数     |
+| :----- | :----------------------: | :----------- |
+| change | 当绑定值变化时触发的事件 | names: any[] |
+
+#### Checkbox Slots
+
+| 名称    |    说明    | SlotProps        |
+| :------ | :--------: | :--------------- |
+| default | 自定义文本 | -                |
+| icon    | 自定义图标 | checked: boolean |
+
+#### CheckboxGroup 方法
+
+通过 `ref` 可以获取到 `CheckboxGroup` 实例并调用实例方法，详见组件实例方法
+
+| 方法名    |                              说明                              | 参数                     | 返回值 |
+| :-------- | :------------------------------------------------------------: | :----------------------- | :----- |
+| toggleAll | 切换所有复选框，传 true 为选中，false 为取消选中，不传参为取反 | options?: boolean/object | -      |
+| toggle    |          切换所选复选框，传数组下标，自动进行切换状态          | Number                   | -      |
+
+#### toggleAll 方法示例
+
+::: ifdef M83
+
+```js
+const { checkboxGroup } = this.$refs;
+
+// 全部反选
+checkboxGroup.toggleAll();
+// 全部选中
+checkboxGroup.toggleAll(true);
+// 全部取消
+checkboxGroup.toggleAll(false);
+
+// 全部反选，并跳过禁用的复选框, M8框架8.2.10版本以上支持
+checkboxGroup.toggleAll({
+    skipDisabled: true
+});
+// 全部选中，并跳过禁用的复选框，M8框架8.2.10版本以上支持
+checkboxGroup.toggleAll({
+    checked: true,
+    skipDisabled: true
+});
+```
+
+::: endif
+
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const checkboxGroup = ref(null);
+
+// 全部反选
+checkboxGroup.value.toggleAll();
+// 全部选中
+checkboxGroup.value.toggleAll(true);
+// 全部取消
+checkboxGroup.value.toggleAll(false);
+
+// 全部反选，并跳过禁用的复选框, M8框架8.2.10版本以上支持
+checkboxGroup.value.toggleAll({
+    skipDisabled: true
+});
+// 全部选中，并跳过禁用的复选框，M8框架8.2.10版本以上支持
+checkboxGroup.value.toggleAll({
+    checked: true,
+    skipDisabled: true
+});
+```
+
+::: endif
+
+#### Checkbox 方法
+
+通过 `ref` 可以获取到 `Checkbox` 实例并调用实例方法，详见组件实例方法
+
+| 方法名 |                             说明                             | 参数              | 返回值 |
+| :----- | :----------------------------------------------------------: | :---------------- | :----- |
+| toggle | 切换选中状态，传 true 为选中，false 为取消选中，不传参为取反 | checked?: boolean | -      |
+
+::: ifdef M83
+
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-checkbox"
+ 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-checkbox"
+ 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>