m8-mcp-server 1.0.0 → 1.1.0

package/dist/data/m8mpdoc-develop/009-UI/347/273/204/344/273/266/010-circle/347/216/257/345/275/242/350/277/233/345/272/246/346/235/241.md

@@ -1,168 +0,0 @@
-# 组件使用
-
-## circle 环形进度条
-
-### 介绍
-
--   环形进度条组件。
-
-### 代码演示
-
-#### 基础用法
-
-`rate`属性表示进度条的目标进度，`v-model`表示动画过程中的实时进度。当`rate`发生变化时，`v-model`会以`speed`的速度变化，直至达到`rate`设定的值。
-
-```html
-<em-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
-```
-
-::: ifdef M83
-
-```js
-export default {
-    data() {
-        return {
-            currentRate: 0
-        };
-    },
-    computed: {
-        text() {
-            return this.currentRate.toFixed(0) + '%';
-        }
-    }
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref, computed } from 'vue';
-const currentRate = ref(0);
-
-const text = computed(() => {
-    return currentRate.value.toFixed(0) + '%';
-});
-```
-
-::: endif
-
-#### 宽度定制
-
-通过`stroke-width`属性来控制进度条宽度
-
-```html
-<em-circle v-model="currentRate" :rate="rate" :stroke-width="6" text="宽度定制" />
-```
-
-#### 颜色定制
-
-通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色
-
-```html
-<em-circle v-model="currentRate" :rate="rate" layer-color="#ebedf0" color="#ee0a24" text="颜色定制" />
-```
-
-#### 渐变色
-
-`color`属性支持传入对象格式来定义渐变色
-
-```html
-<em-circle v-model="currentRate" :rate="rate" :color="gradientColor" text="渐变色" />
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            currentRate: 0,
-            gradientColor: {
-                '0%': '#3fecff',
-                '100%': '#6149f6'
-            }
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const currentRate = ref(0);
-const gradientColor = {
-    '0%': '#3fecff',
-    '100%': '#6149f6'
-};
-```
-::: endif
-
-#### 逆时针方向
-
-将`clockwise`设置为`false`，进度会从逆时针方向开始
-
-```html
-<em-circle v-model="currentRate" :rate="rate" :clockwise="false" text="逆时针方向" />
-```
-
-#### 大小定制
-
-通过`size`属性设置圆环直径
-
-```html
-<em-circle v-model="currentRate" :rate="rate" size="120px" text="大小定制" />
-```
-
-### API
-
-#### Props
-
-| 参数                                                                         |                   说明                    | 类型            | 默认值    |
-| :--------------------------------------------------------------------------- | :---------------------------------------: | :-------------- | :-------- |
-| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |                 当前进度                  | number          | -         |
-| rate                                                                         |                 目标进度                  | number / string | `100`     |
-| size                                                                         |         圆环直径，默认单位为 `px`         | number / string | `100px`   |
-| color                                                                        |  进度条颜色，传入对象格式可以定义渐变色   | string / object | `#2e6be5` |
-| layer-color                                                                  |                 轨道颜色                  | string          | `white`   |
-| fill                                                                         |                 填充颜色                  | string          | -         |
-| speed                                                                        |        动画速度（单位为 `rate/s`）        | number / string | `0`       |
-| text                                                                         |                   文字                    | string          | -         |
-| stroke-width                                                                 |                进度条宽度                 | number / string | `4`       |
-| stroke-linecap                                                               | 进度条端点的形状，可选值为`sqaure` `butt` | string          | `round`   |
-| clockwise                                                                    |              是否顺时针增加               | boolean         | `true`    |
-
-#### Slots
-
-| 名称    |      说明      |
-| :------ | :------------: |
-| default | 自定义文字内容 |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-circle"
- 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-circle"
- 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>