m8-framework-mcp 1.0.0 → 1.0.1

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

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

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

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