m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/001-button/346/214/211/351/222/256.md

@@ -0,0 +1,497 @@
+# Button
+
+#### 按钮类型
+
+使用 `type` 属性控制按钮样式，可选值： `plain`, `round`, `circle` ，默认为 `round`。
+
+按钮支持 `default`、`success`、`primary`、`info`、`warning`、`danger` 六种类型，默认为 `default`。
+
+```html
+<template>
+  <e-row-m class="column-gap-4">
+    <e-button-m>Default</e-button-m>
+    <e-button-m type="primary">Primary</e-button-m>
+    <e-button-m type="success">Success</e-button-m>
+    <e-button-m type="info">Info</e-button-m>
+    <e-button-m type="warning">Warning</e-button-m>
+    <e-button-m type="danger">Danger</e-button-m>
+  </e-row-m>
+
+  <e-row-m class="column-gap-4">
+    <e-button-m :round="false">Default</e-button-m>
+    <e-button-m type="primary" :round="false">Primary</e-button-m>
+    <e-button-m type="success" :round="false">Success</e-button-m>
+    <e-button-m type="info" :round="false">Info</e-button-m>
+    <e-button-m type="warning" :round="false">Warning</e-button-m>
+    <e-button-m type="danger" :round="false">Danger</e-button-m>
+  </e-row-m>
+
+  <e-row-m class="column-gap-4">
+    <e-button-m plain>Plain</e-button-m>
+    <e-button-m type="primary" plain>Primary</e-button-m>
+    <e-button-m type="success" plain>Success</e-button-m>
+    <e-button-m type="info" plain>Info</e-button-m>
+    <e-button-m type="warning" plain>Warning</e-button-m>
+    <e-button-m type="danger" plain>Danger</e-button-m>
+  </e-row-m>
+
+  <e-row-m class="column-gap-4">
+    <e-button-m :icon="Search" circle />
+    <e-button-m type="primary" :icon="Edit" circle />
+    <e-button-m type="success" :icon="Check" circle />
+    <e-button-m type="info" :icon="Message" circle />
+    <e-button-m type="warning" :icon="Star" circle />
+    <e-button-m type="danger" :icon="Delete" circle />
+  </e-row-m>
+</template>
+
+<script lang="ts" setup>
+  import {
+    Check,
+    Delete,
+    Edit,
+    Message,
+    Search,
+    Star,
+  } from "@epoint-mfe/eui-icons";
+</script>
+<style lang="scss" scoped>
+  .column-gap-4{
+    display:flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+</style>
+```
+
+### 禁用状态
+
+你可以使用 `disabled` 属性来定义按钮是否被禁用。
+
+使用 `disabled` 属性来控制按钮是否为禁用状态。 该属性接受一个 `Boolean` 类型的值。
+
+```html
+<template>
+  <e-row-m class="column-gap-4">
+    <e-button-m disabled>Default</e-button-m>
+    <e-button-m type="primary" disabled>Primary</e-button-m>
+    <e-button-m type="success" disabled>Success</e-button-m>
+    <e-button-m type="info" disabled>Info</e-button-m>
+    <e-button-m type="warning" disabled>Warning</e-button-m>
+    <e-button-m type="danger" disabled>Danger</e-button-m>
+  </e-row-m>
+
+  <e-row-m class="column-gap-4">
+    <e-button-m plain disabled>Plain</e-button-m>
+    <e-button-m type="primary" plain disabled>Primary</e-button-m>
+    <e-button-m type="success" plain disabled>Success</e-button-m>
+    <e-button-m type="info" plain disabled>Info</e-button-m>
+    <e-button-m type="warning" plain disabled>Warning</e-button-m>
+    <e-button-m type="danger" plain disabled>Danger</e-button-m>
+  </e-row-m>
+</template>
+<style lang="scss" scoped>
+  .column-gap-4{
+    display:flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+</style>
+```
+
+## 链接按钮
+
+```html
+<template>
+  <p>Basic link button</p>
+  <div class="column-gap-4">
+    <e-button-m
+      v-for="button in buttons"
+      :key="button.text"
+      :type="button.type"
+      link
+    >{{ button.text }}</e-button-m>
+  </div>
+
+  <p>Disabled link button</p>
+  <div class="column-gap-4">
+    <e-button-m
+      v-for="button in buttons"
+      :key="button.text"
+      :type="button.type"
+      link
+      disabled
+    >{{ button.text }}</e-button-m>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const buttons = [
+    { type: "", text: "plain" },
+    { type: "primary", text: "primary" },
+    { type: "success", text: "success" },
+    { type: "info", text: "info" },
+    { type: "warning", text: "warning" },
+    { type: "danger", text: "danger" },
+  ] as const;
+</script>
+<style lang="scss" scoped>
+  .column-gap-4{
+    display:flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+</style>
+```
+
+## 文字按钮
+
+没有边框和背景色的按钮。
+
+```html
+<template>
+<p>Basic text button</p>
+  <div class="column-gap-4">
+    <e-button-m
+      v-for="button in buttons"
+      :key="button.text"
+      :type="button.type"
+      text
+    >{{ button.text }}</e-button-m>
+  </div>
+
+  <p>Background color always on</p>
+  <div class="column-gap-4">
+    <e-button-m
+      v-for="button in buttons"
+      :key="button.text"
+      :type="button.type"
+      text
+      bg
+    >{{ button.text }}</e-button-m>
+  </div>
+
+  <p>Disabled text button</p>
+  <div class="column-gap-4">
+    <e-button-m
+      v-for="button in buttons"
+      :key="button.text"
+      :type="button.type"
+      text
+      disabled
+    >{{ button.text }}</e-button-m>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const buttons = [
+    { type: "", text: "plain" },
+    { type: "primary", text: "primary" },
+    { type: "success", text: "success" },
+    { type: "info", text: "info" },
+    { type: "warning", text: "warning" },
+    { type: "danger", text: "danger" },
+  ] as const;
+</script>
+<style lang="scss" scoped>
+  .column-gap-4{
+    display:flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+</style>
+```
+
+### 图标按钮
+
+使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
+
+使用 `icon` 属性来为按钮添加图标。 您可以在我们的 `Icon` 组件中找到所需图标。 通过向右方添加`<i>`标签来添加图标， 你也可以使用自定义图标。
+
+```html
+<template>
+  <div class="column-gap-4">
+    <e-button-m type="primary" :icon="Edit" />
+    <e-button-m type="primary" :icon="Share" />
+    <e-button-m type="primary" :icon="Delete" />
+    <e-button-m type="primary" :icon="Search">Search</e-button-m>
+    <e-button-m type="primary">
+      Upload<e-icon-m class="ep-icon--right"><Upload /></e-icon-m>
+    </e-button-m>
+  </div>
+</template>
+<script setup lang="ts">
+  import {
+    Delete,
+    Edit,
+    Search,
+    Share,
+    Upload,
+  } from "@epoint-mfe/eui-icons";
+</script>
+<style lang="scss" scoped>
+  .column-gap-4{
+    display:flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+  .ep-icon--right {
+    display: flex;
+    align-items: center;
+    font-size: 1.2em;
+    margin-left: var(--e-space-s);
+}
+</style>
+```
+
+### 按钮组
+
+以按钮组的方式出现，常用于多项类似操作。
+
+使用 `<e-button-group-m>` 对多个按钮分组。
+
+```html
+<template>
+<e-button-group-m>
+  <e-button-m type="primary" :icon="ArrowLeft">Previous Page</e-button-m>
+  <e-button-m type="primary">
+  Next Page<e-icon-m class="ep-icon--right"><ArrowRight /></e-icon-m>
+  </e-button-m>
+</e-button-group-m>
+
+<e-button-group-m class="ml-4">
+  <e-button-m type="primary" :icon="Edit" />
+  <e-button-m type="primary" :icon="Share" />
+  <e-button-m type="primary" :icon="Delete" />
+</e-button-group-m>
+</template>
+<script setup lang="ts">
+  import {
+    ArrowLeft,
+    ArrowRight,
+    Delete,
+    Edit,
+    Share,
+  } from "@epoint-mfe/eui-icons";
+</script>
+<style lang="scss" scoped>
+  .ep-icon--right {
+    display: flex;
+    align-items: center;
+    font-size: 1.2em;
+    margin-left: var(--e-space-s);
+}
+</style>
+```
+
+### 加载状态按钮
+
+点击按钮来加载数据，并向用户反馈加载状态。
+
+通过设置 `loading` 属性为 `true` 来显示加载中状态。
+
+您可以使用 `loading` 插槽或 `loadingIcon` 属性自定义您的 `loading` 图标
+
+PS: `loading` 插槽优先级高于 `loadingIcon` 属性
+
+```html
+<template>
+  <e-button-m type="primary" loading>Loading</e-button-m>
+  <e-button-m type="primary" :loading-icon="Football" loading>Loading</e-button-m>
+  <e-button-m type="primary" loading>
+      <template #loading>
+          <e-icon-m :name="Football"></e-icon-m>
+      </template>
+      Loading
+  </e-button-m>
+</template>
+
+<script lang="ts" setup>
+  import { Football } from "@epoint-mfe/eui-icons";
+</script>
+
+<style scoped>
+  .ep-button .custom-loading .circular {
+    margin-right: 6px;
+    width: 18px;
+    height: 18px;
+    animation: loading-rotate 2s linear infinite;
+  }
+  .ep-button .custom-loading .circular .path {
+    animation: loading-dash 1.5s easep-in-out infinite;
+    strokep-dasharray: 90, 150;
+    strokep-dashoffset: 0;
+    strokep-width: 2;
+    stroke: var(--ep-button-text-color);
+    strokep-linecap: round;
+  }
+</style>
+```
+
+### 块级按钮
+
+使用 `block` 属性可以让按钮占据父容器的全部宽度。
+
+使用 `block` 属性来让按钮占据父容器的全部宽度。
+
+```html
+<template>
+  <div class="demo-block">
+    <e-button-m block>块级按钮</e-button-m>
+    <e-button-m type="primary" block>主要按钮</e-button-m>
+    <e-button-m type="success" block>成功按钮</e-button-m>
+    <e-button-m type="warning" block>警告按钮</e-button-m>
+    <e-button-m type="danger" block>危险按钮</e-button-m>
+    <e-button-m type="info" block>信息按钮</e-button-m>
+  </div>
+</template>
+```
+
+### 调整尺寸
+
+除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
+
+使用 `size` 属性额外配置尺寸，可使用 `large` 和 `small` 两种值。
+
+```html
+<template>
+  <e-row-m class="column-gap-4">
+    <e-button-m size="large" round>Large</e-button-m>
+    <e-button-m round>Default</e-button-m>
+    <e-button-m size="small" round>Small</e-button-m>
+    <e-button-m size="large" :icon="Search" round>Search</e-button-m>
+    <e-button-m :icon="Search" round>Search</e-button-m>
+    <e-button-m size="small" :icon="Search" round>Search</e-button-m>
+  </e-row-m>
+  <e-row-m class="column-gap-4">
+    <e-button-m :icon="Search" size="large" circle />
+    <e-button-m :icon="Search" circle />
+    <e-button-m :icon="Search" size="small" circle />
+  </e-row-m>
+</template>
+
+<script setup lang="ts">
+  import { Search } from "@epoint-mfe/eui-icons";
+</script>
+<style lang="scss" scoped>
+  .column-gap-4{
+    display:flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+</style>
+```
+
+### 自定义颜色
+
+您可以自定义按钮的颜色。
+
+```html
+<template>
+  <div class="column-gap-4">
+    <e-button-m color="#626aef" :dark="isDark">Default</e-button-m>
+    <e-button-m color="#626aef" :dark="isDark" plain>Plain</e-button-m>
+
+    <e-button-m color="#626aef" :dark="isDark" disabled>Disabled</e-button-m>
+    <e-button-m color="#626aef" :dark="isDark" disabled plain>Disabled Plain</e-button-m>
+  </div>
+</template>
+```
+
+```js
+<script lang="ts" setup>
+  const isDark = ref(false);
+</script>
+<style lang="scss" scoped>
+  .column-gap-4{
+    display:flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+</style>
+```
+
+## Button API
+
+### Button Attributes
+
+tips 移动端不支持PC端的自定义标签 tag。
+
+| 属性名            | 说明                                                   | 类型                 | 默认值                                                 |
+| ----------------- | ------------------------------------------------------ | -------------------- | ------------------------------------------------------ |
+| size              | 尺寸                                                   | `string` (`'large'\| 'default'\| 'small'`)               | default                        |
+| type              | 类型                                                   | `string` (`'default'\|'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'`)            | default |
+| plain             | 是否为朴素按钮                                         | `boolean`            | false                                                  |
+| text              | 是否为文字按钮                                         | `boolean`            | false                                                  |
+| bg                | 是否显示文字按钮背景颜色                               | `boolean`            | false                                                  |
+| link              | 是否为链接按钮                                         | `boolean`            | false                                                  |
+| round             | 是否为圆角按钮                                         | `boolean`            | true                                                   |
+| circle            | 是否为圆形按钮                                         | `boolean`            | false                                                  |
+| block             | 是否为块级按钮                                         | `boolean`            | false                                                  |
+| loading           | 是否为加载中状态                                       | `boolean`            | false                                                  |
+| loading-icon      | 自定义加载中状态图标组件                               | `string / Component` | Loading                                                |
+| disabled          | 按钮是否为禁用状态                                     | `boolean`            | false                                                  |
+| icon              | 图标组件                                               | `string / Component` | —                                                      |
+| iconColor         | 图标组件颜色                                           | `string`             | `#fff`                                                 |
+| autofocus         | 原生 autofocus 属性                                    | `boolean`            | false                                                  |
+| nativep-type      | 原生 type 属性                                         | `string` (`'button'\| 'submit'\| 'reset'`)             | button                  |
+| auto-insert-space | 自动在两个中文字符之间插入空格                         | `boolean`            | —                                                      |
+| color             | 自定义按钮颜色                                         | `string`             | —                                                      |
+| dark              | dark 模式, 意味着自动设置 `color` 为 `dark` 模式的颜色 | `boolean`            | false                                                  |
+
+### Button Slots
+
+| 插槽名  | 说明             |
+| ------- | ---------------- |
+| default | 自定义默认内容   |
+| loading | 自定义加载中组件 |
+| icon    | 自定义图标组件   |
+
+### Button Exposes
+
+| 属性名         | 说明                       | 类型                                                                                        |
+| -------------- | -------------------------- | ------------------------------------------------------------------------------------------- |
+| ref            | 按钮 html 元素             | `Ref<HTMLButtonElement>`                                                                    |
+| size           | 按钮尺寸                   | `ComputedRef<'' \| 'small' \| 'default' \| 'large'>`                                        |
+| type           | 按钮类型                   | `ComputedRef<'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger'>` |
+| disabled       | 是否禁用                   | `ComputedRef<boolean>`                                                                      |
+| shouldAddSpace | 是否在两个字符之间插入空格 | `ComputedRef<boolean>`                                                                      |
+
+## ButtonGroup API
+
+### ButtonGroup Attributes
+
+| 属性名 | 说明                         | 类型     | 默认值                                                 |
+| ------ | ---------------------------- | -------- | ------------------------------------------------------ |
+| size   | 用于控制该按钮组内按钮的大小 | `string` (`'large'\| 'default'\| 'small'`)|           -           |
+| type   | 用于控制该按钮组内按钮的类型 | `string` (`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'`)| - |
+
+### ButtonGroup Slots
+
+| 插槽名  | 说明             | 子标签 |
+| ------- | ---------------- | ------ |
+| default | 自定义按钮组内容 | Button |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-button-m"
+ 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/018-EPUI/347/273/204/344/273/266/002-buttonedit/346/214/211/351/222/256/347/274/226/350/276/221.md

@@ -0,0 +1,146 @@
+# ButtonEdit
+
+ButtonEdit 控件是专门给在 VUE 页面中弹出 F9 开发的选择页面这个场景开发的。
+
+-   通过 popupUrl 参数指定弹出的页面地址。
+
+-   通过 vModel 绑定控件值，vModel:text 绑定控件的文本。
+
+-   弹出的 F9 页面无须改造，正常使用 epoint.closeDialog 方法关闭页面进行传值即可。
+
+-   Vue 的页面中通过监听 close 事件获取 F9 页面返回的值，事件参数 e.params 即为 F9 页面 epoint.closeDialog 的回传值，按实际需求格式化成控件需要的格式。
+
+#### 常规使用
+
+```html
+<template>
+    <div class="van-content">
+        <text class="cell-title">基本用法</text>
+        <div class="flex justify-spacep-between mb-4 flex-wrap gap-4 buttonedit-box">
+            <div class="cell-title">
+                <p>text: {{ text }}</p>
+                <p>value: {{ value }}</p>
+            </div>
+            <e-button-edit-m v-model="value" v-model:text="text" placeholder="请输入" :clearable="true" :disabled="false"
+                :readonly="false" size="default" :allowInput="true" :popupUrl="popupUrl" title="F9页面标题"
+                :popupWidth="'95%'" :popupHeight="500" :before="beforehandler" @click="clickHandler"
+                @close="onButtonEditClose"></e-button-edit-m>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+const value = ref('89706');
+const text = ref('承办人');
+// const popupUrl = ref('http://192.168.219.170/docs/vue/latest/frame/?_dialogId_=dialog-A581ED18-ADE2-45FA-B4C2-8A8C7870F361');
+const popupUrl = ref('http://localhost:8080/#/modules/epshowcase/demo');
+
+const beforehandler = () => {
+    console.log('🚀~~~ :::beforehandler');
+    return true;
+}
+const clickHandler = () => {
+    console.log('🚀~~~ :::clickHandler');
+};
+
+const onButtonEditClose = (e) => {
+    console.log('🚀~~~ :::closeHandler', e);
+    const pArr = e.params.split(';');
+    // 将返回的数据格式化成 ButtonEdit 控件需要的格式
+    // 为保证params和组件中引用同一个对象，只支持e.params方式修改params；并且修改只能是在同步函数中修改，不支持异步修改
+    e.params = {
+        text: pArr[0],
+        value: pArr[1]
+    };
+};
+</script>
+<style lang="scss" scoped>
+.van-content {
+    background-color: #fff;
+    height: 100vh;
+}
+@import '../css/common.scss';
+</style>
+```
+
+#### 被打开页面 demo
+
+```html
+<template>
+    <view style="display: flex;flex-direction: column;justify-content: center;padding: 30px;height: 100vh;">
+        <em-button block plain type="primary" @click="testPostMessage">测试window.parent.postMessage</em-button>
+    </view>
+</template>
+
+<script setup lang="ts">
+const testPostMessage = () => {
+    ejs.ui.toast('点击按钮');
+    window.parent.postMessage(
+        {
+            type: 'closeDialog', // 固定值，告诉父页面次消息是用来关闭 dialog
+            id: '', // dialog 的 id，从 url 上获取
+            params: 'test message;123465748', // 要传递给 closeCallback 回调方法的参数
+        },
+        '*'
+    );
+}
+</script>
+```
+
+## ButtonEdit API
+
+### 属性
+
+| 属性名       | 说明                                                      | 类型                          | 默认值  |
+| ------------ | --------------------------------------------------------- | ----------------------------- | ------- |
+| v-model      | 绑定值                                                    | `string`                      | —       |
+| v-model:text | 绑定文本                                                  | `string`                      | —       |
+| placeholder  | 输入框占位文本                                            | `string`                      | —       |
+| before       | 弹窗打开前可执行的方法，支持异步，返回`false`可以中断逻辑 | `() => Promise<boolean>`      | -       |
+| clearable    | 是否显示清除按钮                                          | `boolean`                     | `false` |
+| disabled     | 是否禁用                                                  | `boolean`                     | `false` |
+| readonly     | 是否只读                                                  | `boolean`                     | `false` |
+| size         | 输入框尺寸                                                | `'large'、'default'、'small'` | —       |
+| allowInput   | 是否允许输入(允许输入时仅按钮触发弹窗，否则整个控件触发)  | `boolean`                     | `false` |
+| popupUrl     | 弹窗页面地址                                              | `string`                      | —       |
+| title        | 弹窗标题                                                  | `string`                      | —       |
+| popupWidth   | 弹窗宽度                                                  | `number/string`               | `'95%'` |
+| popupHeight  | 弹窗高度                                                  | `number`                      | `500`   |
+
+### 事件
+
+| 名称  | 描述                     | 类型                                                                  |
+| ----- | ------------------------ | --------------------------------------------------------------------- |
+| click | 按钮点击弹出弹窗前触发   | `() => void`                                                          |
+| close | 关闭弹窗更新控件值前触发 | `(event: { cancel: boolean, params: Record<string, string>}) => void` |
+
+### 方法
+
+| 名称     | 描述         | 类型           |
+| -------- | ------------ | -------------- |
+| getValue | 获取控件值   | `() => string` |
+| getText  | 获取控件文本 | `() => string` |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/ep-buttonedit-m"
+ 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>