m8-framework-mcp 1.0.0 → 1.0.3

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

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

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

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