m8-framework-mcp 1.0.0 → 1.0.1

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

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

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

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

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