m8-mcp-server 1.0.0

package/dist/data/m8mpdoc-develop/009-UI/347/273/204/344/273/266/066-badge/345/276/275/346/240/207.md

@@ -0,0 +1,162 @@
+# 组件使用
+
+
+
+## badge 徽标
+
+### 介绍
+
+-   在右上角展示徽标数字或小红点。
+
+### 代码演示
+
+#### 基础用法
+设置 `content` 属性后，`Badge` 会在子元素的右上角显示对应的徽标，也可以通过 `dot` 来显示小红点。
+
+```html
+<em-badge :content="5">
+  <div class="child" />
+</em-badge>
+<em-badge :content="10">
+  <div class="child" />
+</em-badge>
+<em-badge content="Hot">
+  <div class="child" />
+</em-badge>
+<em-badge dot>
+  <div class="child" />
+</em-badge>
+
+<style>
+  .child {
+    width: 40px;
+    height: 40px;
+    background: #f2f3f5;
+    border-radius: 4px;
+  }
+</style>
+```
+
+#### 最大值
+
+设置 `max` 属性后，当 `content` 的数值超过最大值时，会自动显示为 `{max}+`。
+
+```html
+<em-badge :content="20" max="9">
+  <div class="child" />
+</em-badge>
+<em-badge :content="50" max="20">
+  <div class="child" />
+</em-badge>
+<em-badge :content="200" max="99">
+  <div class="child" />
+</em-badge>
+```
+
+#### 自定义颜色
+
+通过 `color` 属性来设置徽标的颜色。
+
+```html
+<em-badge :content="5" color="#1989fa">
+  <div class="child" />
+</em-badge>
+<em-badge :content="10" color="#1989fa">
+  <div class="child" />
+</em-badge>
+<em-badge dot color="#1989fa">
+  <div class="child" />
+</em-badge>
+```
+
+#### 自定义徽标内容
+
+通过 `content` 插槽可以自定义徽标的内容，比如插入一个图标。
+
+```html
+<em-badge>
+  <div class="child" />
+  <template #content>
+    <em-icon name="success" class="badge-icon" />
+  </template>
+</em-badge>
+<em-badge>
+  <div class="child" />
+  <template #content>
+    <em-icon name="cross" class="badge-icon" />
+  </template>
+</em-badge>
+<em-badge>
+  <div class="child" />
+  <template #content>
+    <em-icon name="down" class="badge-icon" />
+  </template>
+</em-badge>
+```
+
+```css
+.badge-icon {
+  display: block;
+  font-size: 10px;
+  line-height: 16px;
+}
+```
+
+#### 独立展示
+
+当 `Badge` 没有子元素时，会作为一个独立的元素进行展示。
+
+```html
+<em-badge :content="20" />
+
+<em-badge :content="200" max="99" />
+```
+
+### API
+
+#### Props
+
+|参数	|说明	|类型|	默认值|
+| :------------- |:-------------:|:-------------|:-------------|
+|content|	徽标内容|	number / string	|-|
+|color	|徽标背景颜色|	string|	`#e03f3f`|
+|dot|	是否展示为小红点	|boolean|	`false`|
+|max	|最大值，超过最大值会显示 `{max}+`，仅当 `content` 为数字时有效|	number / string	|-|
+
+#### Slots
+
+|名称	|说明|
+| :------------- |:-------------:|
+|default|	徽标包裹的子元素|
+|content|	自定义徽标内容|
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-badge"
+ 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-badge"
+ 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/067-popover/346/260/224/346/263/241/345/274/271/345/207/272/346/241/206.md

@@ -0,0 +1,325 @@
+# 组件使用
+
+## popover 气泡弹出框
+
+### 介绍
+
+-   弹出式的气泡菜单, M8 框架`8.2.10`版本以上支持。
+
+### 代码演示
+
+#### 基础用法
+
+当 `Popover` 弹出时，会基于 `reference` 插槽的内容进行定位。
+
+::: ifdef M83
+
+```html
+<em-popover v-model="showPopover" :actions="actions" @select="onSelect">
+    <template #reference>
+        <em-button type="primary">浅色风格</em-button>
+    </template>
+</em-popover>
+<em-toast ref="emToast"></em-toast>
+```
+
+```js
+export default {
+    data() {
+        return {
+            showPopover: false,
+            // 通过 actions 属性来定义菜单选项
+            actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }]
+        };
+    },
+    methods: {
+        onSelect(action) {
+            Toast(action.text);
+        }
+    }
+};
+```
+
+::: endif
+
+::: ifdef M84
+
+```html
+<em-popover v-model="showPopover" :actions="actions" @select="onSelect">
+    <template #reference>
+        <em-button type="primary">浅色风格</em-button>
+    </template>
+</em-popover>
+<em-toast ref="emToastRef"></em-toast>
+```
+
+```js
+import { ref } from 'vue';
+const showPopover = ref(false);
+const actions = ref([{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }]);
+const emToastRef = ref(null);
+const onSelect = (action) => {
+    Toast(action.text);
+};
+defineExpose({
+    emToastRef
+});
+```
+
+::: endif
+
+#### 深色风格
+
+`Popover` 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
+
+```html
+<em-popover v-model="showPopover" theme="dark" :actions="actions">
+    <template #reference>
+        <em-button type="primary">深色风格</em-button>
+    </template>
+</em-popover>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            showPopover: false,
+            actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const showPopover = ref(false);
+const actions = ref([{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }]);
+```
+
+::: endif
+
+#### 弹出位置
+
+通过 `placement` 属性来控制气泡的弹出位置。
+
+```html
+<em-popover placement="top" />
+```
+
+```
+placement 支持以下值：
+
+top           # 顶部中间位置
+top-start     # 顶部左侧位置
+top-end       # 顶部右侧位置
+left          # 左侧中间位置
+left-start    # 左侧上方位置
+left-end      # 左侧下方位置
+right         # 右侧中间位置
+right-start   # 右侧上方位置
+right-end     # 右侧下方位置
+bottom        # 底部中间位置
+bottom-start  # 底部左侧位置
+bottom-end    # 底部右侧位置
+```
+
+#### 展示图标
+
+在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入图标名称或图片链接。
+
+```html
+<em-popover v-model="showPopover" :actions="actions">
+    <template #reference>
+        <em-button type="primary">展示图标</em-button>
+    </template>
+</em-popover>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            showPopover: false,
+            actions: [
+                { text: '选项一', icon: 'add-o' },
+                { text: '选项二', icon: 'music-o' },
+                { text: '选项三', icon: 'more-o' }
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const showPopover = ref(false);
+const actions = ref([
+    { text: '选项一', icon: 'add-o' },
+    { text: '选项二', icon: 'music-o' },
+    { text: '选项三', icon: 'more-o' }
+]);
+```
+
+::: endif
+
+#### 禁用选项
+
+在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
+
+```html
+<em-popover v-model="showPopover" :actions="actions">
+    <template #reference>
+        <em-button type="primary">禁用选项</em-button>
+    </template>
+</em-popover>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            showPopover: false,
+            actions: [{ text: '选项一', disabled: true }, { text: '选项二', disabled: true }, { text: '选项三' }]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const showPopover = ref(false);
+const actions = ref([{ text: '选项一', disabled: true }, { text: '选项二', disabled: true }, { text: '选项三' }]);
+```
+
+::: endif
+
+#### 自定义内容
+
+通过默认插槽，可以在 `Popover` 内部放置任意内容。
+
+```html
+<em-popover v-model="showPopover">
+    <uni-row>
+        <uni-col :span="24">
+            <em-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+        </uni-col>
+    </uni-row>
+    <template #reference>
+        <em-button type="primary">自定义内容</em-button>
+    </template>
+</em-popover>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            showPopover: false
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+const showPopover = ref(false);
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数                                                                         |                           说明                           | 类型             | 默认值   |
+| :--------------------------------------------------------------------------- | :------------------------------------------------------: | :--------------- | :------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |                    是否展示气泡弹出层                    | boolean          | `false`  |
+| actions                                                                      |                         选项列表                         | Action[]         | `[]`     |
+| placement                                                                    |                         弹出位置                         | string           | `bottom` |
+| theme                                                                        |                主题风格，可选值为 `dark`                 | string           | `light`  |
+| offset                                                                       |                     出现位置的偏移量                     | [number, number] | `[0, 8]` |
+| overlay                                                                      |                      是否显示遮罩层                      | boolean          | `false`  |
+| close-on-click-action                                                        |                   是否在点击选项后关闭                   | boolean          | `true`   |
+| close-on-click-outside                                                       |               是否在点击外部元素后关闭菜单               | boolean          | `true`   |
+| close-on-touchmove-outside `8.3.19-beta.0`                                   |               是否在滑动外部元素后关闭菜单               | boolean          | `false`  |
+| trigger `8.3.19-beta.0`                                                      | 触发方式，可选值为`click`、`longpress`、`manual（手动）` | boolean          | `click`  |
+
+#### Action 数据结构
+
+`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
+
+| 键名      |                    说明                    | 类型    |
+| :-------- | :----------------------------------------: | :------ |
+| text      |                  选项文字                  | string  |
+| icon      | 文字左侧的图标，支持传入图标名称或图片链接 | string  |
+| disabled  |               是否为禁用状态               | boolean |
+| className |          为对应选项添加额外的类名          | any     |
+
+#### Events
+
+| 事件名 |           说明           | 回调参数                      |
+| :----- | :----------------------: | :---------------------------- |
+| select |      点击选项时触发      | action: Action, index: number |
+| open   |      打开菜单时触发      | -                             |
+| close  |      关闭菜单时触发      | -                             |
+| opened | 打开菜单且动画结束后触发 | -                             |
+| closed | 关闭菜单且动画结束后触发 | -                             |
+
+#### Slots
+
+| 名称      |            说明             |
+| :-------- | :-------------------------: |
+| default   |       自定义菜单内容        |
+| reference | 触发 Popover 显示的元素内容 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-popover"
+ 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-popover"
+ 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>