m8-framework-mcp 1.0.0 → 1.0.1

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

@@ -1,340 +0,0 @@
-# 组件使用
-
-## 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

@@ -1,265 +0,0 @@
-# 组件使用
-
-## 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>