m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/042-minirefresh/344/270/213/346/213/211/345/210/267/346/226/260.md

@@ -0,0 +1,337 @@
+# 组件使用
+
+## minirefresh 下拉刷新
+
+### 介绍
+
+-   M8 下拉刷新组件
+
+### 代码演示
+
+#### 基础演示
+
+::: ifdef M83
+
+```html
+<em-minirefresh ref="scrollPull" :page-size="pageSize" :url="url" :request-data="dataRequest" :change-data="dataChange">
+    <!-- 定义列表模板内容 -->
+    <template v-slot:default="{ listData }">
+        <!--listData为经过dataChange处理的返回参数 -->
+        <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
+    </template>
+</em-minirefresh>
+```
+
+```js
+export default {
+    data() {
+        return {
+            // 请求的url
+            url: `${Config.serverUrl}/rest/list`,
+            // 接口请求的初始页面
+            initPageIndex: 0,
+            // 每次请求的分页大小
+            pageSize: 15
+        };
+    },
+    methods: {
+        // 请求参数函数
+        dataRequest(currPage, pageSize) {
+            const data = {
+                // keyword: this.keyWord,
+                // 当前搜索的第几页，数字类型
+                currentpageindex: currPage,
+                // 每页显示记录条数，数字类型
+                pagesize: pageSize
+            };
+            const requestData = {
+                params: JSON.stringify(data)
+            };
+
+            return requestData;
+        },
+        // 修改数据返回参数, res为接口返回参数，requestData为请求入参（组件库v1.0.6版本开始支持）
+        dataChange(res, requestData) {
+            let data;
+
+            if (res.status.code === 1) {
+                data = res.custom.infolist;
+            } else {
+                console.error('接口返回参数错误');
+            }
+
+            return data;
+        },
+        // 列表模板绑定的点击事件函数
+        itemClick(item) {
+            console.log(item);
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-minirefresh ref="scrollPull" :page-size="pageSize" :url="url" :request-data="dataRequest" :change-data="dataChange">
+    <template #default="{ listData }">
+        <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
+    </template>
+</em-minirefresh>
+```
+
+```js
+import { ref } from 'vue';
+// 请求的url
+const url = `${Config.serverUrl}/rest/list`;
+// 接口请求的初始页面
+const initPageIndex = ref(0);
+// 每次请求的分页大小
+const pageSize = ref(15);
+
+// 请求参数函数
+const dataRequest = (currPage, pageSize) => {
+    const data = {
+        // keyword: this.keyWord,
+        // 当前搜索的第几页，数字类型
+        currentpageindex: currPage,
+        // 每页显示记录条数，数字类型
+        pagesize: pageSize
+    };
+    const requestData = {
+        params: JSON.stringify(data)
+    };
+
+    return requestData;
+};
+
+// 修改数据返回参数, res为接口返回参数，requestData为请求入参（组件库v1.0.6版本开始支持）
+const dataChange = (res, requestData) => {
+    let data;
+
+    if (res.status.code === 1) {
+        data = res.custom.infolist;
+    } else {
+        console.error('接口返回参数错误');
+    }
+
+    return data;
+};
+
+// 列表模板绑定的点击事件函数
+const itemClick = (item) => {
+    console.log(item);
+};
+```
+
+::: endif
+
+#### 自定义请求数据源
+
+`useCustomRequest` 参数为`true`时，开发者可自定义获取数据源，下拉刷新组件通过`request`事件触发数据源获取。
+
+`page-size`必须设置，因为该参数影响组件加载结束判定，不设置时该参数默认为`10`。
+
+::: ifdef M83
+
+```html
+<em-minirefresh :page-size="pageSize" useCustomRequest @request="request">
+    <template v-slot:default="{ listData }">
+        <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
+    </template>
+</em-minirefresh>
+```
+
+```js
+export default {
+    data() {
+        return {
+            // 每次请求的分页大小
+            pageSize: 15
+        };
+    },
+    methods: {
+        // 自定义请求数据方法，options包含currPageIndex，currPageSize等参数
+        // 数据通过 successcb 方法再回调给下拉刷新组件
+        request(options, successcb, errorcb) {
+            setTimeout(() => {
+                let res = [
+                    {
+                        title: '选择标题样式,在这里更改标题的排列方式'
+                    },
+                    {
+                        title: '选择标题'
+                    }
+                ];
+
+                successcb(res);
+            }, 1000);
+        },
+        // 列表模板绑定的点击事件函数
+        itemClick(item) {
+            console.log(item);
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-minirefresh :page-size="pageSize" useCustomRequest @request="request">
+    <template v-slot:default="{ listData }">
+        <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
+    </template>
+</em-minirefresh>
+```
+
+```js
+import { ref } from 'vue';
+// 每次请求的分页大小
+const pageSize = ref(15);
+
+// 自定义请求数据方法，options包含currPageIndex，currPageSize等参数
+// 数据通过 successcb 方法再回调给下拉刷新组件
+const request = (options, successcb, errorcb) => {
+    setTimeout(() => {
+        let res = [
+            {
+                title: '选择标题样式,在这里更改标题的排列方式'
+            },
+            {
+                title: '选择标题'
+            }
+        ];
+
+        successcb(res);
+    }, 1000);
+};
+
+// 列表模板绑定的点击事件函数
+const itemClick = (item) => {
+    console.log(item);
+};
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数                                          |                                                 说明                                                 | 类型          | 默认值                              |
+| :-------------------------------------------- | :--------------------------------------------------------------------------------------------------: | :------------ | :---------------------------------- |
+| url                                           |                                              请求的 url                                              | string        | -                                   |
+| type                                          |                                               请求类型                                               | string        | `POST`                              |
+| initPageIndex                                 |                           接口请求的初始页面,根据不同项目服务器配置而不同                            | number        | 0                                   |
+| page-size                                     |                                          每次请求的分页大小                                          | number        | 10                                  |
+| <span style="color: red;">request-data</span> |             请求的数据，为函数时请将数据返回出去（为了兼容小程序端，命名方式与原本不同）             | object        | -                                   |
+| <span style="color: red;">change-data</span>  |            请求返回参数，请将列表数组数据返回出去（为了兼容小程序端，命名方式与原本不同）            | object        | -                                   |
+| timeout                                       |                                        每次请求的最大超时时间                                        | number        | `6000`                              |
+| delay                                         |                                      延迟请求的时间，单位为毫秒                                      | number        | `0`                                 |
+| contentType                                   |                                      下拉刷新请求的 contentType                                      | string        | `application/x-www-form-urlencoded` |
+| headers                                       |                                           自定义请求头内容                                           | object        |                                     |
+| isAutoProxy                                   |                                       是否使用 token 自动代理                                        | boolean       | true                                |
+| downPullingText                               |                                           下拉过程提示文案                                           | string        | `下拉即可刷新...`                   |
+| downLoosingText                               |                                         下拉释放过程提示文案                                         | string        | `释放即可刷新...`                   |
+| downLoadingText                               |                                           加载过程提示文案                                           | string        | `加载中...`                         |
+| downSuccessText                               |                                           刷新成功提示文案                                           | string        | `刷新成功`                          |
+| downErrorText                                 |                                           刷新失败提示文案                                           | string        | `刷新失败`                          |
+| downSuccessDuration                           |                                       刷新成功提示展示时长(ms)                                       | string/number | `500`                               |
+| downAnimationDuration                         |                                             动画时长(ms)                                             | string/number | `300`                               |
+| downHeadHeight                                |                                             顶部内容高度                                             | string/number | `50`                                |
+| downDisabled                                  |                                           是否禁用下拉刷新                                           | boolean       | `false`                             |
+| downImmediatePull                             |                                    是否在初始化时立即执行下拉刷新                                    | boolean       | `true`                              |
+| upOffset                                      |                             滚动条与底部距离小于 offset 时触发 load 事件                             | string/number | `300`                               |
+| upLoadingText                                 |                                       上拉加载过程中的提示文案                                       | string        | `加载中...`                         |
+| upFnishedText                                 |                                       上拉加载完成后的提示文案                                       | string        | `没有更多了`                        |
+| upErrorText                                   |                                          加载失败的提示文案                                          | string        | -                                   |
+| upImmediateCheck                              |                                  是否在初始化时立即执行滚动位置检查                                  | boolean       | `false`                             |
+| upDirection                                   |                                   滚动触发加载的方向，可选值为 up                                    | boolean       | `down`                              |
+| ulMinHeight                                   |                                         下拉刷新容器最小高度                                         | string        | `-`                                 |
+| keeppos                                       |              是否需要保持刷新前的滚动位置，需要刷新组件最外层设置固定高度并且内容可滚动              | boolean       | `false`                             |
+| description                                   |                                    列表为空时, 默认缺省图文字描述                                    | string        | `暂无数据`                          |
+| image                                         |         列表为空时, 默认缺省图图标, 可选值为 `error` `network` `search`，支持传入图片 `URL`          | string        | `default`                           |
+| top                                           |                                              顶部偏移量                                              | string/number | `0`                                 |
+| bottom                                        |                                              底部偏移量                                              | string/number | `0`                                 |
+| otherOptions                                  |                                        ajax 其他自定义配置项                                         | object        | `-`                                 |
+| useCustomRequest `v8.3.7-beta.0`              |                                        是否自定义请求数据方法                                        | boolean       | `false`                             |
+| noMoreSize `v8.3.19-beta.0`                   | 如果列表已加载不出更多数据，底部是否展示无更多数据提示取决于，列表的总数量是否大于等于`noMoreSize`条 | number/string | `5`                                 |
+
+#### 事件
+
+| 事件名                                         |                       说明                       | 回调参数                                                         |
+| :--------------------------------------------- | :----------------------------------------------: | :--------------------------------------------------------------- |
+| request `v8.3.7-beta.0`                        | 刷新时触发，仅在`useCustomRequest`为`true`时生效 | options: 请求相关的参数，successcb: 成功回调， errorcb: 失败回调 |
+| ::: ifdef M84 update:listData `v8.4` ::: endif |              用于同步 listData 事件              | listData: 数据列表                                               |
+| ::: ifdef M84 update:distance `v8.4` ::: endif |              用于同步 distance 事件              | distance: 距离                                                   |
+
+#### 方法
+
+通过 ref 可以获取到 minirefresh 实例并调用实例方法，详见组件实例方法
+
+| 名称    |         说明         | 参数                                             | 返回值 |
+| :------ | :------------------: | :----------------------------------------------- | :----- |
+| refresh | 手动触发下拉刷新功能 | { animationType: 传值`noAnimation`代表无感刷新 } | -      |
+| check   | 手动触发上拉加载功能 | -                                                | -      |
+
+#### Slots
+
+插槽，用于个性化实现内容
+
+| 名称        |           说明           |         SlotProps          |
+| :---------- | :----------------------: | :------------------------: |
+| default     |    自定义列表模板内容    |   { listData: 列表数据 }   |
+| down-Normal |   非下拉状态时顶部内容   |             -              |
+| downPulling |    下拉过程中顶部内容    | { distance: 当前下拉距离 } |
+| downLoosing |  下拉释放过程中顶部内容  | { distance: 当前下拉距离 } |
+| downLoading |  下拉加载过程中顶部内容  | { distance: 当前下拉距离 } |
+| downSuccess | 下拉刷新成功顶部提示内容 |             -              |
+| upHeader    |   自定义底部加载中内容   |             -              |
+| upFinished  |  自定义加载完成后的提示  |             -              |
+| upError     |  自定义加载失败后的提示  |             -              |
+| empty       |      空列表内容提示      |             -              |
+
+::: ifdef M83
+
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-minirefresh"
+ 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-minirefresh"
+ 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>
+
+### 常见问题
+
+为什么下拉刷新加载后会立即触发刷新事件？
+
+> 下拉刷新初始化后会自动触发一次刷新事件，用于加载第一屏的数据，这个特性可以通过 upImmediateCheck 属性或 downImmediatePull 关闭。
+
+如何手动实现第一次的下拉刷新请求?
+
+![](https://pic.downk.cc/item/5fe012953ffa7d37b3207d2f.jpg)

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/043-layout/345/270/203/345/261/200.md

@@ -0,0 +1,150 @@
+# 组件使用
+
+## layout 布局
+
+### 介绍
+
+-   `Layout` 提供了`em-row`和`em-col`两个组件来进行行列布局。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+`Layout` 组件提供了 24 列栅格，通过在`Col`上添加`span`属性设置列所占的宽度百分比。此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 `span` 相同。
+
+```html
+<em-row>
+    <em-col span="8">span: 8</em-col>
+    <em-col span="8">span: 8</em-col>
+    <em-col span="8">span: 8</em-col>
+</em-row>
+
+<em-row>
+    <em-col span="4">span: 4</em-col>
+    <em-col span="10" offset="4">offset: 4, span: 10</em-col>
+</em-row>
+
+<em-row>
+    <em-col offset="12" span="12">offset: 12, span: 12</em-col>
+</em-row>
+```
+
+#### 设置列元素间距
+
+通过`gutter`属性可以设置列元素之间的间距，默认间距为 `0`
+
+```html
+<em-row gutter="20">
+    <em-col span="8">span: 8</em-col>
+    <em-col span="8">span: 8</em-col>
+    <em-col span="8">span: 8</em-col>
+</em-row>
+```
+
+#### Flex 布局
+
+将 `type` 属性设置为 `flex` 可以启用 `flex` 布局，便于进行灵活的对齐
+
+```html
+<!-- 左对齐 -->
+<em-row type="flex">
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+</em-row>
+
+<!-- 居中 -->
+<em-row type="flex" justify="center">
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+</em-row>
+
+<!-- 右对齐 -->
+<em-row type="flex" justify="end">
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+</em-row>
+
+<!-- 两端对齐 -->
+<em-row type="flex" justify="space-between">
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+</em-row>
+
+<!-- 每个元素的两侧间隔相等 -->
+<em-row type="flex" justify="space-around">
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+    <em-col span="6">span: 6</em-col>
+</em-row>
+```
+
+### API
+
+#### Row Props
+
+| 参数    | 说明                                                                        | 类型            | 默认值  | ::: ifdef M83 weex 端支持 ::: endif                  |
+| :------ | :-------------------------------------------------------------------------- | :-------------- | :------ | :--------------------------------------------------- |
+| type    | 布局方式，可选值为`flex`                                                    | string          | -       | 否 ::: ifdef M83（weex 端只支持 flex 布局）::: endif |
+| gutter  | 列元素之间的间距（单位为 `px`）                                             | number / string | `0`     | 是                                                   |
+| justify | `Flex` 主轴对齐方式，可选值为 `end` `center` `space-around` `space-between` | string          | `start` | 是                                                   |
+| align   | `Flex` 交叉轴对齐方式，可选值为 `center` `bottom`                           | string          | `top`   | 是                                                   |
+
+#### Col Props
+
+| 参数   | 说明           | 类型            | 默认值 | ::: ifdef M83 weex 端支持 ::: endif |
+| :----- | :------------- | :-------------- | :----- | :---------------------------------- |
+| span   | 列元素宽度     | number / string | `24`   | 是                                  |
+| offset | 列元素偏移距离 | number / string | `0`    | 是                                  |
+
+#### Row Events
+
+| 事件名 | 说明       | 回调参数     |
+| :----- | :--------- | :----------- |
+| click  | 点击时触发 | event: Event |
+
+#### Col Events
+
+| 事件名 | 说明       | 回调参数     |
+| :----- | :--------- | :----------- |
+| click  | 点击时触发 | event: Event |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-layout"
+ 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-layout"
+ 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/044-image/345/233/276/347/211/207.md

@@ -0,0 +1,144 @@
+# 组件使用
+
+## image 图片
+
+### 介绍
+
+-   增强版的 `img` 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`等原生属性。
+
+```html
+<em-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+#### 填充模式
+
+通过`fit`属性可以设置图片填充模式，可选值见下方表格
+
+```html
+<em-image width="10rem" height="10rem" fit="contain" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+#### 圆形图片
+
+通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
+
+```html
+<em-image round width="10rem" height="10rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+#### 图片懒加载
+
+设置`lazy-load`属性来开启图片懒加载
+
+```html
+<em-image width="100" height="100" lazy-load src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+#### 加载中提示
+
+`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
+
+```html
+<em-image src="https://img.yzcdn.cn/vant/cat.jpeg">
+    <template v-slot:loading>
+        <em-loading type="spinner" size="20" />
+    </template>
+</em-image>
+```
+
+#### 加载失败提示
+
+`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
+
+```html
+<em-image src="https://img.yzcdn.cn/vant/cat.jpeg">
+    <template v-slot:error>加载失败</template>
+</em-image>
+```
+
+### API
+
+#### Props
+
+| 参数         |                              说明                              | 类型            | 默认值                                   | ::: ifdef M83 weex 端支持 ::: endif |
+| :----------- | :------------------------------------------------------------: | :-------------- | :--------------------------------------- | :---------------------------------- |
+| src          |                            图片链接                            | string          | -                                        | 是                                  |
+| fit          |                          图片填充模式                          | string          | 默认为`fill`，注意：`scale-down`属性无效 | 是(支持部分)                        |
+| width        |                      宽度，默认单位为`px`                      | number / string | 100                                      | 是                                  |
+| height       |                      高度，默认单位为`px`                      | number / string | 100                                      | 是                                  |
+| radius       |                    圆角大小，默认单位为`px`                    | number / string | `0`                                      | 是                                  |
+| round        |                         是否显示为圆形                         | boolean         | `false`                                  | 是                                  |
+| lazy-load    | 是否开启图片懒加载，只针对`page`与`scroll-view`下的 image 有效 | boolean         | `false`                                  | 否                                  |
+| show-error   |                    是否展示图片加载失败提示                    | boolean         | `true`                                   | 是                                  |
+| show-loading |                     是否展示图片加载中提示                     | boolean         | `true`                                   | 是                                  |
+| error-icon   |                 失败时提示的图标名称或图片链接                 | string          | `photo-fail`                             | 是                                  |
+| loading-icon |                 加载时提示的图标名称或图片链接                 | string          | `photo`                                  | 是                                  |
+| icon-prefix  |       图标类名前缀，同 `Icon` 组件的 `class-prefix` 属性       | string          | `van-icon`                               | 否                                  |
+
+#### 图片填充模式
+
+| 名称    |                          含义                          | ::: ifdef M83 weex 端支持 ::: endif |
+| :------ | :----------------------------------------------------: | :---------------------------------- |
+| contain |      保持宽高缩放图片，使图片的长边能完全显示出来      | 是                                  |
+| cover   | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 | 是                                  |
+| fill    |                拉伸图片，使图片填满元素                | 是                                  |
+| none    |                    保持图片原有尺寸                    | 否                                  |
+
+#### Events
+
+| 事件名 |        说明        |   回调参数   |
+| :----- | :----------------: | :----------: |
+| click  |   点击图片时触发   | event: Event |
+| load   | 图片加载完毕时触发 |      -       |
+| error  | 图片加载失败时触发 |      -       |
+
+#### Slots
+
+| 名称              |            说明            |
+| :---------------- | :------------------------: |
+| default `v8.3.11` |    自定义图片下方的内容    |
+| loading           |   自定义加载中的提示内容   |
+| error             | 自定义加载失败时的提示内容 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-image"
+ 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-image"
+ 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>