m8-framework-mcp 1.0.0

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

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

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

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

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