m8-mcp-server 1.0.0

package/dist/data/m8mpdoc-develop/009-UI/347/273/204/344/273/266/070-swipe/350/275/256/346/222/255.md

@@ -0,0 +1,262 @@
+# 组件使用
+
+## Swipe 轮播
+
+### 介绍
+
+-   用于循环播放一组图片或内容。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。
+
+```html
+<em-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+    <em-swipe-item>1</em-swipe-item>
+    <em-swipe-item>2</em-swipe-item>
+    <em-swipe-item>3</em-swipe-item>
+    <em-swipe-item>4</em-swipe-item>
+</em-swipe>
+
+<style>
+    .my-swipe .em-swipe-item {
+        color: #fff;
+        font-size: 20px;
+        line-height: 150px;
+        text-align: center;
+        background-color: #39a9ed;
+    }
+</style>
+```
+
+#### 监听 change 事件
+
+::: ifdef M83
+
+```html
+<em-swipe @change="onChange">
+    <em-swipe-item>1</em-swipe-item>
+    <em-swipe-item>2</em-swipe-item>
+    <em-swipe-item>3</em-swipe-item>
+    <em-swipe-item>4</em-swipe-item>
+</em-swipe>
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    methods: {
+        onChange(index) {
+            Toast({
+                message: `当前 Swipe 索引：${index}`
+            });
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-swipe @change="onChange">
+    <em-swipe-item>1</em-swipe-item>
+    <em-swipe-item>2</em-swipe-item>
+    <em-swipe-item>3</em-swipe-item>
+    <em-swipe-item>4</em-swipe-item>
+</em-swipe>
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const emToastRef = ref(null); // 创建一个 ref 用于引用 emToast
+
+const onChange = (index) => {
+    Toast({
+        message: `当前 Swipe 索引：${index}`
+    });
+};
+
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+#### 纵向滚动
+
+设置 vertical 属性后滑块会纵向排列，此时需要指定滑块容器的高度。
+
+```html
+<em-swipe style="height: 200px;" vertical>
+    <em-swipe-item>1</em-swipe-item>
+    <em-swipe-item>2</em-swipe-item>
+    <em-swipe-item>3</em-swipe-item>
+    <em-swipe-item>4</em-swipe-item>
+</em-swipe>
+```
+
+#### 自定义滑块大小
+
+滑块默认宽度为 100%，可以通过 width 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 height 属性设置单个滑块的高度。
+
+```html
+<em-swipe :loop="false" :width="300">
+    <em-swipe-item>1</em-swipe-item>
+    <em-swipe-item>2</em-swipe-item>
+    <em-swipe-item>3</em-swipe-item>
+    <em-swipe-item>4</em-swipe-item>
+</em-swipe>
+```
+
+目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false。
+
+#### 自定义指示器
+
+通过 indicator 插槽可以自定义指示器的样式。
+
+```html
+<em-swipe @change="onChange">
+    <em-swipe-item>1</em-swipe-item>
+    <em-swipe-item>2</em-swipe-item>
+    <em-swipe-item>3</em-swipe-item>
+    <em-swipe-item>4</em-swipe-item>
+    <template #indicator>
+        <div class="custom-indicator">{{ current + 1 }}/4</div>
+    </template>
+</em-swipe>
+
+<style>
+    .custom-indicator {
+        position: absolute;
+        right: 5px;
+        bottom: 5px;
+        padding: 2px 5px;
+        font-size: 12px;
+        background: rgba(0, 0, 0, 0.1);
+    }
+</style>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            current: 0
+        };
+    },
+    methods: {
+        onChange(index) {
+            this.current = index;
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+// 使用 ref 创建响应式数据
+const current = ref(0);
+
+// 当索引发生变化时更新 current
+const onChange = (index) => {
+    current.value = index;
+};
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数            |           说明            | 类型            | 默认值    | ::: ifdef M83 weex 端支持 ::: endif |
+| :-------------- | :-----------------------: | :-------------- | :-------- | :---------------------------------- |
+| autoplay        | 自动轮播间隔，单位为 `ms` | number / string |           | 是                                  |
+| duration        |   动画时长，单位为 `ms`   | number / string | 500       | 否                                  |
+| initial-swipe   |      初始位置索引值       | number / string | 0         | 是                                  |
+| width           |   滑块宽度，单位为 `px`   | number / string | `auto`    | 是                                  |
+| height          |   滑块高度，单位为 `px`   | number / string | `auto`    | 是                                  |
+| loop            |     是否开启循环播放      | boolean         | `true`    | 是                                  |
+| show-indicators |      是否显示指示器       | boolean         | `true`    | 是                                  |
+| vertical        |      是否为纵向滚动       | boolean         | `false`   | 否                                  |
+| touchable       |   是否可以通过手势滑动    | boolean         | `true`    | 是                                  |
+| indicator-color |        指示器颜色         | string          | `#2e6be5` | 是                                  |
+
+#### Events
+
+| 事件       |         说明         | 回调参数             |
+| :--------- | :------------------: | :------------------- |
+| change     | 每一页轮播结束后触发 | `index` 当前页的索引 |
+| item-click | 点击某一页轮播时触发 | `index` 当前页的索引 |
+
+#### 方法
+
+通过 `ref` 可以获取到 `Swipe` 实例并调用实例方法，详见组件实例方法。
+
+| 方法名  |                            说明                            | 参数                            | 返回值 |
+| :------ | :--------------------------------------------------------: | :------------------------------ | :----- |
+| prev    |                       切换到上一轮播                       | -                               | -      |
+| next    |                       切换到下一轮播                       | -                               | -      |
+| swipeTo |                       切换到指定位置                       | index: number, options: Options | -      |
+| resize  | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | -                               | -      |
+
+##### swipeTo Options 格式
+
+| 名称      |     说明     | 类型      | ::: ifdef M83 weex 端支持 ::: endif |
+| :-------- | :----------: | :-------- | :---------------------------------- |
+| immediate | 是否跳过动画 | `boolean` | 否                                  |
+
+#### Slots
+
+| 名称      |     说明     |
+| :-------- | :----------: |
+| default   |   轮播内容   |
+| indicator | 自定义指示器 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-swipe"
+ 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-swipe"
+ 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/dist/data/m8mpdoc-develop/009-UI/347/273/204/344/273/266/071-/345/233/275/351/231/205/345/214/226.md

@@ -0,0 +1,51 @@
+# 国际化
+
+### 介绍
+
+-   跨端组件库采用中文作为默认语言，同时支持多语言切换，请按照下方教程进行国际化设置。
+
+### 使用方法
+
+#### 多语言切换
+
+组件库通过 `Locale` 组件实现多语言支持，使用 `Locale.use` 方法可以切换当前使用的语言。
+
+```js
+// 由于 Locale 是全局函数，可以不用手动引入该函数
+import Locale from '@components/locale/index.js';
+// 引入英文语言包
+import enUS from '@components/locale/i18n/en.json';
+
+Locale.use('en', enUS);
+```
+
+#### 覆盖语言包
+
+通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下：
+
+```js
+const messages = {
+    'zh-Hans': {
+        emPicker: {
+            confirm: '关闭' // 将'确认'修改为'关闭'
+        }
+    }
+};
+
+Locale.add(messages);
+```
+
+#### 语言包
+
+目前支持的语言:
+
+| 语言     |   key   | 文件名       |
+| :------- | :-----: | :----------- |
+| 简体中文 | zh-Hans | zh-Hans.json |
+| 英文     |   en    | en.json      |
+
+在[这里](待补充)查看所有语言文件
+
+若需要翻译成其他语言，可以使用`Locale.add`进行扩展。
+
+业务代码请使用 [vue-i18n](https://github.com/kazupon/vue-i18n) 实现。

package/dist/data/m8mpdoc-develop/009-UI/347/273/204/344/273/266/072-easycalendar/346/227/245/345/216/206.md

@@ -0,0 +1,132 @@
+# 组件使用
+
+## easycalendar 日历
+
+### 介绍
+
+-   M8 日历组件,支持日历与周历切换。
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<em-easy-calendar />
+```
+
+#### 仅展示周历
+
+```html
+<em-easy-calendar :allow-switch="false" :is-show-week-view="true" />
+```
+
+#### 设置标记的日期
+
+```html
+<em-easy-calendar :mark-date="markDate" />
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            markDate: [
+                {
+                    // 昨天标记为红色
+                    date: new Date().getTime() - 86400000,
+                    color: 'red'
+                },
+                {
+                    // 明天标记为黄色
+                    date: new Date().getTime() + 86400000,
+                    color: 'yellow'
+                }
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+// 使用 ref 创建响应式数据
+const markDate = ref([
+    {
+        // 昨天标记为红色
+        date: new Date().getTime() - 86400000,
+        color: 'red'
+    },
+    {
+        // 明天标记为黄色
+        date: new Date().getTime() + 86400000,
+        color: 'yellow'
+    }
+]);
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数              |             说明             | 类型    | 默认值  |
+| :---------------- | :--------------------------: | :------ | :------ |
+| allow-switch      |    是否开启周历和月历互换    | boolean | `true`  |
+| is-show-week-view | 是否展示周历（否即展示月历） | boolean | `false` |
+| mark-date         |         有标记的日期         | Array   | `-`     |
+| is-show-watermark |    是否显示背景的月份数字    | boolean | `true`  |
+
+**mark-date 数据格式**
+
+`mark-date`是一个数组，数组每项是一个对象，对象可配置的参数如下：
+
+| 参数  |                            说明                             | 类型          |
+| :---- | :---------------------------------------------------------: | :------------ |
+| date  | 要标记的日期，可以是 `2022/1/1`这样的字符串，也可以是毫秒数 | string/number |
+| color |                      该日期标记的颜色                       | string        |
+
+#### Events
+
+| 事件名          |            说明             | 回调参数                         |
+| :-------------- | :-------------------------: | :------------------------------- |
+| getNextSchedule | 滑动到下一月/周时触发的函数 | String(2022 年 05 月 01 日 周日) |
+| getPreSchedule  | 滑动到上一月/周时触发的函数 | String(2022 年 05 月 01 日 周日) |
+| clickItem       |    点击每一天触发的函数     | String(2022 年 05 月 01 日 周日) |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-easy-calendar"
+ 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-easy-calendar"
+ 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>