m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/033-stepper/346/255/245/350/277/233/345/231/250.md

@@ -0,0 +1,340 @@
+# 组件使用
+
+## stepper 步进器
+
+### 介绍
+
+-   步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
+
+### 代码演示
+
+#### 基础用法
+
+可以通过`change`事件监听到输入值的变化。
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" />
+```
+
+```js
+export default {
+    data() {
+        return {
+            value: 1
+        };
+    }
+};
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" />
+```
+
+```js
+import { ref } from 'vue';
+const value = ref(1);
+```
+
+::: endif
+
+#### 步长设置
+
+通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为`1`
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" step="2" />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" step="2" />
+```
+
+::: endif
+
+#### 限制输入范围
+
+通过`min`和`max`属性限制输入值的范围
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" min="5" max="8" />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" min="5" max="8" />
+```
+
+::: endif
+
+#### 限制输入整数
+
+设置`integer`属性后，输入框将限制只能输入整数
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" integer />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" integer />
+```
+
+::: endif
+
+#### 禁用状态
+
+通过设置`disabled`属性来禁用步进器，禁用状态下无法点击按钮或修改输入框
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" disabled />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" disabled />
+```
+
+::: endif
+
+#### 禁用输入框
+
+通过设置`disable-input`属性来禁用输入框，此时按钮仍然可以点击
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" disable-input />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" disable-input />
+```
+
+::: endif
+
+#### 固定小数位数
+
+通过设置`decimal-length`属性可以保留固定的小数位数
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" step="0.2" :decimal-length="1" />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" step="0.2" :decimal-length="1" />
+```
+
+::: endif
+
+#### 自定义大小
+
+通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" input-width="40px" button-size="32px" />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" input-width="40px" button-size="32px" />
+```
+
+::: endif
+
+#### 异步变更
+
+如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" async-change @change="onChange" />
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    data() {
+        return {
+            value: 1
+        };
+    },
+    methods: {
+        onChange(target, value) {
+            Toast.loading({
+                forbidClick: true
+            });
+            setTimeout(() => {
+                Toast.clear();
+                this[target] = value;
+            }, 500);
+        }
+    }
+};
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" async-change @change="onChange" />
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+
+const value = ref(1);
+
+function onChange(value) {
+    Toast.loading({
+        forbidClick: true
+    });
+    setTimeout(() => {
+        Toast.clear();
+        value.value = value;
+    }, 500);
+}
+
+const emToastRef = ref(null);
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+#### 圆角风格
+
+将 `theme` 设置为 `round` 来展示圆角风格的步进器
+
+::: ifdef M83
+
+```html
+<em-stepper :value="value" theme="round" button-size="22" disable-input />
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-stepper :model-value="value" theme="round" button-size="22" disable-input />
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数                                                                         |                    说明                    | 类型            | 默认值  |
+| :--------------------------------------------------------------------------- | :----------------------------------------: | :-------------- | :------ |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |                当前输入的值                | number / string | -       |
+| min                                                                          |                   最小值                   | number / string | `1`     |
+| max                                                                          |                   最大值                   | number / string | -       |
+| default-value                                                                |                   初始值                   | number / string | `1`     |
+| step                                                                         |          步长，每次点击时改变的值          | number / string | `1`     |
+| name                                                                         |  标识符，可以在`change`事件回调参数中获取  | number / string | -       |
+| input-width                                                                  |         输入框宽度，默认单位为`px`         | number / string | `32px`  |
+| button-size                                                                  |   按钮大小以及输入框高度，默认单位为`px`   | number / string | `28px`  |
+| decimal-length                                                               |             固定显示的小数位数             | number / string | -       |
+| theme                                                                        |         样式风格，可选值为 `round`         | string          | -       |
+| placeholder                                                                  |             输入框占位提示文字             | string          | -       |
+| integer                                                                      |             是否只允许输入整数             | boolean         | `false` |
+| disabled                                                                     |               是否禁用步进器               | boolean         | `false` |
+| disable-plus                                                                 |              是否禁用增加按钮              | boolean         | `false` |
+| disable-minus                                                                |              是否禁用减少按钮              | boolean         | `false` |
+| disable-input                                                                |               是否禁用输入框               | boolean         | `false` |
+| async-change                                                                 | 是否开启异步变更，开启后需要手动控制输入值 | boolean         | `false` |
+| show-plus                                                                    |              是否显示增加按钮              | boolean         | `true`  |
+| show-minus                                                                   |              是否显示减少按钮              | boolean         | `true`  |
+| show-input                                                                   |               是否显示输入框               | boolean         | `true`  |
+| long-press                                                                   |              是否开启长按手势              | boolean         | `true`  |
+| allow-empty                                                                  |            是否允许输入的值为空            | boolean         | `false` |
+
+#### Events
+
+| 事件名    |           说明           | 回调参数                                |
+| :-------- | :----------------------: | :-------------------------------------- |
+| change    | 当绑定值变化时触发的事件 | value: string, detail: { name: string } |
+| overlimit |  点击不可用的按钮时触发  | -                                       |
+| plus      |    点击增加按钮时触发    | -                                       |
+| minus     |    点击减少按钮时触发    | -                                       |
+| focus     |     输入框聚焦时触发     | event: Event                            |
+| blur      |     输入框失焦时触发     | event: Event                            |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-stepper"
+ 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-stepper"
+ 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/035-swipecell/346/273/221/345/212/250/345/215/225/345/205/203/346/240/274.md

@@ -0,0 +1,265 @@
+# 组件使用
+
+## swipecell 滑动单元格
+
+### 介绍
+
+-   滑动单元格组件。
+
+### 代码演示
+
+#### 基础用法
+
+`SwipeCell`组件提供了`left`和`right`两个插槽，用于定义两侧滑动区域的内容。
+
+```html
+<em-swipe-cell>
+    <template #left>
+        <em-button type="primary" square>选择</em-button>
+    </template>
+    <em-cell title="单元格" value="内容" :border="false"></em-cell>
+    <template #right>
+        <em-button type="danger" square>删除</em-button>
+        <em-button type="primary" square>收藏</em-button>
+    </template>
+</em-swipe-cell>
+```
+
+#### 自定义内容
+
+SwipeCell 内容可以嵌套任意内容，比如嵌套一个 Image
+
+```html
+<em-swipe-cell>
+    <em-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+    <template #right>
+        <em-button type="danger" square>关闭</em-button>
+    </template>
+</em-swipe-cell>
+```
+
+#### 异步关闭
+
+通过传入`before-close`回调函数，可以自定义两侧滑动内容关闭时的行为
+
+::: ifdef M83
+
+```html
+<em-swipe-cell
+    left-width="100"
+    right-width="200"
+    :before-close="beforeClose"
+    ref="swipecell"
+    @open="onOpen"
+    @close="onClose"
+    @click="onClick"
+>
+    <template #left>
+        <em-button type="primary" square>选择</em-button>
+    </template>
+    <em-cell title="单元格" value="内容" :border="false"></em-cell>
+    <template #right>
+        <em-button type="danger" square>异步关闭</em-button>
+    </template>
+</em-swipe-cell>
+<em-button type="primary" square @click="openLeft">打开左侧</em-button>
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    methods: {
+        // position 为关闭时点击的位置
+        // instance 为对应的 SwipeCell 实例
+        beforeClose({ position, instance }) {
+            switch (position) {
+                case 'left':
+                case 'cell':
+                    instance.close();
+                    break;
+                case 'right':
+                    setTimeout(() => {
+                        instance.close();
+                    }, 2000);
+                    break;
+                default:
+                    break;
+            }
+        },
+        openLeft() {
+            this.$refs.swipecell.open('left');
+        },
+        onOpen(e) {
+            Toast({
+                message: `触发open事件：${JSON.stringify(e)}`
+            });
+        },
+        onClose(e) {
+            Toast({
+                message: `触发close事件：${JSON.stringify(e)}`
+            });
+        },
+        onClick(e) {
+            Toast({
+                message: `触发click事件：${JSON.stringify(e)}`
+            });
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-swipe-cell
+    left-width="100"
+    right-width="200"
+    :before-close="beforeClose"
+    ref="swipecell"
+    @open="onOpen"
+    @close="onClose"
+    @click="onClick"
+>
+    <template #left>
+        <em-button type="primary" square>选择</em-button>
+    </template>
+    <em-cell title="单元格" value="内容" :border="false"></em-cell>
+    <template #right>
+        <em-button type="danger" square>异步关闭</em-button>
+    </template>
+</em-swipe-cell>
+<em-button type="primary" square @click="openLeft">打开左侧</em-button>
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const swipecell = ref(null);
+
+const beforeClose = ({ position, instance }) => {
+    switch (position) {
+        case 'left':
+        case 'cell':
+            instance.close();
+            break;
+        case 'right':
+            setTimeout(() => {
+                instance.close();
+            }, 2000);
+            break;
+        default:
+            break;
+    }
+};
+
+const openLeft = () => {
+    swipecell.value.open('left');
+};
+
+const onOpen = (e) => {
+    Toast({
+        message: `触发open事件：${JSON.stringify(e)}`
+    });
+};
+
+const onClose = (e) => {
+    Toast({
+        message: `触发close事件：${JSON.stringify(e)}`
+    });
+};
+
+const onClick = (e) => {
+    Toast({
+        message: `触发click事件：${JSON.stringify(e)}`
+    });
+};
+
+const emToastRef = ref(null);
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数             |               说明               | 类型            | 默认值  |
+| :--------------- | :------------------------------: | :-------------- | :------ |
+| name             |  标识符，可以在事件参数中获取到  | number / string | -       |
+| left-width       | 指定左侧滑动区域宽度，单位为`px` | number / string | `auto`  |
+| right-width      | 指定右侧滑动区域宽度，单位为`px` | number / string | `auto`  |
+| before-close     |         关闭前的回调函数         | Function        | -       |
+| disabled         |           是否禁用滑动           | boolean         | `false` |
+| stop-propagation |       是否阻止滑动事件冒泡       | boolean         | `false` |
+| threshold        |           滑动缺省距离           | Number          | `20px`  |
+
+#### Slots
+
+| 名称    |      说明      |
+| :------ | :------------: |
+| default | 自定义显示内容 |
+| left    |  左侧滑动内容  |
+| right   |  右侧滑动内容  |
+
+#### Events
+
+| 事件名 |    说明    | 回调参数                                      |
+| :----- | :--------: | :-------------------------------------------- |
+| click  | 点击时触发 | 关闭时的点击位置 (left right cell)            |
+| open   | 打开时触发 | { position: 'left' / 'right' , name: string } |
+| close  | 关闭时触发 | { position: string , name: string }           |
+
+#### beforeClose 参数
+
+`beforeClose` 的第一个参数为对象，对象中包含以下属性：
+
+| 参数名   |                   说明                   | 类型        |
+| :------- | :--------------------------------------: | :---------- |
+| name     |                  标识符                  | string      |
+| position | 关闭时的点击位置 (`left` `right` `cell`) | string      |
+| instance |    `SwipeCell` 实例，用于调用实例方法    | `SwipeCell` |
+
+#### 方法
+
+通过 `ref` 可以获取到 `SwipeCell` 实例并调用实例方法，详见组件实例方法
+
+| 方法名 |       说明       | 参数                   | 返回值 |
+| :----- | :--------------: | :--------------------- | :----- |
+| open   | 打开单元格侧边栏 | position: left / right | -      |
+| close  | 收起单元格侧边栏 | -                      | -      |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-swipe-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-swipe-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>