m8-mcp-server 1.0.0

package/dist/data/m8mpdoc-develop/009-UI/347/273/204/344/273/266/074-imagescale/345/233/276/347/211/207/350/243/201/345/211/252.md

@@ -0,0 +1,261 @@
+# 组件使用
+
+## imagescale 图片裁剪
+
+### 介绍
+
+-   图片裁剪组件。
+
+### 代码演示
+
+#### 基础图片裁剪
+
+```html
+<image :src="url1" v-if="url1" mode="widthFix"></image>
+<em-image-scale
+    v-if="show1"
+    :image-url="imageUrl1"
+    @success="
+                url1 = $event.url;
+                show1 = false;
+            "
+    @cancel="show1 = false"
+/>
+<button @click="show1 = true">基础图片裁剪</button>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    name: 'Imagescale',
+    data() {
+        return {
+            show1: false,
+            url1: '',
+            imageUrl1: '/static/logo.jpg'
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const show1 = ref(false);
+const url1 = ref('');
+const imageUrl1 = ref('/static/logo.jpg');
+```
+
+::: endif
+
+#### 带功能图片裁剪
+
+```html
+<image :src="url2" v-if="url2" mode="widthFix"></image>
+<em-image-scale
+    v-if="show2"
+    :isLockWidth="isLockWidth"
+    :isLockHeight="isLockHeight"
+    :isLockRatio="isLockRatio"
+    :isLimitMove="isLimitMove"
+    :isDisableScale="isDisableScale"
+    :isDisableRotate="isDisableRotate"
+    :isShowCancelBtn="isShowCancelBtn"
+    :isShowPhotoBtn="isShowPhotoBtn"
+    :isShowRotateBtn="isShowRotateBtn"
+    :isShowConfirmBtn="isShowConfirmBtn"
+    :image-url="imageUrl2"
+    @success="
+                url2 = $event.url;
+                show2 = false;
+            "
+    @cancel="show2 = false"
+>
+    <!-- 四个基本按钮插槽 -->
+    <template #cancel>
+        <em-button>取消</em-button>
+    </template>
+    <template #photo>
+        <em-button>选择图片</em-button>
+    </template>
+    <template #rotate>
+        <em-button>旋转</em-button>
+    </template>
+    <template #confirm>
+        <em-button>确定</em-button>
+    </template>
+    <!-- 默认插槽 -->
+    <em-row class="tools">
+        <em-col span="12">
+            显示取消按钮
+            <em-switch v-model="isShowCancelBtn" @change="(value) => isShowCancelBtn = value" />
+        </em-col>
+        <em-col span="12">
+            显示选择图片按钮
+            <em-switch v-model="isShowPhotoBtn" @change="(value) => isShowPhotoBtn = value" />
+        </em-col>
+        <em-col span="12">
+            显示旋转按钮
+            <em-switch v-model="isShowRotateBtn" @change="(value) => isShowRotateBtn = value" />
+        </em-col>
+        <em-col span="12">
+            显示确定按钮
+            <em-switch v-model="isShowConfirmBtn" @change="(value) => isShowConfirmBtn = value" />
+        </em-col>
+        <em-col span="12">
+            锁定裁剪框宽度
+            <em-switch v-model="isLockWidth" @change="(value) => isLockWidth = value" />
+        </em-col>
+        <em-col span="12">
+            锁定裁剪框高度
+            <em-switch v-model="isLockHeight" @change="(value) => isLockHeight = value" />
+        </em-col>
+        <em-col span="12">
+            锁定裁剪框比例
+            <em-switch v-model="isLockRatio" @change="(value) => isLockRatio = value" />
+        </em-col>
+        <em-col span="12">
+            限制移动范围
+            <em-switch v-model="isLimitMove" @change="(value) => isLimitMove = value" />
+        </em-col>
+        <em-col span="12">
+            禁止缩放
+            <em-switch v-model="isDisableScale" @change="(value) => isDisableScale = value" />
+        </em-col>
+        <em-col span="12">
+            禁止旋转
+            <em-switch v-model="isDisableRotate" @change="(value) => isDisableRotate = value" />
+        </em-col>
+    </em-row>
+</em-image-scale>
+<button @click="show2 = true">带功能图片裁剪</button>
+```
+::: ifdef M83
+```js
+export default {
+    name: 'Imagescale',
+    data() {
+        return {
+            show2: false,
+            url2: '',
+            imageUrl2: '/static/logo.jpg',
+            isLockWidth: false,
+            isLockHeight: false,
+            isLockRatio: true,
+            isLimitMove: false,
+            isDisableScale: false,
+            isDisableRotate: false,
+            isShowCancelBtn: true,
+            isShowPhotoBtn: true,
+            isShowRotateBtn: true,
+            isShowConfirmBtn: true
+        };
+    }
+};
+```
+::: endif
+::: ifdef M84
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const show2 = ref(false);
+const url2 = ref('');
+const imageUrl2 = ref('/static/logo.jpg');
+const isLockWidth = ref(false);
+const isLockHeight = ref(false);
+const isLockRatio = ref(true);
+const isLimitMove = ref(false);
+const isDisableScale = ref(false);
+const isDisableRotate = ref(false);
+const isShowCancelBtn = ref(true);
+const isShowPhotoBtn = ref(true);
+const isShowRotateBtn = ref(true);
+const isShowConfirmBtn = ref(true);
+```
+::: endif
+
+### API
+
+#### Props
+
+| 参数                |                              说明                              | 类型    | 默认值  |
+| :------------------ | :------------------------------------------------------------: | :------ | :------ | --- |
+| image-url           |                            图片路径                            |         | string  | -   |
+| quality             |   图片的质量，取值范围为 `[0, 1]`，不在范围内时当作 `1 `处理   | number  | `1`     |
+| source              | `{album: '从相册中选择'}` key 为图片来源类型，value 为选项说明 | Object  | -       |
+| width               |                   裁剪框高度，默认单位为`px`                   | number  | `400`   |
+| height              |                           裁剪框宽度                           | number  | `400`   |
+| min-width           |                         裁剪框最小高度                         | number  | `200`   |
+| min-height          |                         裁剪框最小高度                         | number  | `200`   |
+| max-width           |                         裁剪框最大宽度                         | number  | `600`   |
+| max-height          |                         裁剪框最大高度                         | number  | `600`   |
+| min-ratio           |                         图片最小缩放比                         | number  | `0.5`   |
+| max-ratio           |                         图片最大缩放比                         | number  | `2`     |
+| rotate-angle        |                     旋转按钮每次旋转的角度                     | number  | `90`    |
+| scale-ratio         |      生成图片相对于裁剪框的比例， 比例越高生成图片越清晰       | number  | `1`     |
+| is-lock-width       |                       是否锁定裁剪框宽度                       | boolean | `false` |
+| is-lock-height      |                      是否锁定裁剪框高度上                      | boolean | `false` |
+| is-lock-ratio       |                       是否锁定裁剪框比例                       | boolean | `true`  |
+| is-disable-scale    |                          是否禁止缩放                          | boolean | `false` |
+| is-disable-rotate   |                          是否禁止旋转                          | boolean | `false` |
+| is-limit-move       |                        是否限制移动范围                        | boolean | `false` |
+| is-show-photo-btn   |                      是否显示选择图片按钮                      | boolean | `true`  |
+| is-show-rotate-btn  |                         是否显示转按钮                         | boolean | `true`  |
+| is-show-confirm-btn |                        是否显示确定按钮                        | boolean | `true`  |
+| is-show-cancel-btn  |                        是否显示关闭按钮                        | boolean | `true`  |
+
+#### Events
+
+| 事件名  |        说明        | 回调参数                                    |
+| :------ | :----------------: | :------------------------------------------ |
+| success |    生成图片成功    | ` {width, height, url}`                     |
+| fail    |    生成图片失败    | -                                           |
+| cancel  |        关闭        | -                                           |
+| ready   |    图片加载完成    | ` {width, height, path, orientation, type}` |
+| change  | 图片大小改变时触发 | `{width, height}`                           |
+| rotate  |   图片旋转时触发   | -                                           |
+
+#### Slots
+
+| 名称    | 说明                                   |
+| :------ | :------------------------------------- |
+| default | 默认插槽，用于按钮栏底部插入自定义内容 |
+| cancel  | 用于自定义取消按钮                     |
+| photo   | 用于自定义选择图片按钮                 |
+| rotate  | 用于自定义旋转按钮                     |
+| confirm | 用于自定义确定按钮                     |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-image-scale"
+ 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-image-scale"
+ 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/075-dragsort/346/213/226/346/213/275/346/216/222/345/272/217.md

@@ -0,0 +1,161 @@
+# 组件使用
+
+## Dragsort 拖拽排序
+
+### 介绍
+
+-   拖拽排序组件。该组件自`v8.3.6`版本开始支持。
+
+### 代码演示
+
+#### 基础用法
+
+默认长按进行拖拽，默认为纵向排序
+
+```html
+<em-dragsort v-model="list">
+    <em-dragsort-item v-for="(item, index) in list" :key="index">
+        <em-cell :title="'item ' + item"></em-cell>
+    </em-dragsort-item>
+</em-dragsort>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            list: [1, 2, 3, 4]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const list = ref([1, 2, 3, 4]);
+```
+
+::: endif
+
+#### 横向排序
+
+也可通过`direction`属性设置横向排序。
+
+```html
+<em-dragsort v-model="list" direction="horizontal">
+    <em-dragsort-item v-for="(item, index) in list" :key="index">
+        <em-tag basic-type="person">item {{ item }}</em-tag>
+    </em-dragsort-item>
+</em-dragsort>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            list: [1, 2, 3, 4]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const list = ref([1, 2, 3, 4]);
+```
+
+::: endif
+
+#### grid 排序
+
+```html
+<em-grid :gutter="10">
+    <em-dragsort v-model="gridlist" direction="auto">
+        <em-dragsort-item v-for="(item, index) in gridlist" :key="index">
+            <em-grid-item icon="photo-o" :text="'item ' + item" />
+        </em-dragsort-item>
+    </em-dragsort>
+</em-grid>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            gridlist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const gridlist = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]);
+```
+
+::: endif
+
+### API
+
+#### Props
+
+| 参数                                                                         |                 说明                 | 类型   | 默认值     |
+| :--------------------------------------------------------------------------- | :----------------------------------: | :----- | :--------- |
+| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |        需要拖拽排序的列表数据        | array  | `-`        |
+| direction                                                                    | 拖拽方向，可选值 `horizontal` `auto` | string | `vertical` |
+| activeItemClass                                                              |       激活的元素添加自定义类名       | string | `-`        |
+
+#### Events
+
+| 事件名 |      说明      | 回调参数           |
+| :----- | :------------: | :----------------- |
+| end    | 排序结束时触发 | list: 排序后的数组 |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-dragsort"
+ 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-dragsort"
+ 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>