m8-framework-mcp 1.0.0 → 1.0.3

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/018-header/345/244/264/351/203/250/345/257/274/350/210/252/346/240/217.md

@@ -1,150 +0,0 @@
-# 组件使用
-
-## header 头部导航栏
-
-### 介绍
-
--   头部导航栏组件。
-
-### 代码演示
-
-#### 基础用法
-
-::: ifdef M83
-
-```html
-<em-header
-    title="标题"
-    :left-arrow="true"
-    left-text="返回"
-    right-text="按钮"
-    @click-left="onClickLeft"
-    @click-right="onClickRight"
-></em-header>
-<em-toast ref="emToast"></em-toast>
-```
-
-```js
-export default {
-    name: 'Header',
-    methods: {
-        onClickLeft() {
-            Toast('返回');
-        },
-        onClickRight() {
-            Toast('按钮');
-        }
-    }
-};
-```
-
-::: endif
-::: ifdef M84
-
-```html
-<em-header
-    title="标题"
-    :left-arrow="true"
-    left-text="返回"
-    right-text="按钮"
-    @click-left="onClickLeft"
-    @click-right="onClickRight"
-></em-header>
-<em-toast ref="emToastRef"></em-toast>
-```
-
-```js
-import { ref } from 'vue';
-const emToastRef = ref(null);
-const onClickLeft = () => {
-    Toast('返回');
-};
-
-const onClickRight = () => {
-    Toast('按钮');
-};
-
-defineExpose({
-    emToastRef
-});
-```
-
-::: endif
-
-#### 使用插槽
-
-通过插槽自定义导航栏两侧的内容
-
-```html
-<em-header title="标题" :left-arrow="true" left-text="返回" @click-left="onClickLeft" style="top: 14px;">
-    <template #right>
-        <em-icon name="search"></em-icon>
-    </template>
-</em-header>
-```
-
-### API
-
-#### Props
-
-| 参数                             |                        说明                        | 类型            | 默认值    |
-| :------------------------------- | :------------------------------------------------: | :-------------- | :-------- |
-| title                            |                        标题                        | string          | `''`      |
-| left-text                        |                      左侧文案                      | string          | `''`      |
-| right-text                       |                      右侧文案                      | string          | `''`      |
-| left-arrow                       |                  是否显示左侧箭头                  | boolean         | `false`   |
-| border                           |                   是否显示下边框                   | boolean         | `true`    |
-| backgroundColor                  |                      背景颜色                      | string          | `#fff`    |
-| color                            |                      标题颜色                      | string          | `#333`    |
-| btnColor                         |                    箭头按钮颜色                    | string          | `#2e6be5` |
-| fixed                            |                   是否固定在顶部                   | boolean         | `false`   |
-| placeholder                      | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | boolean         | `false`   |
-| z-index                          |                   元素 `z-index`                   | number / string | `1`       |
-| safe-area-inset-top              |               是否开启顶部安全区适配               | boolean         | `false`   |
-| click-left-back `v8.3.16-beta.1` |          点击左上角按钮是否自动返回上一页          | boolean         | `true`    |
-
-#### Slots
-
-| 名称  |        说明        |
-| :---- | :----------------: |
-| title |     自定义标题     |
-| left  | 自定义左侧区域内容 |
-| right | 自定义右侧区域内容 |
-
-#### Events
-
-| 事件名      |        说明        | 回调参数 |
-| :---------- | :----------------: | :------- |
-| click-left  | 点击左侧按钮时触发 | -        |
-| click-right | 点击右侧按钮时触发 | -        |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-header"
- 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-header"
- 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/019-icon/345/233/276/346/240/207.md

@@ -1,133 +0,0 @@
-# 组件使用
-
-## icon 图标
-
-### 介绍
-
--   基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。
-
-::: ifdef M83
-
--   `v8.3.11`开始支持 weex 端使用
-
-::: endif
-
-### 代码演示
-
-#### 基础用法
-
-`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。
-
-```html
-<em-icon name="chat-o" />
-<em-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
-```
-
-#### 徽标提示
-
-设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
-
-```html
-<em-icon name="chat-o" dot />
-<em-icon name="chat-o" badge="9" />
-<em-icon name="chat-o" badge="99+" />
-```
-
-#### 图标颜色
-
-`Icon`的`color`属性用来设置图标的颜色
-
-```html
-<em-icon name="chat-o" color="#1989fa" />
-<em-icon name="chat-o" color="#07c160" />
-```
-
-#### 图标大小
-
-`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
-
-```html
-<em-icon name="chat-o" size="40" />
-<em-icon name="chat-o" size="3rem" />
-```
-
-<!-- #### 使用本地字体文件
-`Icon` 组件默认引用有赞 `CDN` 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 `CSS` 文件，并在项目中配置`url-loader`
-```js
-import 'vant/lib/icon/local.css';
-``` -->
-
-#### 自定义图标
-
-如果需要在现有 `Icon` 的基础上使用更多图标，可以引入第三方 `iconfont` 对应的字体文件和 `CSS` 文件，之后就可以在 `Icon` 组件中直接使用
-
-```html
-<style>
-    /* 引入第三方或自定义的字体图标样式 */
-    @font-face {
-        font-family: 'my-icon';
-        src: url('./my-icon.ttf') format('truetype');
-    }
-
-    .my-icon {
-        font-family: 'my-icon';
-    }
-
-    .my-icon-extra::before {
-        content: '\e626';
-    }
-</style>
-
-<!-- 通过 class-prefix 指定类名为 my-icon -->
-<em-icon class-prefix="my-icon" name="extra" />
-```
-
-### API
-
-#### Props
-
-| 参数         |                   说明                    | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
-| :----------- | :---------------------------------------: | :-------------- | :--------- | :---------------------------------- |
-| name         |            图标名称或图片链接             | string          | -          | 是                                  |
-| dot          |         是否显示图标右上角小红点          | boolean         | `false`    | 是                                  |
-| badge        |           图标右上角徽标的内容            | number / string | -          | 是                                  |
-| color        |                 图标颜色                  | string          | `inherit`  | 是                                  |
-| size         | 图标大小，如 `20px` `2em`，默认单位为`px` | number /string  | `inherit`  | 是                                  |
-| class-prefix |       类名前缀，用于使用自定义图标        | string          | `van-icon` | 否                                  |
-
-#### Events
-
-| 事件名 |      说明      | 回调参数     |
-| :----- | :------------: | :----------- |
-| click  | 点击图标时触发 | event: Event |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-icon"
- 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-icon"
- 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/020-loading/345/212/240/350/275/275.md

@@ -1,117 +0,0 @@
-# 组件使用
-
-## loading 加载
-
-### 介绍
-
--   加载提示组件。
-
-::: ifdef M83
-
--   支持 weex 端使用
-
-::: endif
-
-### 代码演示
-
-#### 加载类型
-
-通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner` `ball` `operation` `square`
-
-```html
-<em-loading />
-<em-loading type="spinner" />
-<em-loading type="ball" />
-<em-loading type="square" />
-<em-loading type="operation" />
-```
-
-#### 自定义颜色
-
-通过`color`属性设置加载图标的颜色
-
-```html
-<em-loading color="#1989fa" />
-<em-loading type="spinner" color="#1989fa" />
-<em-loading type="ball" color="#1989fa" />
-<em-loading type="square" color="#2E3033" />
-<em-loading type="operation" color="#1989fa" />
-```
-
-#### 自定义大小
-
-通过`size`属性设置加载图标的大小，默认单位为`px`
-
-```html
-<em-loading size="24" />
-<em-loading type="spinner" size="24px" />
-<em-loading type="ball" size="24px" />
-<em-loading type="square" size="24px" />
-<em-loading type="operation" size="24px" />
-```
-
-#### 加载文案
-
-可以使用默认插槽在图标的右侧插入加载文案
-
-```html
-<em-loading size="24px">加载中...</em-loading>
-```
-
-#### 垂直排列
-
-设置`vertical`属性后，图标和文案会垂直排列
-
-```html
-<em-loading size="24px" vertical>加载中...</em-loading>
-```
-
-### API
-
-#### Props
-
-| 参数       |                         说明                         | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
-| :--------- | :--------------------------------------------------: | :-------------- | :--------- | :---------------------------------- |
-| color      |                         颜色                         | string          | `#999`     | 是                                  |
-| type       | 类型，可选值为 `spinner` `ball` `operation` `square` | string          | `circular` | 是                                  |
-| size       |             加载图标大小，默认单位为`px`             | number / string | `30px`     | 是                                  |
-| text-size  |               文字大小，默认单位为`px`               | number / string | `14px`     | 是                                  |
-| text-color |                       文字颜色                       | string          | `#999`     | 是                                  |
-| vertical   |              是否垂直排列图标和文字内容              | boolean         | `false`    | 是                                  |
-
-#### Slots
-
-| 名称    |   说明   |
-| :------ | :------: |
-| default | 加载文案 |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-loading"
- 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-loading"
- 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/021-noticebar/351/200/232/347/237/245/346/240/217.md

@@ -1,152 +0,0 @@
-# 组件使用
-
-## noticebar 通知栏
-
-### 介绍
-
--   通知栏组件。
-
-### 代码演示
-
-#### 基础用法
-
-通过 `text` 属性设置通知栏的内容，通过 `left-icon` 属性设置通知栏左侧的图标。
-
-```html
-<em-notice-bar
-    left-icon="volume-o"
-    text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
-/>
-```
-
-#### 滚动播放
-
-通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。
-
-```html
-<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
-<em-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
-
-<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
-<em-notice-bar
-    :scrollable="false"
-    text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
-/>
-```
-
-#### 多行展示
-
-文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。
-
-```html
-<em-notice-bar
-    wrapable
-    :scrollable="false"
-    text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
-/>
-```
-
-#### 通知栏模式
-
-通知栏支持 `closeable` 和 `link` 两种模式。
-
-```html
-<!-- closeable 模式，在右侧显示关闭按钮 -->
-<em-notice-bar mode="closeable">技术是开发它的人的共同灵魂。</em-notice-bar>
-
-<!-- link 模式，在右侧显示链接箭头 -->
-<em-notice-bar mode="link">技术是开发它的人的共同灵魂。</em-notice-bar>
-```
-
-#### 自定义样式
-
-通过 `color` 属性设置文本颜色，通过 `background` 属性设置背景色。
-
-```html
-<em-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">技术是开发它的人的共同灵魂。</em-notice-bar>
-```
-
-#### 垂直滚动
-
-搭配 `NoticeBar` 和 `Gallery` 组件可以实现垂直滚动的效果。
-
-```html
-<em-notice-bar :scrollable="false" left-icon="volume-o">
-    <template #default>
-        <em-swipe class="notice-swipe" :height="40" :autoplay="3000" :show-indicators="false" vertical>
-            <em-swipe-item>技术是开发它的人的共同灵魂。技术是开发它的人的共同灵魂。</em-swipe-item>
-            <em-swipe-item>内容2</em-swipe-item>
-            <em-swipe-item>内容3</em-swipe-item>
-        </em-swipe>
-    </template>
-</em-notice-bar>
-
-<style>
-    ::v-deep .em-swipe-item {
-        text-align: center;
-    }
-</style>
-```
-
-### API
-
-#### Props
-
-| 参数       |                   说明                   | 类型            | 默认值    |
-| :--------- | :--------------------------------------: | :-------------- | :-------- |
-| mode       | 通知栏模式，可选值为 `closeable` `link`  | string          | `''`      |
-| text       |               通知文本内容               | string          | `''`      |
-| color      |               通知文本颜色               | string          | `#f60`    |
-| background |                滚动条背景                | string          | `#fff7cc` |
-| left-icon  |          左侧图标名称或图片链接          | string          | -         |
-| delay      |            动画延迟时间 `(s)`            | number / string | `1`       |
-| speed      |            滚动速率 `(px/s)`             | number / string | `50`      |
-| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | boolean         | -         |
-| wrapable   |   是否开启文本换行，只在禁用滚动时生效   | boolean         | `false`   |
-
-#### Events
-
-| 事件名 |             说明             | 回调参数     |
-| :----- | :--------------------------: | :----------- |
-| click  |       点击通知栏时触发       | event: Event |
-| close  |       关闭通知栏时触发       | event: Event |
-| replay | 每当滚动栏重新开始滚动时触发 | -            |
-
-#### Slots
-
-| 名称      |      内容      |
-| :-------- | :------------: |
-| default   |  通知文本内容  |
-| leftIcon  | 自定义左侧图标 |
-| rightIcon | 自定义右侧图标 |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-notice-bar"
- 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-notice-bar"
- 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>