m8-framework-mcp 1.0.0 → 1.0.3

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/060-skeleton/351/252/250/346/236/266/345/261/217.md

@@ -1,114 +0,0 @@
-# 组件使用
-
-## skeleton 骨架屏
-
-### 介绍
-
--   骨架屏。
-
-::: ifdef M83
-
--   `v8.3.11`开始支持 weex 端使用
-
-::: endif
-
-### 代码演示
-
-#### 基础用法
-
-通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数
-
-```html
-<em-skeleton title :row="3" />
-```
-
-#### 显示头像
-
-通过`avatar`属性显示头像占位图
-
-```html
-<em-skeleton title avatar :row="3" />
-```
-
-#### 展示子组件
-
-将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件
-
-```html
-<em-skeleton title avatar :row="3" :loading="loading">
-    <div>实际内容</div>
-</em-skeleton>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            loading: true
-        };
-    },
-    mounted() {
-        this.loading = false;
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref, onMounted } from 'vue';
-
-const loading = ref(true);
-
-onMounted(() => {
-    loading.value = false;
-});
-```
-::: endif
-
-### API
-
-#### Props
-
-| 参数         |                               说明                               | 类型                                  | 默认值  | ::: ifdef M83 weex 端支持 ::: endif |
-| :----------- | :--------------------------------------------------------------: | :------------------------------------ | :------ | :---------------------------------- |
-| row          |                          段落占位图行数                          | number / string                       | `0`     | 是                                  |
-| row-width    | 段落占位图宽度，可传数组来设置每一行的宽度, 传数字时默认是百分比 | number / string / (number / string)[] | `100%`  | 是                                  |
-| title        |                        是否显示标题占位图                        | boolean                               | `false` | 是                                  |
-| avatar       |                        是否显示头像占位图                        | boolean                               | `false` | 是                                  |
-| loading      |          是否显示骨架屏，传 `false` 时会展示子组件内容           | boolean                               | `true`  | 是                                  |
-| animate      |                           是否开启动画                           | boolean                               | `true`  | 是                                  |
-| round        |                  是否将标题和段落显示为圆角风格                  | boolean                               | `false` | 是                                  |
-| title-width  |               标题占位图宽度，传数字时默认是百分比               | number / string                       | `40%`   | 是                                  |
-| avatar-size  |              头像占位图大小，传数字时默认单位为`px`              | number / string                       | `32px`  | 是                                  |
-| avatar-shape |                 头像占位图形状，可选值为`square`                 | string                                | `round` | 是                                  |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-skeleton"
- 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-skeleton"
- 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/061-steps/346/255/245/351/252/244/346/235/241.md

@@ -1,119 +0,0 @@
-# 组件使用
-
-## steps 步骤条
-
-### 介绍
-
--   步骤条。
-
-### 代码演示
-
-#### 基础用法
-
-`active`属性表示当前步骤的索引，从 `0` 起计
-
-```html
-<em-steps :active="active">
-    <em-step>买家下单</em-step>
-    <em-step>商家接单</em-step>
-    <em-step>买家提货</em-step>
-    <em-step>交易完成</em-step>
-</em-steps>
-```
-
-#### 自定义样式
-
-可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色
-
-```html
-<em-steps :active="active" active-icon="success" active-color="#38f" inactive-color="#f00">
-    <em-step>买家下单</em-step>
-    <em-step>商家接单</em-step>
-    <em-step>买家提货</em-step>
-    <em-step>交易完成</em-step>
-</em-steps>
-```
-
-#### 竖向步骤条
-
-可以通过设置`direction`属性来改变步骤条的显示方向
-
-```html
-<em-steps direction="vertical" :active="active">
-    <em-step>
-        <h5>【城市】物流状态1</h5>
-        <p>2016-07-12 12:40</p>
-    </em-step>
-    <em-step>
-        <h5>【城市】物流状态2</h5>
-        <p>2016-07-11 10:00</p>
-    </em-step>
-    <em-step>
-        <h5>【城市】物流状态3</h5>
-        <p>2016-07-11 10:00</p>
-    </em-step>
-    <em-step>
-        <h5>快件已发货</h5>
-        <p>2016-07-10 09:30</p>
-    </em-step>
-</em-steps>
-```
-
-### API
-
-#### Steps Props
-
-| 参数           |                                     说明                                      | 类型            | 默认值       |
-| :------------- | :---------------------------------------------------------------------------: | :-------------- | :----------- |
-| active         |                                   当前步骤                                    | number / string | `0`          |
-| direction      |                         显示方向，可选值为 `vertical`                         | string          | `horizontal` |
-| active-color   |                                 激活状态颜色                                  | string          | `#36B389`    |
-| inactive-color |                                未激活状态颜色                                 | string          | `#999`       |
-| active-icon    |                    激活状态底部图标，可选值见 `Icon` 组件                     | string          | `checked`    |
-| inactive-icon  |                   未激活状态底部图标，可选值见 `Icon` 组件                    | string          | -            |
-| finish-icon    | 已完成步骤对应的底部图标，优先级高于 `inactive-icon`，可选值见 `em-icon` 组件 | string          | -            |
-
-#### Step Slots
-
-| 名称         |                           说明                            |
-| :----------- | :-------------------------------------------------------: |
-| activeIcon   |                    自定义激活状态图标                     |
-| inactiveIcon |                   自定义未激活状态图标                    |
-| finishIcon   | 自定义已完成步骤对应的底部图标，优先级高于 `inactiveIcon` |
-
-#### Steps Events
-
-| 事件名     |            说明            |   回调参数    |
-| :--------- | :------------------------: | :-----------: |
-| click-step | 点击步骤的标题或图标时触发 | index: number |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-steps"
- 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-steps"
- 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/062-sticky/347/262/230/346/200/247/345/270/203/345/261/200.md

@@ -1,208 +0,0 @@
-# 组件使用
-
-## sticky 粘性布局
-
-### 介绍
-
--   `Sticky` 组件与 `CSS` 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
-
-注：
-
-1. 在微信和支付宝小程序下，页面上需要添加`onPageScroll`函数用于监听页面滚动，否则该组件会失效。
-
-2. 设置容器时，需要借助组件提供的方法进行设置。
-
-### 代码演示
-
-#### 基础用法
-
-将内容包裹在`Sticky`组件内即可
-
-```html
-<em-sticky>
-    <em-button type="primary">基础用法</em-button>
-</em-sticky>
-```
-
-#### 吸顶距离
-
-通过`offset-top`属性可以设置组件在吸顶时与顶部的距离
-
-```html
-<em-sticky :offset-top="50">
-    <em-button type="info">吸顶距离</em-button>
-</em-sticky>
-```
-
-#### 指定容器
-
-通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部。
-
-由于微信小程序中，自定义组件获取节点信息受限，所以为了方便获取容器的位置信息，需要借助组件提供的方法`wrapFunc`设置容器。
-
-```html
-<div :id="id" style="height: 150px; background-color: #fff">
-    <em-sticky ref="emSticky" :container="container">
-        <em-button type="warning" custom-style="margin-left: 215px;">指定容器</em-button>
-    </em-sticky>
-</div>
-```
-
-::: ifdef M83
-
-```js
-export default {
-    data() {
-        return {
-            id: 'container-id',
-            container: ''
-        };
-    },
-    methods: {
-        getContainer() {
-            if (this.container) {
-                // 若已注册过方法，需要将该方法删除
-                this.$refs.emSticky.releaseFunc(this.container);
-            }
-            let selector = `#${this.id}`;
-            // wrapFunc 会将传入的方法注册到一个内部对象上，再将方法的key返回
-            // sticky组件则根据这个key查找对应的方法，获取容器节点
-            this.container = this.$refs.emSticky.wrapFunc(() => {
-                // 传入的方法中需要返回容器的 NodesRef 对象实例
-                let c;
-
-                // #ifndef MP-ALIPAY
-                c = uni.createSelectorQuery().in(this).select(selector);
-                // #endif
-                // #ifdef MP-ALIPAY
-                c = uni.createSelectorQuery().select(selector);
-                // #endif
-
-                return c;
-            });
-        }
-    },
-    mounted() {
-        this.getContainer();
-    },
-    destroy() {
-        if (this.container) {
-            // 组件销毁时也需要释放对应的方法
-            this.$refs.emSticky.releaseFunc(this.container);
-        }
-    },
-    // #ifdef MP-WEIXIN || MP-ALIPAY
-    // 微信/支付宝小程序下的滚动事件,如不加,则在微信/支付宝环境下不可滚动
-    onPageScroll() {}
-    // #endif
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { onPageScroll } from '@dcloudio/uni-app';
-
-const id = 'container-id';
-const container = ref('');
-const emSticky = ref(null);
-
-const getContainer = () => {
-    if (container.value) {
-        // 若已注册过方法，需要将该方法删除
-        emSticky.value.releaseFunc(container.value);
-    }
-    let selector = `#${id}`;
-    // wrapFunc 会将传入的方法注册到一个内部对象上，再将方法的key返回
-    // sticky组件则根据这个key查找对应的方法，获取容器节点
-    container.value = emSticky.value.wrapFunc(() => {
-        // 传入的方法中需要返回容器的 NodesRef 对象实例
-        let c;
-
-        // #ifndef MP-ALIPAY
-        c = uni.createSelectorQuery().in(this).select(selector);
-        // #endif
-        // #ifdef MP-ALIPAY
-        c = uni.createSelectorQuery().select(selector);
-        // #endif
-
-        return c;
-    });
-};
-
-onMounted(() => {
-    getContainer();
-});
-
-onBeforeUnmount(() => {
-    if (container.value) {
-        // 组件销毁时也需要释放对应的方法
-        emSticky.value.releaseFunc(container.value);
-    }
-});
-
-// #ifdef MP-WEIXIN || MP-ALIPAY
-// 微信/支付宝小程序下的滚动事件,如不加,则在微信/支付宝环境下不可滚动
-const onPageScroll = () => {};
-// #endif
-```
-
-::: endif
-
-### API
-
-#### Props
-
-| 参数       |                             说明                              | 类型            | 默认值 |
-| :--------- | :-----------------------------------------------------------: | :-------------- | :----- |
-| offset-top | 吸顶时与顶部的距离，支持 `px` `vw` `rem` `vh` 单位，默认 `px` | number / string | `0`    |
-| z-index    |                      吸顶时的 `z-index`                       | number / string | `99`   |
-| container  |                           指定容器                            | string          | -      |
-
-#### Events
-
-| 事件名 |         说明         | 回调参数                                       |
-| :----- | :------------------: | :--------------------------------------------- |
-| change | 当吸顶状态改变时触发 | isFixed: boolean                               |
-| scroll |      滚动时触发      | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
-
-#### 方法
-
-| 事件名      |                      说明                      | 参数         |
-| :---------- | :--------------------------------------------: | :----------- |
-| wrapFunc    | 将传入的方法注册到内部对象上，并返回对应的 key | cb: Function |
-| releaseFunc |           从内部对象中删除对应的方法           | key: string  |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-sticky"
- 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-sticky"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-
- <style>
- 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/063-indexbar/347/264/242/345/274/225/346/240/217.md

@@ -1,161 +0,0 @@
-# 组件使用
-
-## indexbar 索引栏
-
-### 介绍
-
--   索引栏。
-
-### 代码演示
-
-#### 基础用法
-
-点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置
-
-```html
-<view class="container">
-    <em-index-bar>
-        <em-index-anchor index="A"></em-index-anchor>
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-        <em-index-anchor index="B"></em-index-anchor>
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-
-        ...
-    </em-index-bar>
-</view>
-```
-
-#### 自定义索引列表
-
-可以通过`index-list`属性自定义展示的索引字符列表，
-
-```html
-<view class="container">
-    <em-index-bar :index-list="indexList">
-        <em-index-anchor index="A">标题1</em-index-anchor>
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-        <em-index-anchor index="B">标题2</em-index-anchor>
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-        <em-cell title="文本" />
-
-        ...
-    </em-index-bar>
-</view>
-```
-
-::: ifdef M83
-
-```js
-export default {
-    data() {
-        return {
-            indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-        };
-    }
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from 'vue';
-const indexList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-```
-
-::: endif
-
-### API
-
-#### IndexBar Props
-
-| 参数              |            说明            | 类型                | 默认值    |
-| :---------------- | :------------------------: | :------------------ | :-------- |
-| index-list        |        索引字符列表        | string[] / number[] | `A-Z`     |
-| z-index           |       `z-index` 层级       | number / string     | `1`       |
-| sticky            |    是否开启锚点自动吸顶    | boolean             | `true`    |
-| sticky-offset-top | 锚点自动吸顶时与顶部的距离 | number              | `0`       |
-| highlight-color   |      索引字符高亮颜色      | string              | `#07c160` |
-
-#### IndexAnchor Props
-
-| 参数   |             说明              | 类型            | 默认值 |
-| :----- | :---------------------------: | :-------------- | :----- |
-| index  |       列表锚点文本内容        | number / string | -      |
-| height |    列表锚点高度，单位`px`     | number / string | `32`   |
-| size   | 列表锚点文字大小，单位默认 px | number / string | `14`   |
-
-#### IndexBar Events
-
-| 事件名 |             说明             | 回调参数               |
-| :----- | :--------------------------: | :--------------------- |
-| select |        选中字符时触发        | index: number / string |
-| change | 当前高亮的索引字符变化时触发 | index: number / string |
-
-#### IndexAnchor Slots
-
-| 名称    |               说明               |
-| :------ | :------------------------------: |
-| default | 锚点位置显示内容，默认为索引字符 |
-
-#### IndexBar 方法
-
-通过 `ref` 可以获取到 `IndexBar` 实例并调用实例方法，详见组件实例方法。
-
-| 方法名   |                                       说明                                        | 参数                   | 返回值 |
-| :------- | :-------------------------------------------------------------------------------: | :--------------------- | :----- |
-| scrollTo |                                  滚动到指定锚点                                   | index: number / string | -      |
-| resize   | 重新计算索引栏位置，主要用于微信小程序中元素为展示却先调用了组件的`mounted`的问题 | -                      | -      |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-indexbar"
- 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-indexbar"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-
- <style>
- .container {
-    height: 100vh;
-    overflow: hidden;
-    .list {
-        display: flex;
-        flex-direction: row;
-        padding: 8px 0px;
-        align-items: center;
-        font-size: 16px;
-        margin-left: 10px;
-        color: #303133;
-    }
-}
- </style>
-  <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>