m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/036-switch/345/274/200/345/205/263.md

@@ -0,0 +1,196 @@
+# 组件使用
+
+## switch 开关
+
+### 介绍
+
+-   开关组件。
+
+### 代码演示
+
+#### 基础用法
+
+通过`v-model`绑定开关的选中状态，`true`表示开，`false`表示关。
+
+```html
+<em-switch v-model="checked" />
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            checked: true
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const checked = ref(true);
+```
+
+::: endif
+
+#### 禁用状态
+
+通过`disabled`属性来禁用开关，禁用状态下开关不可点击
+
+```html
+<em-switch v-model="checked" disabled />
+```
+
+#### 加载状态
+
+通过`loading`属性设置开关为加载状态，加载状态下开关不可点击
+
+```html
+<em-switch v-model="checked" loading />
+```
+
+#### 自定义大小
+
+通过`size`属性自定义开关的大小
+
+```html
+<em-switch v-model="checked" size="24px" />
+```
+
+#### 自定义颜色
+
+`active-color`属性表示打开时的背景色，`inactive-color`表示关闭时的背景色
+
+```html
+<em-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
+```
+
+#### 异步控制
+
+需要异步控制开关时，可以使用`value`属性和`input`事件代替`v-model`，并在`input`事件回调函数中手动处理开关状态
+
+::: ifdef M83
+
+```html
+<em-switch :value="checked" @input="onInput" />
+<em-dialog ref="emDialog"></em-dialog>
+```
+
+```js
+export default {
+    data() {
+        return {
+            checked: true
+        };
+    },
+    methods: {
+        onInput(checked) {
+            Dialog.confirm({
+                message: '是否切换开关？'
+            })
+                .then(() => {
+                    this.checked = checked;
+                })
+                .catch(() => {});
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```html
+<em-switch :model-value="checked" @input="onInput" />
+<em-dialog ref="emDialogRef"></em-dialog>
+```
+
+```js
+import { ref } from 'vue';
+const checked = ref(true);
+const emDialogRef = ref(null);
+
+function onInput(checked) {
+    Dialog.confirm({
+        message: '是否切换开关？'
+    })
+        .then(() => {
+            checked.value = checked;
+        })
+        .catch(() => {});
+}
+
+defineExpose({
+    emDialogRef
+});
+```
+
+::: endif
+
+#### 搭配单元格使用
+
+```html
+<em-cell center title="标题">
+    <template #right-icon>
+        <em-switch v-model="checked" size="24" />
+    </template>
+</em-cell>
+```
+
+### API
+
+#### Props
+
+| 参数                                                                         |           说明           | 类型            | 默认值    |
+| :--------------------------------------------------------------------------- | :----------------------: | :-------------- | :-------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |       开关选中状态       | any             | `false`   |
+| loading                                                                      |      是否为加载状态      | boolean         | `false`   |
+| disabled                                                                     |      是否为禁用状态      | boolean         | `false`   |
+| size                                                                         | 开关尺寸，默认单位为`px` | number / string | `30px`    |
+| active-color                                                                 |      打开时的背景色      | string          | `#2e6be5` |
+| inactive-color                                                               |      关闭时的背景色      | string          | `#b8becc` |
+| active-value                                                                 |      打开时对应的值      | any             | `true`    |
+| inactive-value                                                               |      关闭时对应的值      | any             | `false`   |
+
+#### Events
+
+| 事件名 |        说明        | 回调参数     |
+| :----- | :----------------: | :----------- |
+| change | 开关状态切换时触发 | value: any   |
+| click  |     点击时触发     | event: Event |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-switch"
+ 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-switch"
+ 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/037-switchcell/345/274/200/345/205/263/345/215/225/345/205/203/346/240/274.md

@@ -0,0 +1,115 @@
+# 组件使用
+
+## switchcell 开关单元格
+
+### 介绍
+
+-   开关单元格组件。
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<em-cell-group>
+    <em-switch-cell title="标题" v-model="checked"></em-switch-cell>
+</em-cell-group>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            checked: true
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+
+const checked = ref(true);
+```
+
+::: endif
+
+#### 禁用状态
+
+通过`disabled`属性可以将组件设置为禁用状态
+
+```html
+<em-cell-group>
+    <em-switch-cell title="标题" :disabled="true" v-model="checked"></em-switch-cell>
+</em-cell-group>
+```
+
+#### 加载状态
+
+通过`loading`属性可以将组件设置为加载状态
+
+```html
+<em-cell-group>
+    <em-switch-cell title="标题" :loading="true" v-model="checked"></em-switch-cell>
+</em-cell-group>
+```
+
+### API
+
+#### Props
+
+| 参数                                                                         |             说明             | 类型            | 默认值    |
+| :--------------------------------------------------------------------------- | :--------------------------: | :-------------- | :-------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |           开关状态           | boolean         | `false`   |
+| title                                                                        |           左侧标题           | string          | `''`      |
+| border                                                                       |     是否展示单元格内边框     | boolean         | `true`    |
+| cell-size                                                                    | 单元格大小，可选值为 `large` | string          | -         |
+| loading                                                                      |        是否为加载状态        | boolean         | `false`   |
+| disabled                                                                     |        是否为禁用状态        | boolean         | `false`   |
+| size                                                                         |           开关尺寸           | number / string | `24px`    |
+| active-color                                                                 |        开关时的背景色        | string          | `#1989fa` |
+| inactive-color                                                               |        开关时的背景色        | string          | `white`   |
+| active-value                                                                 |          打开时的值          | any             | `true`    |
+| inactive-value                                                               |          关闭时的值          | any             | `false`   |
+
+#### Events
+
+| 事件名 |       说明       | 回调参数              |
+| :----- | :--------------: | :-------------------- |
+| change | 开关状态切换回调 | checked: 是否选中开关 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-switch-cell"
+ 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-switch-cell"
+ 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/038-tag/346/240/207/350/256/260.md

@@ -0,0 +1,232 @@
+# 组件使用
+
+## tag 标记
+
+### 介绍
+
+-   标记组件。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+通过 `type` 属性控制标签颜色。
+
+```html
+<em-tag type="primary">标签</em-tag>
+<em-tag type="success">标签</em-tag>
+<em-tag type="danger">标签</em-tag>
+<em-tag type="warning">标签</em-tag>
+```
+
+#### 基座风格: 人员、部门、职级等
+
+通过`basic-type`属性设置为`person`可使用基座风格的人员标签, 该类型下通过`photo`属性可设置头像
+
+```html
+<em-tag basic-type="person">科长</em-tag>
+<em-tag basic-type="person" closeable @close="close()">我的部门</em-tag>
+<em-tag basic-type="person" photo="https://img01.yzcdn.cn/vant/cat.jpeg">李科员</em-tag>
+```
+
+#### 基座风格: 属性标签
+
+通过`basic-type`属性设置为`type`可使用基座风格的属性标签, 基座风格的标签背景色都符合基座的规范
+
+```html
+<em-tag type="warning" basic-type="type">待审核</em-tag>
+<em-tag type="danger" basic-type="type">特急件</em-tag>
+<em-tag type="primary" basic-type="type">待分送</em-tag>
+```
+
+#### 基座风格: 新闻标题标签
+
+通过`basic-type`属性设置为`news`可使用基座风格的新闻标题标签, 基座风格的标签背景色都符合基座的规范
+
+```html
+<em-tag type="danger" basic-type="news">急</em-tag>
+<em-tag type="primary" basic-type="news">政策</em-tag>
+<em-tag type="danger" basic-type="news">热点</em-tag>
+```
+
+#### 基座风格: 状态标签
+
+通过`basic-type`属性设置为`status`可使用基座风格的状态标签, 该类型下通过`status`属性可设置状态, 只支持示例上的几种状态
+
+```html
+<em-tag basic-type="status" status="complete"></em-tag>
+<em-tag basic-type="status" status="loading"></em-tag>
+<em-tag basic-type="status" status="offline"></em-tag>
+```
+
+#### 基座风格: 数值标签
+
+通过`basic-type`属性设置为`number`可使用基座风格的状态标签, 基座风格的标签背景色都符合基座的规范
+
+```html
+<em-tag basic-type="number">12</em-tag>
+```
+
+#### 圆角样式
+
+通过 `round` 设置为圆角样式。
+
+```html
+<em-tag round type="primary">标签</em-tag>
+<em-tag round type="success">标签</em-tag>
+<em-tag round type="danger">标签</em-tag>
+<em-tag round type="warning">标签</van-tag>
+```
+
+#### 标记样式
+
+通过 `mark` 设置为标记样式(半圆角)。
+
+```html
+<em-tag mark type="primary">标签</em-tag>
+<em-tag mark type="success">标签</em-tag>
+<em-tag mark type="danger">标签</em-tag>
+<em-tag mark type="warning">标签</em-tag>
+```
+
+#### 空心样式
+
+设置 `plain` 属性设置为空心样式。
+
+```html
+<em-tag plain type="primary">标签</em-tag>
+<em-tag plain type="success">标签</em-tag>
+<em-tag plain type="danger">标签</em-tag>
+<em-tag plain type="warning">标签</em-tag>
+```
+
+#### 自定义颜色
+
+```html
+<em-tag color="#f2826a">标签</em-tag>
+<em-tag color="#7232dd">标签</em-tag>
+<em-tag color="#7232dd" plain>标签</em-tag>
+<em-tag color="#ffe1e1" text-color="#ad0000">标签</em-tag>
+```
+
+#### 标签大小
+
+```html
+<em-tag type="danger">标签</em-tag>
+<em-tag type="danger" size="medium">标签</em-tag>
+<em-tag type="danger" size="large">标签</em-tag>
+```
+
+#### 可关闭标签
+
+添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
+
+```html
+<em-tag v-if="show.primary" closeable size="medium" type="primary" @close="close('primary')">标签</em-tag>
+<em-tag v-if="show.success" closeable size="medium" type="success" @close="close('success')">标签</em-tag>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            show: {
+                primary: true,
+                success: true
+            }
+        };
+    },
+    methods: {
+        close(type) {
+            this.show[type] = false;
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const show = ref({
+    primary: true,
+    success: true
+});
+
+const close = (type) => {
+    show.value[type] = false;
+};
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数       |                                      说明                                      | 类型    | 默认值    | ::: ifdef M83 weex 端支持 ::: endif              |
+| :--------- | :----------------------------------------------------------------------------: | :------ | :-------- | :----------------------------------------------- |
+| type       |              类型，可选值为`primary` `success` `danger` `warning`              | string  | `default` | 是                                               |
+| size       |                         大小, 可选值为`large` `medium`                         | string  | -         | 是                                               |
+| color      |                                    标签颜色                                    | string  | -         | 是                                               |
+| plain      |                                 是否为空心样式                                 | boolean | `false`   | 是                                               |
+| round      |                                 是否为圆角样式                                 | boolean | `false`   | 是                                               |
+| mark       |                                 是否为标记样式                                 | boolean | `false`   | 是                                               |
+| text-color |                        文本颜色，优先级高于`color`属性                         | string  | `white`   | 是                                               |
+| closeable  |                                是否为可关闭标签                                | boolean | `false`   | 是                                               |
+| basic-type |       基座风格的标签类型, 可选值为` person``type``news``status``number `       | string  | `-`       | 是（在 weex 端基座类型样式都是固定的，无法修改） |
+| photo      |                     基座人员类型标签时，可用该属性设置头像                     | string  | `-`       | 是                                               |
+| status     | 基座状态类型标签时，可用该属性设置状态，可选值为` complete``loading``offline ` | string  | `-`       | 是                                               |
+
+#### Slots
+
+| 名称    |     说明     |
+| :------ | :----------: |
+| default | 标签显示内容 |
+
+#### Events
+
+| 事件名 |      说明      | 回调参数     |
+| :----- | :------------: | :----------- |
+| click  |   点击时触发   | event: Event |
+| close  | 关闭标签时触发 | -            |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-tag"
+ 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-tag"
+ 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>