m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/038-alert/346/217/220/347/244/272.md

@@ -0,0 +1,206 @@
+# Alert
+
+用于显示重要的提示信息。
+
+## 基础用法
+
+Alert 组件不会自动消失，是页面中的非浮动元素。
+
+Alert 组件提供五种主题，由 type 属性指定，默认值为 `info`。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="primary alert" type="primary" />
+		<e-alert-m title="success alert" type="success" />
+		<e-alert-m title="info alert" type="info" />
+		<e-alert-m title="warning alert" type="warning" />
+		<e-alert-m title="error alert" type="error" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+	.ep-alert {
+		& + & {
+			margin-top: 20px;
+		}
+	}
+</style>
+```
+
+## 主题
+
+Alert 组件提供了两个不同的主题：`light` 和 `dark`。
+
+通过设置 `effect` 属性来改变主题，默认为 `light`。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="success alert" type="success" effect="dark" />
+		<e-alert-m title="info alert" type="info" effect="dark" />
+		<e-alert-m title="warning alert" type="warning" effect="dark" />
+		<e-alert-m title="error alert" type="error" effect="dark" />
+		<e-alert-m title="error alert" type="primary" effect="dark" />
+	</div>
+</template>
+```
+
+## 自定义关闭按钮
+
+可自定义关闭按钮为文字或其他符号。
+
+Alert 组件允许你配置是否可关闭。关闭按钮的文本和关闭回调也支持自定义。`closable` 属性决定组件是否可以关闭，接受 `boolean` 值，默认为 `true`。
+
+你可以设置 `close-text` 属性来代替默认的关闭符号。请注意 `close-text` 必须是字符串。当组件被关闭时会触发 `close` 事件。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="unclosable alert" type="success" :closable="false" />
+		<e-alert-m title="customized close-text" type="info" close-text="Gotcha" />
+		<e-alert-m title="alert with callback" type="warning" @close="hello" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	const hello = () => {
+		alert("Hello World!");
+	};
+</script>
+```
+
+## 图标
+
+显示图标可以让信息更易读。
+
+设置 `show-icon` 属性即可显示与 Alert 类型相对应的图标。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="success alert" type="primary" show-icon />
+		<e-alert-m title="success alert" type="success" show-icon />
+		<e-alert-m title="info alert" type="info" show-icon />
+		<e-alert-m title="warning alert" type="warning" show-icon />
+		<e-alert-m title="error alert" type="error" show-icon />
+	</div>
+</template>
+```
+
+## 文字居中
+
+使用 `center` 属性让文字水平居中。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="success alert" type="success" center show-icon />
+		<e-alert-m title="info alert" type="info" center show-icon />
+		<e-alert-m title="warning alert" type="warning" center show-icon />
+		<e-alert-m title="error alert" type="error" center show-icon />
+	</div>
+</template>
+```
+
+## 辅助性文字
+
+包含标题和内容，解释更详细的警告。
+
+除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好地介绍信息。描述只能是字符串，会自动换行显示。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="with description" type="success" description="This is a description." />
+	</div>
+</template>
+```
+
+## 图标和描述
+
+这是一个同时具有图标和描述的示例。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="success alert" type="success" description="more text description" show-icon />
+		<e-alert-m title="info alert" type="info" description="more text description" show-icon />
+		<e-alert-m title="warning alert" type="warning" description="more text description" show-icon />
+		<e-alert-m title="error alert" type="error" description="more text description" show-icon />
+	</div>
+</template>
+```
+
+## 折叠面板
+
+通过设置 `collapsible` 属性来启用折叠面板功能。你可以使用 `expand-text` 和 `collapse-text` 属性来自定义展开和收起状态下的按钮文本。
+
+```html
+<template>
+	<div class="container">
+		<e-alert-m title="success alert" type="success" description="more text description" collapsible />
+
+		<e-alert-m title="info alert" type="info" description="more text description" collapsible collapse-text="collapse" expand-text="expand" show-icon />
+
+		<e-alert-m title="warning alert" type="warning" description="more text description" center collapsible collapse-text="collapse" expand-text="expand" />
+
+		<e-alert-m title="error alert" type="error" description="more text description" center show-icon collapsible collapse-text="collapse" expand-text="expand" />
+	</div>
+</template>
+```
+
+## Alert API
+
+### Alert Attributes
+
+| 属性名        | 说明                 | 类型                                         | 默认值  |
+| ------------- | -------------------- | -------------------------------------------- | ------- |
+| title         | 标题                 | `string`                                     | `-`     |
+| type          | 类型                 | `success / primary / warning / info / error` | `info`  |
+| description   | 描述性文本           | `string`                                     | `-`     |
+| closable      | 是否可关闭           | `boolean`                                    | `true`  |
+| center        | 文字是否居中         | `boolean`                                    | `false` |
+| close-text    | 自定义关闭按钮文本   | `string`                                     | `-`     |
+| show-icon     | 是否显示类型图标     | `boolean`                                    | `flase` |
+| effect        | 主题样式             | `light / dark`                               | `light` |
+| collapsible   | 是否显示折叠按钮     | `boolean`                                    | `false` |
+| expand-text   | 展开状态下的按钮文本 | `string`                                     | `收起`  |
+| collapse-text | 收起状态下的按钮文本 | `string`                                     | `展开`  |
+
+### Alert Events
+
+| 事件名 | 说明              | 参数                          |
+| ------ | ----------------- | ----------------------------- |
+| close  | 关闭 Alert 时触发 | `(event: MouseEvent) => void` |
+
+### Alert Slots
+
+| 插槽名  | 说明           |
+| ------- | -------------- |
+| default | Alert 描述内容 |
+| title   | Alert 标题内容 |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-alert-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/039-scrollbar/346/273/232/345/212/250/346/235/241.md

@@ -0,0 +1,256 @@
+# ScrollBar 滚动条
+
+用于替换浏览器原生滚动条。
+
+
+
+## 基础用法
+
+通过 `height` 属性设置滚动条高度，若不设置则根据父容器高度自适应。
+
+```html
+<template>
+    <e-scrollbar-m height="400px">
+        <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
+    </e-scrollbar-m>
+</template>
+
+<style lang="scss" scoped>
+.scrollbar-demo-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    margin: 10px;
+    text-align: center;
+    border-radius: 4px;
+    background: var(--e-color-primary-light-8);
+    color: var(--e-color-primary);
+}
+</style>
+```
+
+
+
+## 横向滚动
+
+当元素宽度大于滚动条宽度时，会显示横向滚动条。
+
+```html
+<template>
+    <e-scrollbar-m>
+        <div class="scrollbar-flex-content">
+            <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
+                {{ item }}
+            </p>
+        </div>
+    </e-scrollbar-m>
+</template>
+<style lang="scss" scoped>
+.scrollbar-flex-content {
+	display: flex;
+}
+.scrollbar-demo-item {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 50px;
+    margin: 10px;
+    text-align: center;
+    border-radius: 4px;
+    background: var(--e-color-danger-light-7);
+    color: var(--e-color-danger);
+}
+</style>
+```
+
+
+
+## 最大高度
+
+当元素高度超过最大高度，才会显示滚动条。
+
+```html
+<template>
+    <div class="cell-buttons">
+        <e-button-m size="small" @click="add">添加项</e-button-m>
+        <e-button-m size="small" @click="onDelete">删除项</e-button-m>
+    </div>
+    <e-scrollbar-m max-height="400px">
+        <p v-for="item in count" :key="item" class="scrollbar-demo-item">
+            {{ item }}
+        </p>
+    </e-scrollbar-m>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const count = ref(3);
+const add = () => {
+    count.value++;
+};
+const onDelete = () => {
+    if (count.value > 0) {
+        count.value--;
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.cell-buttons {
+    padding-left: 10px;
+}
+.scrollbar-demo-item {
+ 	display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    margin: 10px;
+    text-align: center;
+    border-radius: 4px;
+    background: var(--e-color-primary-light-8);
+    color: var(--e-color-primary);
+}
+</style>
+
+```
+
+
+
+## 手动滚动
+
+通过使用`setScrollTop`与`setScrollLeft`方法，可以手动控制滚动条滚动。
+
+```html
+<template>
+    <e-scrollbar-m ref="scrollbarRef" height="400px" always @scroll="scroll">
+        <div>
+            <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
+                {{ item }}
+            </p>
+        </div>
+    </e-scrollbar-m>
+    <div>
+        <text class="tips">当前scrollTop高度{{ curScrollTop }}px</text>
+        <div class="cell-buttons">
+            <e-button-m size="small" @click="addScrollTop">增加50</e-button-m>
+            <e-button-m size="small" @click="reduceScrollTop">减少50</e-button-m>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type {Scrollbar}  from '@epoint-mfe/eui-components';
+
+//滚动条实例
+const curScrollTop = ref(0);
+const scrollbarRef = ref<InstanceType<typeof Scrollbar>>();
+//滚动事件
+const scroll = ({ scrollTop }) => {
+    curScrollTop.value = scrollTop;
+};
+//增加scrollTop
+const addScrollTop = () => {
+    let newVal = curScrollTop.value + 50;
+    scrollbarRef.value?.setScrollTop(newVal);
+};
+//减少scrollTop
+const reduceScrollTop = () => {
+    let newVal = curScrollTop.value - 50;
+    scrollbarRef.value?.setScrollTop(newVal);
+};
+</script>
+
+<style lang="scss" scoped>
+.scrollbar-demo-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    margin: 10px;
+    text-align: center;
+    border-radius: 4px;
+    background: var(--e-color-primary-light-8);
+    color: var(--e-color-primary);
+}
+.tips {
+    margin-left: 10px;
+    font-size: 13px;
+    & + .cell-buttons {
+        margin-top: 5px;
+    }
+}
+</style>
+```
+
+
+
+## API
+
+### Attributes
+
+| Name       | Description                                                  | Type                                                  | Default |
+| :--------- | :----------------------------------------------------------- | :---------------------------------------------------- | :------ |
+| height     | 滚动条高度                                                   | `string` / `number`                                   | —       |
+| max-height | 滚动条最大高度                                               | `string` / `number`                                   | —       |
+| native     | 是否使用原生滚动条样式                                       | `boolean`                                             | false   |
+| wrap-style | 包裹容器的自定义样式                                         | `string` / `CSSProperties丨CSSProperties[]丨string[]` | —       |
+| wrap-class | 包裹容器的自定义类名                                         | `string`                                              | —       |
+| view-style | 视图的自定义样式                                             | `string` / `CSSProperties丨CSSProperties[]丨string[]` | —       |
+| view-class | 视图的自定义类名                                             | `string`                                              | —       |
+| noresize   | 不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能 | `boolean`                                             | false   |
+| tag        | 视图的元素标签                                               | `string`                                              | div     |
+| always     | 滚动条总是显示                                               | `boolean`                                             | false   |
+| min-size   | 滚动条最小尺寸                                               | `number`                                              | 20      |
+| visible    | 是否显示滚动条                                               | `boolean`                                             | false    |
+
+### Events
+
+| Name   | Description                      | Type                                                  |
+| :----- | :------------------------------- | :---------------------------------------------------- |
+| scroll | 当触发滚动事件时，返回滚动的距离 | `({ scrollLeft: number, scrollTop: number }) => void` |
+
+### Slots
+
+| Name    | Description    |
+| :------ | :------------- |
+| default | 自定义默认内容 |
+
+### Exposes
+
+| Name          | Description            | Type                                                      |
+| :------------ | :--------------------- | :-------------------------------------------------------- |
+| handleScroll  | 触发滚动事件           | `() => void`                                              |
+| scrollTo      | 滚动到一组特定坐标     | `(options: ScrollToOptions丨number,yCoord?:number)=>void` |
+| setScrollTop  | 设置滚动条到顶部的距离 | `(scrollTop: number) => void`                             |
+| setScrollLeft | 设置滚动条到左边的距离 | `(scrollLeft: number) => void`                            |
+| update        | 手动更新滚动条状态     | `() => void`                                              |
+| wrapRef       | 滚动条包裹的 ref 对象  | `Ref<HTMLDivElement>`                                     |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-scrollbar-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>