m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/050-dropdownmenu/344/270/213/346/213/211/350/217/234/345/215/225.md

@@ -0,0 +1,265 @@
+# 组件使用
+
+## dropdownmenu 下拉菜单
+
+### 介绍
+
+-   下拉菜单。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<em-dropdown-menu>
+    <em-dropdown-item v-model="value1" :options="option1" />
+    <em-dropdown-item v-model="value2" :options="option2" />
+</em-dropdown-menu>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            value1: 0,
+            value2: 'a',
+            option1: [
+                { text: '全部商品', value: 0 },
+                { text: '新款商品', value: 1 },
+                { text: '活动商品', value: 2 }
+            ],
+            option2: [
+                { text: '默认排序', value: 'a' },
+                { text: '好评排序', value: 'b' },
+                { text: '销量排序', value: 'c' }
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const value1 = ref(0);
+const value2 = ref('a');
+const option1 = [
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活动商品', value: 2 }
+];
+const option2 = [
+    { text: '默认排序', value: 'a' },
+    { text: '好评排序', value: 'b' },
+    { text: '销量排序', value: 'c' }
+];
+```
+
+::: endif
+
+#### 自定义菜单内容
+
+通过插槽可以自定义`DropdownItem`的内容，此时需要使用实例上的`toggle`方法手动控制菜单的显示
+
+```html
+<em-dropdown-menu>
+    <em-dropdown-item v-model="value" :options="option" />
+    <em-dropdown-item title="筛选" ref="item">
+        <em-cell center title="包邮">
+            <template #rightIcon>
+                <em-switch v-model="switch1" size="24" active-color="#2e6be5" />
+            </template>
+        </em-cell>
+        <em-cell center title="团购">
+            <template #rightIcon>
+                <em-switch v-model="switch2" size="24" active-color="#2e6be5" />
+            </template>
+        </em-cell>
+        <div style="padding: 5px 16px">
+            <em-button type="danger" block round @click="onConfirm" color="#2e6be5">确认</em-button>
+        </div>
+    </em-dropdown-item>
+</em-dropdown-menu>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            value: 0,
+            switch1: false,
+            switch2: false,
+            option: [
+                { text: '全部商品', value: 0 },
+                { text: '新款商品', value: 1 },
+                { text: '活动商品', value: 2 }
+            ]
+        };
+    },
+    methods: {
+        onConfirm() {
+            this.$refs.item.toggle();
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const value = ref(0);
+const switch1 = ref(false);
+const switch2 = ref(false);
+const item = ref(null);
+const option = [
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活动商品', value: 2 }
+];
+const onConfirm = () => {
+    item.value.toggle();
+};
+```
+
+::: endif
+
+#### 自定义选中态颜色
+
+通过`active-color`属性可以自定义菜单标题和选项的选中态颜色
+
+```html
+<em-dropdown-menu active-color="red">
+    <em-dropdown-item v-model="value1" :options="option1" />
+    <em-dropdown-item v-model="value2" :options="option2" />
+</em-dropdown-menu>
+```
+
+#### 向上展开
+
+将`direction`属性值设置为 up，菜单即可向上展开
+
+```html
+<em-dropdown-menu direction="up">
+    <em-dropdown-item v-model="value1" :options="option1" />
+    <em-dropdown-item v-model="value2" :options="option2" />
+</em-dropdown-menu>
+```
+
+#### 禁用菜单
+
+```html
+<em-dropdown-menu>
+    <em-dropdown-item v-model="value1" disabled :options="option1" />
+    <em-dropdown-item v-model="value2" disabled :options="option2" />
+</em-dropdown-menu>
+```
+
+### API
+
+#### DropdownMenu Props
+
+| 参数                   | 说明                       | 类型            | 默认值    | ::: ifdef M83 weex 端支持 ::: endif |
+| :--------------------- | :------------------------- | :-------------- | :-------- | :---------------------------------- |
+| active-color           | 菜单标题和选项的选中态颜色 | string          | `#2e6be5` | 是                                  |
+| direction              | 菜单展开方向，可选值为`up` | string          | `down`    | 是                                  |
+| z-index                | 菜单栏 `z-index` 层级      | number / string | `99`      | 否                                  |
+| duration               | 动画时长，单位毫秒         | number / string | `200`     | 是                                  |
+| overlay                | 是否显示遮罩层             | boolean         | `true`    | 是                                  |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | boolean         | `true`    | 是                                  |
+
+#### DropdownItem Props
+
+| 参数                                                                         | 说明                              | 类型            | 默认值         | ::: ifdef M83 weex 端支持 ::: endif |
+| :--------------------------------------------------------------------------- | :-------------------------------- | :-------------- | :------------- | :---------------------------------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif | 当前选中项对应的 `value`          | number / string | -              | 是                                  |
+| title                                                                        | 菜单项标题                        | string          | 当前选中项文字 | 是                                  |
+| options                                                                      | 选项数组                          | Option[]        | `[]`           | 是                                  |
+| disabled                                                                     | 是否禁用菜单                      | boolean         | `false`        | 是                                  |
+| title-class                                                                  | 标题额外类名                      | string          | -              | 否                                  |
+| popup-style                                                                  | 自定义弹出层样式                  | string          | -              | 是                                  |
+| hidden                                                                       | `8.3.16` 隐藏此项菜单项与菜单标题 | boolean         | `false`        | 是                                  |
+
+#### DropdownItem Events
+
+| 事件名 | 说明                            | 回调参数 |
+| :----- | :------------------------------ | :------- |
+| change | 点击选项导致 `value` 变化时触发 | `value`  |
+| open   | 打开菜单栏时触发                | -        |
+| close  | 关闭菜单栏时触发                | -        |
+| opened | 打开菜单栏且动画结束后触发      | -        |
+| closed | 关闭菜单栏且动画结束后触发      | -        |
+
+#### DropdownItem Slots
+
+| 名称    | 说明     |
+| :------ | :------- |
+| default | 菜单内容 |
+
+#### DropdownMenu 方法
+
+通过 `ref` 可以获取到 `DropdownMenu` 实例并调用实例方法，详见组件实例方法
+
+| 方法名 | 说明         | 参数 | 返回值 |
+| :----- | :----------- | :--- | :----- |
+| close  | 关闭下拉菜单 | -    | -      |
+
+#### DropdownItem 方法
+
+通过 `ref` 可以获取到 `DropdownItem` 实例并调用实例方法，详见组件实例方法
+
+| 方法名 | 说明                                                          | 参数           | 返回值 |
+| :----- | :------------------------------------------------------------ | :------------- | :----- |
+| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | -      |
+
+#### Option 数据结构
+
+| 键名  | 说明                   | 类型            |
+| :---- | :--------------------- | :-------------- |
+| text  | 文字                   | string          |
+| value | 标识符                 | number / string |
+| icon  | 左侧图标名称或图片链接 | string          |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-dropdown-Menu"
+ 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-dropdown-Menu"
+ 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/051-notify/346/266/210/346/201/257/351/200/232/347/237/245.md

@@ -0,0 +1,203 @@
+# 组件使用
+
+## notify 消息通知
+
+### 介绍
+
+-   在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
+
+### 引入
+
+手动引入时的引入路径：
+
+```js
+import Notify from '@components/em-notify/index.js';
+```
+
+Notify 作为全局函数，跨端框架为其提供了全局注入的功能，使用该函数时，框架会自动引入上述路径，所以在跨端框架中使用时，不必再手动引入。
+
+### 代码演示
+
+#### 基础用法
+
+`Notify` 是一个函数，调用后会直接在页面中弹出相应的消息提示。
+
+需要手动在页面上放一个 notify 节点，且提供一个 ref 方便函数进行查找。
+
+::: ifdef M83
+该节点的 ref 名称默认为 `emNotify`。
+::: endif
+
+::: ifdef M84
+该节点的 ref 名称默认为 `emNotifyRef`。
+::: endif
+
+::: ifdef M83
+
+```html
+<em-notify ref="emNotify"></em-notify>
+```
+
+```js
+Notify('通知内容');
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-notify ref="emNotifyRef"></em-notify>
+```
+
+```js
+import { ref } from 'vue';
+
+const emNotifyRef = ref(false);
+Notify('通知内容');
+defineExpose({
+    emNotifyRef
+});
+```
+
+::: endif
+
+#### 通知类型
+
+支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。
+
+```js
+// 主要通知
+Notify({ type: 'primary', message: '通知\n内容' });
+
+// 成功通知
+Notify({ type: 'success', message: '通知\n内容' });
+
+// 危险通知
+Notify({ type: 'danger', message: '通知\n内容' });
+
+// 警告通知
+Notify({ type: 'warning', message: '通知\n内容' });
+```
+
+#### 自定义通知
+
+自定义消息通知的颜色和展示时长。
+
+```js
+Notify({
+    message: '自定义颜色',
+    color: '#ad0000',
+    background: '#ffe1e1'
+});
+
+Notify({
+    message: '自定义时长',
+    duration: 1000
+});
+```
+
+#### 组件调用
+
+如果需要在 `Notify` 内嵌入组件或其他自定义内容，可以使用组件调用的方式。
+
+```html
+<em-button type="primary" text="组件调用" @click="showNotify" />
+<em-notify v-model="show" type="success">
+    <em-icon name="bell" style="margin-right: 4px" />
+    <span>通知内容</span>
+</em-notify>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            show: false
+        };
+    },
+    methods: {
+        showNotify() {
+            this.show = true;
+            setTimeout(() => {
+                this.show = false;
+            }, 2000);
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const show = ref(false);
+const showNotify = () => {
+    show.value = true;
+    setTimeout(() => {
+        show.value = false;
+    }, 2000);
+};
+```
+
+::: endif
+
+### API
+
+#### 方法
+
+| 方法名                     | 说明                                       | 参数              | 返回值        |
+| :------------------------- | :----------------------------------------- | :---------------- | :------------ |
+| Notify                     | 展示提示                                   | options / message | `notify` 实例 |
+| Notify.clear               | 关闭提示                                   | -                 | -             |
+| Notify.setDefaultOptions   | 修改默认配置，对当前页面所有 `Notify` 生效 | options           | `void`        |
+| Notify.resetDefaultOptions | 重置默认配置，对当前页面所有 `Notify` 生效 | -                 | `void`        |
+
+#### Options
+
+| 参数       | 说明                                                      | 类型            | 默认值     |
+| :--------- | :-------------------------------------------------------- | :-------------- | :--------- |
+| context    | notify 节点上下文，传入后只在该$vm 节点下查找 notify 节点 | vue 实例        | 当前页面   |
+| selector   | notify 节点的 ref，函数根据该 ref 进行查找                | string          | `emNotify` |
+| type       | 类型，可选值为 `primary` `success` `warning`              | string          | `danger`   |
+| message    | 展示文案，支持通过`\n`换行                                | string          | -          |
+| duration   | 展示时长(`ms`)，值为 `0` 时，`notify` 不会消失            | number / string | `2000`     |
+| color      | 字体颜色                                                  | string          | `white`    |
+| background | 背景颜色                                                  | string          | -          |
+| onClick    | 点击时的回调函数                                          | Function        | -          |
+| onOpened   | 完全展示后的回调函数                                      | Function        | -          |
+| onClose    | 关闭时的回调函数                                          | Function        | -          |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-notify"
+ 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-notify"
+ 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/052-overlay/351/201/256/347/275/251/345/261/202.md

@@ -0,0 +1,139 @@
+# 组件使用
+
+## overlay 遮罩层
+
+### 介绍
+
+-   创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<em-button type="primary" text="显示遮罩层" @click="show = true" />
+<em-overlay :show="show" @click="show = false" />
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            show: false
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+const show = ref(false);
+```
+
+::: endif
+
+#### 嵌入内容
+
+通过默认插槽可以在遮罩层上嵌入任意内容
+
+```html
+<em-overlay :show="show" @click="show = false">
+    <div class="wrapper">
+        <scroll-view scroll-y="true" class="scroll-items" style="scroll-behavior: smooth" @click.stop>
+            <div v-for="item in 20" :key="item">item</div>
+        </scroll-view>
+    </div>
+</em-overlay>
+
+<style>
+    .wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+    }
+
+    .block {
+        width: 120px;
+        height: 120px;
+        background-color: #fff;
+    }
+</style>
+```
+
+### API
+
+#### Props
+
+| 参数         | 说明                                                                 | 类型            | 默认值  | ::: ifdef M83 weex 端支持 ::: endif |
+| :----------- | :------------------------------------------------------------------- | :-------------- | :------ | :---------------------------------- |
+| show         | 是否展示遮罩层                                                       | boolean         | `false` | 是                                  |
+| z-index      | `z-index` 层级                                                       | number / string | `99`    | 否                                  |
+| duration     | 动画时长，单位毫秒                                                   | number / string | `280`   | 是                                  |
+| custom-style | 自定义样式                                                           | string          | -       | 是                                  |
+| lock-scroll  | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动, 支付宝小程序不支持 | boolean         | `true`  | 否（weex 端默认锁定背景滚动）       |
+
+#### Events
+
+| 事件名 | 说明       | 回调参数     |
+| :----- | :--------- | :----------- |
+| click  | 点击时触发 | event: Event |
+
+#### Slots
+
+| 名称    | 说明                               |
+| :------ | :--------------------------------- |
+| default | 默认插槽，用于在遮罩层上方嵌入内容 |
+
+### 遮罩层滚动穿透说明
+
+在 H5 或微信小程序中，遮罩层组件通过设置`@touchmove.stop.prevent`来锁定背景滚动，此时由于禁止了`touchmove`的默认行为，导致遮罩层内部也无法进行滚动。
+
+若想要在内部滚动，可以使用`scroll-view`组件实现滚动。
+
+而在支付宝小程序中，`@touchmove.stop.prevent`无法锁定背景滚动，若希望触摸蒙版时不会触发底部内容的滚动，可以在蒙版弹出时，设置底部的内容样式为`overflow: hidden`来解决这个问题。
+
+类似问题在其他组件如：`popup`、`picker`等使用了遮罩层的组件中也会存在，都可以参考上述方案解决。
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-overlay"
+ 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-overlay"
+ 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>