m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/056-divider/345/210/206/345/211/262/347/272/277.md

@@ -0,0 +1,97 @@
+# 组件使用
+
+## divider 分割线
+
+### 介绍
+
+-   分割线。
+
+### 代码演示
+
+#### 基础用法
+
+默认渲染一条水平分割线
+
+```html
+<em-divider />
+```
+
+#### 展示文字
+
+通过插槽在可以分割线中间插入内容
+
+```html
+<em-divider>文字</em-divider>
+```
+
+#### 内容位置
+
+通过`content-position`指定内容所在位置
+
+```html
+<em-divider content-position="left">文字</em-divider>
+<em-divider content-position="right">文字</em-divider>
+```
+
+#### 虚线
+
+添加`dashed`属性使分割线渲染为虚线
+
+```html
+<em-divider dashed>文字</em-divider>
+```
+
+#### 自定义样式
+
+可以直接通过`style`属性设置分割线的样式
+
+```html
+<em-divider custom-style="color: #1989fa; border-color: #1989fa;padding: 0 16px;">文字</em-divider>
+```
+
+### API
+
+#### Props
+
+| 参数             |               说明               | 类型    | 默认值   |
+| :--------------- | :------------------------------: | :------ | :------- |
+| dashed           |           是否使用虚线           | boolean | `false`  |
+| hairline         |       是否使用 `0.5px` 线        | boolean | `true`   |
+| content-position | 内容位置，可选值为`left` `right` | string  | `center` |
+
+#### Slots
+
+| 名称    | 说明 |
+| :------ | :--: |
+| default | 内容 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-divider"
+ 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-divider"
+ 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/057-empty/347/251/272/347/212/266/346/200/201.md

@@ -0,0 +1,146 @@
+# 组件使用
+
+## empty 空状态
+
+### 介绍
+
+-   空状态时的占位提示。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<em-empty description="描述文字" />
+```
+
+#### 图片类型
+
+`Empty` 组件内置了多种占位图片类型，可以在不同业务场景下使用
+
+```html
+<!-- 通用错误 -->
+<em-empty image="error" description="描述文字" />
+<!-- 网络错误 -->
+<em-empty image="network" description="描述文字" />
+<!-- 搜索提示 -->
+<em-empty image="search" description="描述文字" />
+```
+
+#### 基座风格图片
+
+组件内置了基座风格的多种占位图片类型，包括下面这些类型：
+
+-   'todo'
+-   'basic-search'
+-   'schedule'
+-   'notice'
+-   'basic-network'
+-   'minimessage'
+-   'message'
+-   'mail'
+-   'logagent'
+-   'leave'
+-   'instructions'
+-   'group'
+-   'basic-error'
+-   'document'
+-   'basic-default'
+-   'contact'
+-   'announcement'
+
+```html
+<!-- 通用错误 -->
+<em-empty image="basic-error" description="发生错误" />
+<!-- 网络错误 -->
+<em-empty image="basic-network" description="网络异常" />
+<!-- 搜索提示 -->
+<em-empty image="basic-search" description="搜索内容为空" />
+```
+
+#### 自定义图片
+
+需要自定义图片时，可以在 `image` 属性中传入任意图片 `URL`
+
+```html
+<em-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="描述文字" />
+
+<style>
+    .custom-image .em-empty__image {
+        width: 90px;
+        height: 90px;
+    }
+</style>
+```
+
+#### 底部内容
+
+通过默认插槽可以在 `Empty` 组件的下方插入内容
+
+```html
+<em-empty description="描述文字">
+    <em-button round type="danger" class="bottom-button">按钮</em-button>
+</em-empty>
+
+<style>
+    .bottom-button {
+        width: 160px;
+        height: 40px;
+    }
+</style>
+```
+
+### API
+
+#### Props
+
+| 参数        |                                                说明                                                 | 类型            | 默认值    | ::: ifdef M83 weex 端支持 ::: endif |
+| :---------- | :-------------------------------------------------------------------------------------------------: | :-------------- | :-------- | :---------------------------------- |
+| image       | 图片类型，可选值为 `error` `network` `search`，以及基座风格的图片值（参考示例），支持传入图片 `URL` | string          | `default` | 是                                  |
+| image-size  |                                      图片大小，默认单位为 `px`                                      | number / string | -         | 是                                  |
+| description |                                         图片下方的描述文字                                          | string          | -         | 是                                  |
+
+#### Slots
+
+| 名称        |      说明      |
+| :---------- | :------------: |
+| default     | 自定义底部内容 |
+| image       |   自定义图标   |
+| description | 自定义描述文字 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-empty"
+ 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-empty"
+ 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/058-imagepreview/345/233/276/347/211/207/351/242/204/350/247/210.md

@@ -0,0 +1,292 @@
+# 组件使用
+
+## imagepreview 图片预览
+
+### 介绍
+
+-   图片放大预览，支持函数调用和组件调用两种方式。
+
+### 引入
+
+手动引入时的引入路径：
+
+```js
+import ImagePreview from '@components/em-image-preview/index.js';
+```
+
+ImagePreview 作为全局函数，跨端框架为其提供了全局注入的功能，使用该函数时，框架会自动引入上述路径，所以在跨端框架中使用时，不必再手动引入。
+
+### 调用方式
+
+#### 函数调用
+
+通过函数调用 imagePreview 组件时，需要在页面上放一个 imagePreview 节点，且提供一个 ref 方便函数进行查找。
+
+::: ifdef M83
+该 ref 值默认为 emImagePreview。
+::: endif
+::: ifdef M84
+该 ref 值默认为 emImagePreviewRef。
+::: endif
+
+::: ifdef M83
+
+```html
+<em-image-preview ref="emImagePreview"></em-image-preview>
+```
+
+```js
+ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-image-preview ref="emImagePreviewRef"></em-image-preview>
+```
+
+```js
+import { ref } from 'vue';
+
+const emImagePreviewRef = ref(null);
+ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
+defineExpose({
+    emImagePreviewRef
+});
+```
+
+::: endif
+
+#### 组件调用
+
+ImagePreview 也可以像常规的组件一样通过组件调用的形式来使用
+
+### 代码演示
+
+#### 基础用法
+
+直接传入图片数组，即可展示图片预览。
+
+```js
+ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']);
+```
+
+#### 传入配置项
+
+通过传入配置对象，可以指定初始图片的位置、监听关闭事件。
+
+```js
+ImagePreview({
+    images: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'],
+    startPosition: 1,
+    onClose() {
+        // do something
+    }
+});
+```
+
+#### 展示关闭按钮
+
+设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
+
+```js
+ImagePreview({
+    images: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'],
+    closeable: true
+});
+```
+
+#### 异步关闭
+
+通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 `close` 方法关闭图片预览。
+
+```js
+const instance = ImagePreview({
+    images: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'],
+    asyncClose: true
+});
+
+setTimeout(() => {
+    instance.close();
+}, 1000);
+```
+
+#### 组件调用
+
+如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式。
+
+```html
+<em-image-preview v-model="show" :images="images" @change="onChange">
+    <template v-slot:index>第{{ index }}页</template>
+</em-image-preview>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            show: false,
+            index: 0,
+            images: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
+        };
+    },
+
+    methods: {
+        onChange(index) {
+            this.index = index;
+        }
+    }
+};
+```
+
+::: endif
+
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+const show = ref(false);
+const index = ref(0);
+const images = ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'];
+
+const emImagePreviewRef = ref(null);
+
+const onChange = (index) => {
+    index.value = index;
+};
+```
+
+::: endif
+
+### API
+
+#### Options
+
+通过函数调用 `ImagePreview` 时，支持传入以下选项：
+
+| 参数名            |                                 说明                                  | 类型            | 默认值           |
+| :---------------- | :-------------------------------------------------------------------: | :-------------- | :--------------- |
+| context           | ImagePreview 节点上下文，传入后只在该$vm 节点下查找 ImagePreview 节点 | vue 实例        | 当前页面         |
+| selector          |           ImagePreview 节点的 ref，函数根据该 ref 进行查找            | string          | `emImagePreview` |
+| images            |                       需要预览的图片 `URL` 数组                       | string[]        | `[]`             |
+| startPosition     |                         图片预览起始位置索引                          | number / string | `0`              |
+| swipeDuration     |                         动画时长，单位为`ms`                          | number / string | `300`            |
+| showIndex         |                             是否显示页码                              | boolean         | `true`           |
+| showIndicators    |                          是否显示轮播指示器                           | boolean         | `false`          |
+| loop              |                           是否开启循环播放                            | boolean         | `true`           |
+| onClose           |                           关闭时的回调函数                            | Function        | -                |
+| onChange          |               切换图片时的回调函数，回调参数为当前索引                | Function        | -                |
+| onScale           |    缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象     | Function        | -                |
+| onClick           |               点击图片时的回调函数，回调参数为当前索引                | Function        | -                |
+| asyncClose        |                           是否开启异步关闭                            | boolean         | `false`          |
+| closeOnPopstate   |                       是否在页面回退时自动关闭                        | boolean         | `true`           |
+| maxZoom           |                       手势缩放时，最大缩放比例                        | number / string | `3`              |
+| minZoom           |                       手势缩放时，最小缩放比例                        | number / string | `1/3`            |
+| closeable         |                           是否显示关闭图标                            | boolean         | `false`          |
+| closeIcon         |                        关闭图标名称或图片链接                         | string          | `clear`          |
+| closeIconPosition |     关闭图标位置，可选值为`top-left` `bottom-left` `bottom-right`     | string          | `top-right`      |
+
+#### Props
+
+通过组件调用 `ImagePreview` 时，支持以下 `Props`：
+
+| 参数                |                             说明                              | 类型            | 默认值      |
+| :------------------ | :-----------------------------------------------------------: | :-------------- | :---------- |
+| images              |                   需要预览的图片 `URL` 数组                   | string[]        | `[]`        |
+| start-position      |                     图片预览起始位置索引                      | number / string | `0`         |
+| swipe-duration      |                     动画时长，单位为 `ms`                     | number / string | `500`       |
+| show-index          |                         是否显示页码                          | boolean         | `true`      |
+| show-indicators     |                      是否显示轮播指示器                       | boolean         | `false`     |
+| loop                |                       是否开启循环播放                        | boolean         | `true`      |
+| async-close         |                       是否开启异步关闭                        | boolean         | `false`     |
+| close-on-popstate   |                   是否在页面回退时自动关闭                    | boolean         | `true`      |
+| max-zoom            |                   手势缩放时，最大缩放比例                    | number / string | `3`         |
+| min-zoom            |                   手势缩放时，最小缩放比例                    | number / string | `1/3`       |
+| closeable           |                       是否显示关闭图标                        | boolean         | `false`     |
+| close-icon          |                    关闭图标名称或图片链接                     | string          | `clear`     |
+| close-icon-position | 关闭图标位置，可选值为`top-left` `bottom-left` `bottom-right` | string          | `top-right` |
+
+#### Events
+
+通过组件调用 `ImagePreview` 时，支持以下事件：
+
+| 事件   |          说明          | 回调参数                                       |
+| :----- | :--------------------: | :--------------------------------------------- |
+| close  |       关闭时触发       | { index: 索引, url: 图片链接 }                 |
+| closed | 关闭且且动画结束后触发 | -                                              |
+| change |   切换当前图片时触发   | index: 当前图片的索引                          |
+| scale  |   缩放当前图片时触发   | { index: 当前图片的索引, scale: 当前缩放的值 } |
+| click  |     点击图片时触发     | index: 当前图片的索引                          |
+
+#### 方法
+
+通过 `ref` 可以获取到 `ImagePreview` 实例并调用实例方法，详见组件实例方法。
+
+| 方法名  |      说明      | 参数                            | 返回值 |
+| :------ | :------------: | :------------------------------ | :----- |
+| swipeTo | 切换到指定位置 | index: number, options: Options | -      |
+
+##### swipeTo Options 格式
+
+| 名称      |     说明     | 类型      |
+| :-------- | :----------: | :-------- |
+| immediate | 是否跳过动画 | `boolean` |
+
+#### Slots
+
+通过组件调用 `ImagePreview` 时，支持以下插槽：
+
+| 名称  | 说明                           |
+| :---- | :----------------------------- |
+| index | 自定义页码内容                 |
+| cover | 自定义覆盖在图片预览上方的内容 |
+
+#### onClose 回调参数
+
+| 参数名 | 说明             | 类型   |
+| :----- | :--------------- | :----- |
+| url    | 当前图片 URL     | string |
+| index  | 当前图片的索引值 | number |
+
+#### onScale 回调参数
+
+| 参数名 | 说明             | 类型   |
+| :----- | :--------------- | :----- |
+| index  | 当前图片的索引值 | number |
+| scale  | 当前图片的缩放值 | number |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-image-preview"
+ 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-preview"
+ 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/059-lazyload/346/207/222/345/212/240/350/275/275.md

@@ -0,0 +1,120 @@
+# 组件使用
+
+## lazyload 懒加载
+
+### 介绍
+
+-   懒加载组件。
+
+注：在微信和支付宝小程序下，页面上需要添加`onPageScroll`函数用于监听页面滚动，否则该组件会失效。
+
+### 代码演示
+
+#### 基础用法
+
+将需要懒加载的内容放在`em-lazy-component`标签中，即可实现该部分内容的懒加载。
+
+注：图片的懒加载建议直接使用`em-image`提供的`lazy-load`属性，以下仅作示例。
+
+```html
+<em-lazy-component>
+    <img v-for="img in imageList" :src="img" :key="img" />
+</em-lazy-component>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            imageList: [
+                'https://img.yzcdn.cn/vant/apple-1.jpg',
+                'https://img.yzcdn.cn/vant/apple-2.jpg',
+                'https://img.yzcdn.cn/vant/apple-3.jpg',
+                'https://img.yzcdn.cn/vant/apple-4.jpg'
+            ]
+        };
+    },
+    // #ifdef MP-WEIXIN || MP-ALIPAY
+    onPageScroll() {}
+    // #endif
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+import { onPageScroll } from '@dcloudio/uni-app';
+const imageList = ref([
+    'https://img.yzcdn.cn/vant/apple-1.jpg',
+    'https://img.yzcdn.cn/vant/apple-2.jpg',
+    'https://img.yzcdn.cn/vant/apple-3.jpg',
+    'https://img.yzcdn.cn/vant/apple-4.jpg'
+]);
+
+// #ifdef MP-WEIXIN || MP-ALIPAY
+const onPageScroll = () => {};
+// #endif
+```
+
+::: endif
+
+#### 背景图懒加载
+
+背景图懒加载需要使用`background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
+
+设置`background-image`时表示只有背景图懒加载。
+
+```html
+<em-lazy-component
+    v-for="img in imageList"
+    :background-image="img"
+    :key="img"
+    custom-style="height: 250px; width: 100%; margin-bottom: 20px; background-size: 100%;"
+>
+    内容
+</em-lazy-component>
+```
+
+### API
+
+#### Options
+
+| 参数             |                     说明                     | 类型          | 默认值 |
+| :--------------- | :------------------------------------------: | :------------ | :----- |
+| preload          |               预加载高度的比例               | string/number | `1.1`  |
+| background-image | 需要懒加载的背景图片，此时只对背景图片懒加载 | string        | -      |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-lazy-component"
+ 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-lazy-component"
+ 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>