m8-framework-mcp 1.0.0 → 1.0.1

package/docs/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

@@ -1,261 +0,0 @@
-# 组件使用
-
-## 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/docs/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

@@ -1,161 +0,0 @@
-# 组件使用
-
-## 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>