m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/028-progress/350/277/233/345/272/246/346/235/241.md

@@ -0,0 +1,103 @@
+# 组件使用
+
+## progress 进度条
+
+### 介绍
+
+-   进度条组件。
+
+### 代码演示
+
+#### 基础用法
+
+进度条默认为蓝色，使用`percentage`属性来设置当前进度。
+
+```html
+<em-progress :percentage="50" />
+```
+
+#### 线条粗细
+
+通过`stroke-width`可以设置进度条的粗细
+
+```html
+<em-progress :percentage="50" stroke-width="8" />
+```
+
+#### 置灰
+
+设置`inactive`属性后进度条将置灰
+
+```html
+<em-progress inactive :percentage="50" />
+```
+
+#### 样式定制
+
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
+
+```html
+<em-progress pivot-text="橙色" color="#f2826a" :percentage="25" />
+<em-progress pivot-text="红色" color="#ee0a24" :percentage="50" />
+<em-progress
+    :percentage="75"
+    pivot-text="紫色"
+    pivot-color="#7232dd"
+    color="linear-gradient(to right, #be99ff, #7232dd)"
+/>
+```
+
+### API
+
+#### Props
+
+| 参数         |            说明            | 类型            | 默认值       |
+| :----------- | :------------------------: | :-------------- | :----------- |
+| percentage   |         进度百分比         | number / string | `0`          |
+| stroke-width | 进度条粗细，默认单位为`px` | number / string | `4px`        |
+| color        |         进度条颜色         | string          | `#2e6be5`    |
+| track-color  |          轨道颜色          | string          | `#e5e5e5`    |
+| pivot-text   |        进度文字内容        | string          | 百分比       |
+| pivot-color  |       进度文字背景色       | string          | 同进度条颜色 |
+| text-color   |        进度文字颜色        | string          | `white`      |
+| inactive     |          是否置灰          | boolean         | `false`      |
+| show-pivot   |      是否显示进度文字      | boolean         | `true`       |
+
+#### 方法
+
+通过 `ref` 可以获取到 `Progress` 实例并调用实例方法，详见组件实例方法。
+
+| 方法名 |                     说明                     | 参数 | 返回值 |
+| :----- | :------------------------------------------: | :--- | :----- |
+| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | -    | -      |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-progress"
+ 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-progress"
+ 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/029-radio/345/215/225/351/200/211/346/241/206.md

@@ -0,0 +1,285 @@
+# 组件使用
+
+## radio 单选框
+
+### 介绍
+
+-   单选框组件。
+
+### 代码演示
+
+#### 基础用法
+
+通过`v-model`绑定值当前选中项的 `name`。
+
+```html
+<em-radio-group v-model="radio">
+    <em-radio name="1">单选框 1</em-radio>
+    <em-radio name="2">单选框 2</em-radio>
+</em-radio-group>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            radio: '1'
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const radio = ref('1');
+```
+
+::: endif
+
+#### 水平排列
+
+将`direction`属性设置为`horizontal`后，单选框组会变成水平排列
+
+```html
+<em-radio-group v-model="radio" direction="horizontal">
+    <em-radio name="1">单选框 1</em-radio>
+    <em-radio name="2">单选框 2</em-radio>
+</em-radio-group>
+```
+
+#### 禁用状态
+
+通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项。
+
+```html
+<em-radio-group v-model="radio" disabled>
+    <em-radio name="1">单选框 1</em-radio>
+    <em-radio name="2">单选框 2</em-radio>
+</em-radio-group>
+```
+
+#### 自定义颜色
+
+通过`checked-color`属性设置选中状态的图标颜色
+
+```html
+<em-radio-group v-model="radio">
+    <em-radio name="1" checked-color="#07c160">单选框 1</em-radio>
+    <em-radio name="2" checked-color="#07c160">单选框 2</em-radio>
+</em-radio-group>
+```
+
+#### 自定义大小
+
+通过`icon-size`属性可以自定义图标的大小
+
+```html
+<em-radio-group v-model="radio">
+    <em-radio name="1" icon-size="32px">单选框 1</em-radio>
+    <em-radio name="2" icon-size="32px">单选框 2</em-radio>
+</em-radio-group>
+```
+
+#### 自定义图标
+
+通过`icon`插槽自定义图标，并通过`slotProps`判断是否为选中状态
+
+```html
+<em-radio-group v-model="radio" icon>
+    <em-radio name="1">
+        单选框 1
+        <template #icon="props">
+            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
+        </template>
+    </em-radio>
+    <em-radio name="2">
+        单选框 2
+        <template #icon="props">
+            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
+        </template>
+    </em-radio>
+</em-radio-group>
+
+<style>
+    .img-icon {
+        height: 20px;
+    }
+</style>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            radio: '1',
+            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 radio = ref('1');
+const activeIcon = 'https://img.yzcdn.cn/vant/user-active.png';
+const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
+```
+
+::: endif
+
+#### 中选框
+
+设置 `indeterminate` 属性可调整单选框风格
+
+```html
+<em-radio-group v-model="radio">
+    <em-radio name="1" :indeterminate="indeterminate">单选框 1</em-radio>
+    <em-radio name="2" checked-color="#07c160" :indeterminate="indeterminate">单选框 2</em-radio>
+    <em-radio name="3" disabled checked-color="#07c160" :indeterminate="indeterminate">单选框 3</em-radio>
+</em-radio-group>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            radio: '1',
+            indeterminate: true
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const radio = ref('1');
+const indeterminate = ref(true);
+```
+
+::: endif
+
+#### 禁用文本点击
+
+设置`label-disabled`属性后，点击图标以外的内容不会触发单选框切换
+
+```html
+<em-radio-group v-model="radio">
+    <em-radio name="1" label-disabled>单选框 1</em-radio>
+    <em-radio name="2" label-disabled>单选框 2</em-radio>
+</em-radio-group>
+```
+
+#### 与 Cell 组件一起使用
+
+此时你需要再引入`Cell`和`CellGroup`组件。
+
+```html
+<em-radio-group v-model="radio">
+    <em-cell-group>
+        <em-cell title="单选框 1" @click="radio = '1'">
+            <template #rightIcon>
+                <em-radio name="1" />
+            </template>
+        </em-cell>
+        <em-cell title="单选框 2" @click="radio = '2'">
+            <template #rightIcon>
+                <em-radio name="2" />
+            </template>
+        </em-cell>
+    </em-cell-group>
+</em-radio-group>
+```
+
+### API
+
+#### Props
+
+| 参数           |                                    说明                                    | 类型            | 默认值    |
+| :------------- | :------------------------------------------------------------------------: | :-------------- | :-------- |
+| name           |                     标识符, 注意微信小程序请传递字符串                     | any             | -         |
+| shape          | 形状，可选值为 `square`(为了与 PC 保持统一，`v8.3.7`开始默认值改为`round`) | string          | `round`   |
+| indeterminate  |                                 启用中选框                                 | boolean         | `false`   |
+| disabled       |                               是否为禁用状态                               | boolean         | `false`   |
+| label-disabled |                            是否禁用文本内容点击                            | boolean         | `false`   |
+| label-position |                         文本位置，可选值为 `left`                          | string          | `right`   |
+| icon-size      |                          图标大小，默认单位为`px`                          | number / string | `20px`    |
+| checked-color  |                                选中状态颜色                                | string          | `#1989fa` |
+| icon           |                         自定义图标时需要添加该属性                         | boolean         | false     |
+
+#### RadioGroup Props
+
+| 参数                                                                         |                 说明                 | 类型            | 默认值     |
+| :--------------------------------------------------------------------------- | :----------------------------------: | :-------------- | :--------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |          当前选中项的标识符          | any             | -          |
+| disabled                                                                     |          是否禁用所有单选框          | boolean         | `false`    |
+| direction                                                                    |    排列方向，可选值为`horizontal`    | string          | `vertical` |
+| icon-size                                                                    | 所有单选框的图标大小，默认单位为`px` | number / string | `20px`     |
+| checked-color                                                                |       所有单选框的选中状态颜色       | string          | `#1989fa`  |
+
+#### Radio Events
+
+| 事件名                                        |         说明          | 回调参数                   |
+| :-------------------------------------------- | :-------------------: | :------------------------- |
+| click                                         |   点击单选框时触发    | event: Event,value: string |
+| ::: ifdef M84 update:checked `v8.4` ::: endif | 用于同步 checked 事件 | checked: boolean           |
+
+#### RadioGroup Events
+
+| 事件名 |           说明           | 回调参数     |
+| :----- | :----------------------: | :----------- |
+| change | 当绑定值变化时触发的事件 | name: string |
+
+#### Radio Slots
+
+| 名称    |    说明    | SlotProps        |
+| :------ | :--------: | :--------------- |
+| default | 自定义文本 | -                |
+| icon    | 自定义图标 | checked: boolean |
+
+::: ifdef M83
+
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-radio"
+ 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-radio"
+ 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/030-rate/350/257/204/345/210/206.md

@@ -0,0 +1,189 @@
+# 组件使用
+
+## rate 评分
+
+### 介绍
+
+-   评分组件。
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<em-rate v-model="value" />
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            value: 3
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const value = ref(3);
+```
+
+::: endif
+
+#### 自定义图标
+
+```html
+<em-rate v-model="value" icon="like" void-icon="like-o" />
+自定义样式
+<em-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
+```
+
+#### 半星
+
+```html
+<em-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            value: 2.5
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const value = ref(2.5);
+```
+
+::: endif
+
+#### 自定义数量
+
+::: ifdef M83
+
+```html
+<em-rate v-model="value" :count="6" />
+禁用状态
+<em-rate v-model="value" disabled />
+只读状态
+<em-rate v-model="value" readonly />
+监听 change 事件
+<em-rate v-model="value" @change="onChange" />
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    method: {
+        onChange(value) {
+            Toast({
+                message: '当前值：' + value
+            });
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-rate v-model="value" :count="6" />
+禁用状态
+<em-rate v-model="value" disabled />
+只读状态
+<em-rate v-model="value" readonly />
+监听 change 事件
+<em-rate v-model="value" @change="onChange" />
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const onChange = (value) => {
+    Toast({
+        message: '当前值：' + value
+    });
+};
+const emToastRef = ref(null);
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数                                                                         |                        说明                        | 类型            | 默认值     |
+| :--------------------------------------------------------------------------- | :------------------------------------------------: | :-------------- | :--------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |                      当前分值                      | number          | -          |
+| count                                                                        |                      图标总数                      | number / string | `5`        |
+| size                                                                         |              图标大小，默认单位为`px`              | number / string | `20px`     |
+| gutter                                                                       |              图标间距，默认单位为`px`              | number / string | `4px`      |
+| color                                                                        |                    选中时的颜色                    | string          | `#e03f3f`  |
+| void-color                                                                   |                   未选中时的颜色                   | string          | `#b8becc`  |
+| disabled-color                                                               |                    禁用时的颜色                    | string          | `#b8becc`  |
+| icon                                                                         |             选中时的图标名称或图片链接             | string          | `star`     |
+| void-icon                                                                    |            未选中时的图标名称或图片链接            | string          | `star-o`   |
+| icon-prefix                                                                  | 图标类名前缀，同 `Icon` 组件的 `class-prefix` 属性 | string          | `van-icon` |
+| allow-half                                                                   |                    是否允许半选                    | boolean         | `false`    |
+| readonly                                                                     |                   是否为只读状态                   | boolean         | `false`    |
+| disabled                                                                     |                    是否禁用评分                    | boolean         | `false`    |
+| touchable                                                                    |            是否可以通过滑动手势选择评分            | boolean         | `true`     |
+
+#### Events
+
+| 事件名 |           说明           | 回调参数 |
+| :----- | :----------------------: | :------- |
+| change | 当前分值变化时触发的事件 | 当前分值 |
+| input  | 当前分值滑动时触发的事件 | 当前分值 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-rate"
+ 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-rate"
+ 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>