m8-framework-mcp 1.0.0

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

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

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

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

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