m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/053-collapse/346/212/230/345/217/240/351/235/242/346/235/277.md

@@ -0,0 +1,199 @@
+# 组件使用
+
+## collapse 折叠面板
+
+### 介绍
+
+-   折叠面板。
+
+### 代码演示
+
+#### 基础用法
+
+通过`v-model`控制展开的面板列表，`activeNames`为数组格式
+
+```html
+<em-collapse v-model="activeNames">
+    <em-collapse-item title="标题1" name="1" is-link>内容</em-collapse-item>
+    <em-collapse-item title="标题2" name="2" is-link>内容</em-collapse-item>
+    <em-collapse-item title="标题3" name="3" disabled is-link>内容</em-collapse-item>
+</em-collapse>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            activeNames: ['1']
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const activeNames = ref(['1']);
+```
+
+::: endif
+
+#### 手风琴
+
+通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式
+
+```html
+<em-collapse v-model="activeName" accordion>
+    <em-collapse-item title="标题1" name="1" is-link>内容</em-collapse-item>
+    <em-collapse-item title="标题2" name="2" is-link>内容</em-collapse-item>
+    <em-collapse-item title="标题3" name="3" is-link>内容</em-collapse-item>
+</em-collapse>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            activeName: '1'
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const activeName = ref('1');
+```
+
+::: endif
+
+#### 自定义标题内容
+
+```html
+<em-collapse v-model="activeNames">
+    <em-collapse-item name="1" is-link>
+        <template #title>
+            <div>
+                标题1
+                <em-icon name="question-o" />
+            </div>
+        </template>
+        内容
+    </em-collapse-item>
+    <em-collapse-item title="标题2" name="2" icon="shop-o" is-link value="内容">内容</em-collapse-item>
+</em-collapse>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            activeNames: ['1']
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const activeNames = ref(['1']);
+```
+
+::: endif
+
+### API
+
+#### Collapse Props
+
+| 参数                                                                         |         说明          | 类型                                                           | 默认值  |
+| :--------------------------------------------------------------------------- | :-------------------: | :------------------------------------------------------------- | :------ |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif | 当前展开面板的 `name` | 手风琴模式：number / string；非手风琴模式：(number / string)[] | -       |
+| accordion                                                                    |  是否开启手风琴模式   | boolean                                                        | `false` |
+| border                                                                       |    是否显示外边框     | boolean                                                        | `true`  |
+
+#### Collapse Events
+
+| 事件名 |      说明      | 回调参数                                 |
+| :----- | :------------: | :--------------------------------------- |
+| change | 切换面板时触发 | activeNames: 类型与 v-model 绑定的值一致 |
+
+#### CollapseItem Props
+
+| 参数          |                 说明                 | 类型            | 默认值  |
+| :------------ | :----------------------------------: | :-------------- | :------ |
+| name          |       唯一标识符，默认为索引值       | number / string | `index` |
+| icon          |     标题栏左侧图标名称或图片链接     | string          | -       |
+| size          |     标题栏大小，可选值为 `large`     | string          | -       |
+| title         |            标题栏左侧内容            | number / string | -       |
+| value         |            标题栏右侧内容            | number / string | -       |
+| label         |            标题栏描述信息            | number / string | -       |
+| border        |            是否显示内边框            | boolean         | `true`  |
+| is-link       | 是否展示标题栏右侧箭头并开启点击反馈 | boolean         | `true`  |
+| disabled      |             是否禁用面板             | boolean         | `false` |
+| content-class |           内容区域额外类名           | string          | -       |
+| title-class   |           左侧标题额外类名           | string          | -       |
+| value-class   |           右侧内容额外类名           | string          | -       |
+| label-class   |           描述信息额外类名           | string          | -       |
+
+#### CollapseItem Slots
+
+| 名称      |             说明              |
+| :-------- | :---------------------------: |
+| default   |           面板内容            |
+| value     |        自定义显示内容         |
+| icon      |         自定义`icon`          |
+| title     |         自定义`title`         |
+| rightIcon | 自定义右侧按钮，默认是`arrow` |
+
+#### CollapseItem 方法
+
+通过 `ref` 可以获取到 `CollapseItem` 实例并调用实例方法，详见组件实例方法。
+
+| 方法名 |                               说明                               | 参数             | 返回值 |
+| :----- | :--------------------------------------------------------------: | :--------------- | :----- |
+| toggle | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | expand?: boolean | -      |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-collapse"
+ 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-collapse"
+ 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/054-grid/345/256/253/346/240/274.md

@@ -0,0 +1,183 @@
+# 组件使用
+
+## grid 宫格
+
+### 介绍
+
+-   宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+通过`icon`属性设置格子内的图标，`text`属性设置文字内容。
+
+```html
+<em-grid>
+    <em-grid-item icon="photo-o" text="文字" />
+    <em-grid-item icon="photo-o" text="文字" />
+    <em-grid-item icon="photo-o" text="文字" />
+    <em-grid-item icon="photo-o" text="文字" />
+</em-grid>
+```
+
+#### 自定义列数
+
+默认一行展示四个格子，可以通过`column-num`自定义列数
+
+```html
+<em-grid :column-num="3">
+    <em-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
+</em-grid>
+```
+
+#### 自定义内容
+
+通过插槽可以自定义格子展示的内容
+
+```html
+<em-grid :border="false" :column-num="3">
+    <em-grid-item>
+        <em-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+    </em-grid-item>
+    <em-grid-item>
+        <em-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+    </em-grid-item>
+    <em-grid-item>
+        <em-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+    </em-grid-item>
+</em-grid>
+```
+
+#### 正方形格子
+
+设置`square`属性后，格子的高度会和宽度保持一致
+
+```html
+<em-grid square>
+    <em-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
+</em-grid>
+```
+
+#### 格子间距
+
+通过`gutter`属性设置格子之间的距离
+
+```html
+<em-grid :gutter="10">
+    <em-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
+</em-grid>
+```
+
+#### 内容横排
+
+将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
+
+```html
+<em-grid direction="horizontal" :column-num="3">
+    <em-grid-item icon="photo-o" text="文字" />
+    <em-grid-item icon="photo-o" text="文字" />
+    <em-grid-item icon="photo-o" text="文字" />
+</em-grid>
+```
+
+#### 页面导航
+
+通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 `URL` 跳转链接
+
+```html
+<em-grid clickable :column-num="2">
+    <em-grid-item icon="home-o" text="路由跳转" to="./em-cell" />
+    <em-grid-item icon="search" text="URL 跳转" url="./em-loading" />
+</em-grid>
+```
+
+#### 徽标提示
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
+
+```html
+<em-grid :column-num="2">
+    <em-grid-item icon="home-o" text="文字" dot />
+    <em-grid-item icon="search" text="文字" badge="99+" />
+</em-grid>
+```
+
+### API
+
+#### Grid Props
+
+| 参数       |                   说明                    | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
+| :--------- | :---------------------------------------: | :-------------- | :--------- | :---------------------------------- |
+| column-num |                   列数                    | number / string | `4`        | 是                                  |
+| icon-size  |         图标大小，默认单位为`px`          | number / string | `28px`     | 是                                  |
+| gutter     |      格子之间的间距，默认单位为`px`       | number / string | `0`        | 是                                  |
+| border     |               是否显示边框                | boolean         | `true`     | 是                                  |
+| center     |          是否将格子内容居中显示           | boolean         | `true`     | 是                                  |
+| square     |          是否将格子固定为正方形           | boolean         | `false`    | 是                                  |
+| clickable  |           是否开启格子点击反馈            | boolean         | `false`    | 是                                  |
+| direction  | 格子内容排列的方向，可选值为 `horizontal` | string          | `vertical` | 是                                  |
+
+#### GridItem Props
+
+| 参数        |                                             说明                                              | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
+| :---------- | :-------------------------------------------------------------------------------------------: | :-------------- | :--------- | :---------------------------------- |
+| text        |                                             文字                                              | string          | -          | 是                                  |
+| icon        |                                      图标名称或图片链接                                       | string          | -          | 是                                  |
+| icon-prefix |                      图标类名前缀，同 `Icon` 组件的 `class-prefix` 属性                       | string          | `van-icon` | 否                                  |
+| dot         |                                   是否显示图标右上角小红点                                    | boolean         | `false`    | 是                                  |
+| badge       |                                     图标右上角徽标的内容                                      | number / string | -          | 是                                  |
+| url         |                                     点击后跳转的链接地址                                      | string          | -          | 是                                  |
+| to          | 点击后跳转的目标路由对象，同 `vue-router` 的 `to` 属性，仅支持`path` `query` `replace` `hash` | string / object | -          | 是                                  |
+| replace     |                                 是否在跳转时替换当前页面历史                                  | boolean         | `false`    | 是                                  |
+
+#### GridItem Events
+
+| 事件名 |      说明      | 回调参数     |
+| :----- | :------------: | :----------- |
+| click  | 点击格子时触发 | event: Event |
+
+#### GridItem Slots
+
+| 名称    |         说明         |
+| :------ | :------------------: |
+| default | 自定义宫格的所有内容 |
+| icon    |      自定义图标      |
+| text    |      自定义文字      |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-grid"
+ 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-grid"
+ 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/055-countdown/345/200/222/350/256/241/346/227/266.md

@@ -0,0 +1,289 @@
+# 组件使用
+
+## countdown 倒计时
+
+### 介绍
+
+-   倒计时。
+
+### 代码演示
+
+#### 基础用法
+
+`time`属性表示倒计时总时长，单位为毫秒
+
+```html
+<em-count-down :time="time" />
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            time: 30 * 60 * 60 * 1000
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const time = ref(30 * 60 * 60 * 1000);
+```
+
+::: endif
+
+#### 自定义格式
+
+通过`format`属性设置倒计时文本的内容
+
+```html
+<em-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+```
+
+#### 毫秒级渲染
+
+倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
+
+```html
+<em-count-down millisecond :time="time" format="HH:mm:ss:SS" />
+```
+
+#### 自定义样式
+
+通过插槽自定义倒计时的样式，`timeData`对象格式见下方表格
+
+::: ifdef M83
+
+```html
+<em-count-down :time="time">
+    <template v-slot="{ timeData }">
+        <span class="block">{{ timeData.hours }}</span>
+        <span class="colon">:</span>
+        <span class="block">{{ timeData.minutes }}</span>
+        <span class="colon">:</span>
+        <span class="block">{{ timeData.seconds }}</span>
+    </template>
+</em-count-down>
+
+<style>
+    .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+    }
+    .block {
+        display: inline-block;
+        width: 22px;
+        color: #fff;
+        font-size: 12px;
+        text-align: center;
+        background-color: #ee0a24;
+    }
+</style>
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-count-down :time="time">
+    <template #default="{ timeData }">
+        <span class="block">{{ timeData.hours }}</span>
+        <span class="colon">:</span>
+        <span class="block">{{ timeData.minutes }}</span>
+        <span class="colon">:</span>
+        <span class="block">{{ timeData.seconds }}</span>
+    </template>
+</em-count-down>
+
+<script setup>
+    import { ref } from 'vue';
+    const time = ref(30 * 60 * 60 * 1000);
+</script>
+
+<style>
+    .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+    }
+    .block {
+        display: inline-block;
+        width: 22px;
+        color: #fff;
+        font-size: 12px;
+        text-align: center;
+        background-color: #ee0a24;
+    }
+</style>
+```
+
+::: endif
+
+#### 手动控制
+
+通过 `ref` 获取到组件实例后，可以调用`start`、`pause`、`reset`方法
+
+::: ifdef M83
+
+```html
+<em-count-down ref="countDown" millisecond :time="3000" :auto-start="false" format="ss:SSS" @finish="finish" />
+<em-grid clickable>
+    <em-grid-item text="开始" icon="play-circle-o" @click="start" />
+    <em-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
+    <em-grid-item text="重置" icon="replay" @click="reset" />
+</em-grid>
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    methods: {
+        start() {
+            this.$refs.countDown.start();
+        },
+        pause() {
+            this.$refs.countDown.pause();
+        },
+        reset() {
+            this.$refs.countDown.reset();
+        },
+        finish() {
+            Toast('倒计时结束');
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-count-down ref="countDown" millisecond :time="3000" :auto-start="false" format="ss:SSS" @finish="finish" />
+<em-grid clickable>
+    <em-grid-item text="开始" icon="play-circle-o" @click="start" />
+    <em-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
+    <em-grid-item text="重置" icon="replay" @click="reset" />
+</em-grid>
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const countDown = ref(null);
+const emToastRef = ref(null);
+
+const start = () => {
+    countDown.value.start();
+};
+const pause = () => {
+    countDown.value.pause();
+};
+const reset = () => {
+    countDown.value.reset();
+};
+const finish = () => {
+    Toast('倒计时结束');
+};
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数        |         说明         | 类型            | 默认值     |
+| :---------- | :------------------: | :-------------- | :--------- |
+| time        | 倒计时时长，单位毫秒 | number / string | `0`        |
+| format      |       时间格式       | string          | `HH:mm:ss` |
+| auto-start  |  是否自动开始倒计时  | boolean         | `true`     |
+| millisecond |  是否开启毫秒级渲染  | boolean         | `false`    |
+
+#### format 格式
+
+| 格式 |     说明     |
+| :--- | :----------: |
+| DD   |     天数     |
+| HH   |     小时     |
+| mm   |     分钟     |
+| ss   |     秒数     |
+| S    | 毫秒（1 位） |
+| SS   | 毫秒（2 位） |
+| SSS  | 毫秒（3 位） |
+
+#### Events
+
+| 事件名                                         |          说明          | 回调参数           |
+| :--------------------------------------------- | :--------------------: | :----------------- |
+| finish                                         |    倒计时结束时触发    | -                  |
+| change                                         |    倒计时变化时触发    | timeData: TimeData |
+| ::: ifdef M84 update:timeData `v8.4` ::: endif | 用于同步 timeData 事件 | timeData: TimeData |
+
+#### Slots
+
+| 名称    |    说明    | SlotProps                                  |
+| :------ | :--------: | :----------------------------------------- |
+| default | 自定义内容 | timeData: TimeData |
+
+#### TimeData 格式
+
+| 名称         |   说明   | 类型   |
+| :----------- | :------: | :----- |
+| days         | 剩余天数 | number |
+| hours        | 剩余小时 | number |
+| minutes      | 剩余分钟 | number |
+| seconds      | 剩余秒数 | number |
+| milliseconds | 剩余毫秒 | number |
+
+#### 方法
+
+通过 `ref` 可以获取到 `CountDown` 实例并调用实例方法，详见组件实例方法
+
+| 方法名 |                            说明                            | 参数 | 返回值 |
+| :----- | :--------------------------------------------------------: | :--- | :----- |
+| start  |                         开始倒计时                         | -    | -      |
+| pause  |                         暂停倒计时                         | -    | -      |
+| reset  | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | -    | -      |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-count-down"
+ 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-count-down"
+ 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>