m8-framework-mcp 1.0.0 → 1.0.1

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

@@ -1,206 +0,0 @@
-# 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

@@ -1,256 +0,0 @@
-# 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>