m8-framework-mcp 1.0.0 → 1.0.1

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/004-movable-view.md

@@ -1,118 +0,0 @@
-### movable-view
-
-可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
-
-`movable-view`必须在`movable-area`组件中，并且必须是直接子节点，否则不能移动。
-
-**平台差异说明**
-
-| H5  | 微信小程序 | 支付宝小程序 |
-| :-: | :--------: | :----------: |
-|  √  |     √      |      √       |
-
-**属性说明**
-
-| 属性名        | 类型            | 默认值 | 说明                                                                                                                                                                                                                                       | 平台差异说明 |
-| :------------ | :-------------- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------- |
-| direction     | String          | none   | movable-view 的移动方向，属性值有 all、vertical、horizontal、none                                                                                                                                                                          |              |
-| inertia       | Boolean         | false  | movable-view 是否带有惯性                                                                                                                                                                                                                  |              |
-| out-of-bounds | Boolean         | false  | 超过可移动区域后，movable-view 是否还可以移动                                                                                                                                                                                              |              |
-| x             | Number / String |        | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画                                                                                                                                            |              |
-| y             | Number / String |        | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画                                                                                                                                            |              |
-| damping       | Number          | 20     | 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快                                                                                                                                                                     |              |
-| friction      | Number          | 2      | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值                                                                                                                                         |              |
-| disabled      | Boolean         | false  | 是否禁用                                                                                                                                                                                                                                   |              |
-| scale         | Boolean         | false  | 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内                                                                                                                                                                                 |              |
-| scale-min     | Number          | 0.5    | 定义缩放倍数最小值                                                                                                                                                                                                                         |              |
-| scale-max     | Number          | 10     | 定义缩放倍数最大值                                                                                                                                                                                                                         |              |
-| scale-value   | Number          | 1      | 定义缩放倍数，取值范围为 0.5 - 10                                                                                                                                                                                                          |              |
-| animation     | Boolean         | true   | 是否使用动画                                                                                                                                                                                                                               |              |
-| @change       | EventHandle     |        | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中 source 表示产生移动的原因，值可为 touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） |              |
-| @scale        | EventHandle     |        | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，                                                                                                                                                                          |              |
-
-除了基本事件外，movable-view 提供了两个特殊事件
-
-| 类型       | 触发条件                                                                             | 平台差异说明   |
-| :--------- | :----------------------------------------------------------------------------------- | :------------- |
-| htouchmove | 初次手指触摸后移动为横向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch | 微信小程序支持 |
-| vtouchmove | 初次手指触摸后移动为纵向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch | 微信小程序支持 |
-
-> movable-view 必须设置 width 和 height 属性，不设置默认为 10px
->
-> movable-view 默认为绝对定位，top 和 left 属性为 0px
->
-> 当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内；当 movable-view 大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（x 轴方向和 y 轴方向分开考虑）
-
-**Tips**
-
--   movable-view 必须在`<movable-area/>`组件中，并且必须是直接子节点，否则不能移动。
--   如果遇到 x、y、scale 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/tutorial/vue-api.html#componentsolutions)
--   除了 H5 端和 app-nvue 端，其他平台不支持内嵌 video、map 等平台小程序原生组件。更新：微信基础库 2.4.4 起支持了平台小程序原生组件在 scroll-view、swiper、movable-view 中的使用
-
-**示例**[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view)
-
-以下示例代码，来自于[hello uni-app 项目](https://github.com/dcloudio/hello-uniapp)，推荐使用 HBuilderX，新建 uni-app 项目，选择 hello uni-app 模板，可快速体验完整示例。
-
-::: preview https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view
-
-> Template
-
-```html
-<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
-<template>
-    <view class="page-body">
-        <view class="uni-padding-wrap uni-common-mt">
-            <view class="uni-title uni-common-mt">
-                示例 1
-                <text>\nmovable-view 区域小于 movable-area</text>
-            </view>
-            <movable-area>
-                <movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
-            </movable-area>
-            <view @tap="tap" class="uni-link uni-center uni-common-mt">点击这里移动至 (30px, 30px)</view>
-            <view class="uni-title uni-common-mt">
-                示例 2
-                <text>\nmovable-view区域大于movable-area</text>
-            </view>
-            <movable-area>
-                <movable-view class="max" direction="all">text</movable-view>
-            </movable-area>
-        </view>
-    </view>
-</template>
-```
-
-> Script
-
-```html
-<script>
-export default {
-    data() {
-        return {
-            x: 0,
-            y: 0,
-            old: {
-                x: 0,
-                y: 0
-            }
-        };
-    },
-    methods: {
-        tap: function (e) {
-            this.x = this.old.x;
-            this.y = this.old.y;
-            this.$nextTick(function () {
-                this.x = 30;
-                this.y = 30;
-            });
-        },
-        onChange: function (e) {
-            this.old.x = e.detail.x;
-            this.old.y = e.detail.y;
-        }
-    }
-};
-</script>
-```
-
-:::

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/005-cover-view.md

@@ -1,20 +0,0 @@
-### cover-view
-
-覆盖在平台小程序原生组件上的文本视图。
-
-平台小程序框架，渲染引擎是 webview 的。但为了优化体验，部分组件如 map、video、textarea、canvas 通过原生控件实现，平台小程序原生组件层级高于前端组件（类似 flash 层级高于 div）。为了能正常覆盖平台小程序原生组件，设计了 cover-view。
-
-**平台差异说明**
-
-| H5  | 微信小程序 | 支付宝小程序 |
-| :-: | :--------: | :----------: |
-|  √  |     √      |      √       |
-
--   微信小程序部分原生组件实现了同层渲染，在指定的基础库版本上，某些原生组件可无需使用`cover-view`覆盖，[详见](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)
--   cover-view 嵌套使用时，内部不可直接写文本节点，需要使用 cover-view 包裹。
-
-支持的事件：`click`
-
-| 属性名     | 类型          | 默认值 | 说明                                                                 | 平台差异说明          |
-| :--------- | :------------ | :----- | :------------------------------------------------------------------- | :-------------------- |
-| scroll-top | number/string |        | 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 | 微信小程序 2.1.0 支持 |

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/006-cover-image.md

@@ -1,154 +0,0 @@
-### cover-image
-
-覆盖在平台小程序原生组件上的图片视图。可覆盖的平台小程序原生组件同`cover-view`，支持嵌套在`cover-view`里。
-
-**平台差异说明**
-
-| H5  | 微信小程序 | 支付宝小程序 |
-| :-: | :--------: | :----------: |
-|  √  |     √      |      √       |
-
-**属性说明**
-
-| 属性名 | 类型        | 默认值 | 说明                                                   | 平台差异说明          |
-| :----- | :---------- | :----- | :----------------------------------------------------- | :-------------------- |
-| src    | String      |        | 图标路径。支持本地路径、网络路径。不支持 base64 格式。 |                       |
-| @load  | eventhandle |        | 图片加载成功时触发                                     | 微信小程序 2.1.0 支持 |
-| @error | eventhandle |        | 图片加载失败时触发                                     | 微信小程序 2.1.0 支持 |
-
-支持的事件：`click`
-
-**不支持的 CSS**
-
--   position: fixed
--   opacity
--   overflow
--   padding
--   linebreak
--   white-space
-
-**Tips**
-
--   在 video 组件中使用时，若想在全屏模式下使用`cover-view`，只有在微信小程序可实现。
--   支付宝小程序中 `cover-view` 不支持嵌套。
-
-**微信小程序的 cover-view 使用注意：**
-
--   cover-view 和 cover-image 的 aria-role 仅可设置为 button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击
--   基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态
--   基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画
--   基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow
--   基础库 1.9.90 起最外层 cover-view 支持 position: fixed
--   基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在平台小程序原生组件 map、video、canvas、camera 内，避免嵌套在其他组件内。
--   基础库 1.6.0 起支持 css transition 动画，transition-property 只支持 transform (translateX, translateY)与 opacity。
--   基础库 1.6.0 起支持 css opacity。
--   事件模型遵循冒泡模型，但不会冒泡到平台小程序原生组件。
--   文本建议都套上 cover-view 标签，避免排版错误。
--   只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible 等。
--   建议子节点不要溢出父节点
--   支持使用 z-index 控制层级
--   默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
--   自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示
-
-**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/cover-view/cover-view)
-
-以下示例代码，来自于[hello uni-app 项目](https://github.com/dcloudio/hello-uniapp)。
-
-::: preview https://hellouniapp.dcloud.net.cn/pages/component/cover-view/cover-view
-
-> Template
-
-```html
-<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
-<template>
-    <view class="page">
-        <video
-            class="video"
-            id="demoVideo"
-            :controls="false"
-            :enable-progress-gesture="false"
-            :show-center-play-btn="true"
-            src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
-        >
-            <cover-view class="controls-title">简单的自定义 controls</cover-view>
-            <cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
-            <cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
-        </video>
-    </view>
-</template>
-```
-
-> Script
-
-```html
-<script>
-export default {
-    data() {
-        return {};
-    },
-    mounted() {
-        this.videoCtx = uni.createVideoContext('demoVideo');
-    },
-    methods: {
-        play(event) {
-            this.videoCtx.play();
-            uni.showToast({
-                title: '开始播放',
-                icon: 'none'
-            });
-        },
-        pause(event) {
-            this.videoCtx.pause();
-            uni.showToast({
-                title: '暂停播放',
-                icon: 'none'
-            });
-        }
-    }
-};
-</script>
-```
-
-> Style
-
-```html
-<style>
-.page {
-    display: flex;
-    justify-content: center;
-}
-
-.video {
-    position: relative;
-}
-
-cover-view,
-cover-image {
-    display: inline-block;
-}
-
-.img {
-    position: absolute;
-    width: 100rpx;
-    height: 100rpx;
-    top: 50%;
-    margin-top: -50rpx;
-}
-
-.controls-play {
-    left: 50rpx;
-}
-
-.controls-pause {
-    right: 50rpx;
-}
-
-.controls-title {
-    width: 100%;
-    text-align: center;
-    color: #ffffff;
-}
-</style>
-```
-
-:::

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/007-audio.md

@@ -1,81 +0,0 @@
-#### audio
-
-音频。
-
-**平台差异说明**
-
-| H5  | 微信小程序 | 支付宝小程序 |
-| :-: | :--------: | :----------: |
-|  √  |     √      |      x       |
-
-**注意：** 微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，推荐使用 EJSAPI 方式而不是组件方式来播放音频。
-
-如果需要带 ui 的样式，可以自己做，也可以在插件市场搜索相关[插件](https://ext.dcloud.net.cn/search?q=audio)
-
-**属性说明**
-
-| 属性名      | 类型        | 默认值   | 说明                                                                                |
-| :---------- | :---------- | :------- | :---------------------------------------------------------------------------------- |
-| id          | String      |          | audio 组件的唯一标识符                                                              |
-| src         | String      |          | 要播放音频的资源地址                                                                |
-| loop        | Boolean     | false    | 是否循环播放                                                                        |
-| controls    | Boolean     | false    | 是否显示默认控件                                                                    |
-| poster      | String      |          | 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 |
-| name        | String      | 未知音频 | 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效                 |
-| author      | String      | 未知作者 | 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效               |
-| @error      | EventHandle |          | 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}                     |
-| @play       | EventHandle |          | 当开始/继续播放时触发 play 事件                                                     |
-| @pause      | EventHandle |          | 当暂停播放时触发 pause 事件                                                         |
-| @timeupdate | EventHandle |          | 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}              |
-| @ended      | EventHandle |          | 当播放到末尾时触发 ended 事件                                                       |
-
-**MediaError.code**
-
-| 返回错误码 | 描述               |
-| :--------- | :----------------- |
-| 1          | 获取资源被用户禁止 |
-| 2          | 网络错误           |
-| 3          | 解码错误           |
-| 4          | 不合适资源         |
-
-**示例：** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/audio/audio)
-
-```html
-<template>
-    <view>
-        <view class="page-body">
-            <view class="page-section page-section-gap" style="text-align: center;">
-                <audio
-                    style="text-align: left"
-                    :src="current.src"
-                    :poster="current.poster"
-                    :name="current.name"
-                    :author="current.author"
-                    :action="audioAction"
-                    controls
-                ></audio>
-            </view>
-        </view>
-    </view>
-</template>
-```
-
-```javascript
-export default {
-    data() {
-        return {
-            current: {
-                poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
-                name: '致爱丽丝',
-                author: '暂无',
-                src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
-            },
-            audioAction: {
-                method: 'pause'
-            }
-        };
-    }
-};
-```
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/abc3fd40-4f48-11eb-b680-7980c8a877b8.png)

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/008-camera.md

@@ -1,70 +0,0 @@
-#### camera
-
-页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
-
-**平台差异说明**
-
-| H5  | 微信小程序 | 支付宝小程序 |
-| :-: | :--------: | :----------: |
-|  x  |     √      |      x       |
-
--   在 EJS 和 H5 端，可以使用 EJSAPI 方式来调用全屏摄像头，而不是组件内嵌方式。
--   如开发身份证扫描、银行卡识别等 ocr 识别需求，在微信小程序中使用本 camera 组件，将图片发送给服务器识别，插件市场有封装好的[模板](https://ext.dcloud.net.cn/search?q=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E6%9C%BA)
-
-**属性说明**
-
-| 属性名          | 类型        | 默认值 | 说明                                              | 平台差异说明           |
-| :-------------- | :---------- | :----- | :------------------------------------------------ | :--------------------- |
-| mode            | String      | normal | 有效值为 normal, scanCode                         | 微信小程序支持         |
-| resolution      | string      | medium | 分辨率，不支持动态修改                            | 微信小程序 2.10.0 支持 |
-| device-position | String      | back   | 前置或后置摄像头，值为 front, back                |                        |
-| flash           | String      | auto   | 闪光灯，值为 auto, on, off                        |                        |
-| frame-size      | string      | medium | 指定期望的相机帧数据尺寸                          | 微信小程序 2.7.0 支持  |
-| @stop           | EventHandle |        | 摄像头在非正常终止时触发，如退出后台等情况        |                        |
-| @error          | EventHandle |        | 用户不允许使用摄像头时触发                        |                        |
-| @initdone       | eventhandle |        | 相机初始化完成时触发，e.detail = {maxZoom}        | 微信小程序 2.7.0 支持  |
-| @scancode       | EventHandle |        | 在扫码识别成功时触发，仅在 mode="scanCode" 时生效 | 微信小程序 支持        |
-
-**Tips：**
-
--   camera 组件是由客户端创建的平台小程序原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
--   请勿在 scroll-view、movable-view 中使用 camera 组件。
--   同一页面只能插入一个 camera 组件。
--   相关 API：`Util.createCameraContext`
-
-**代码示例**
-
-```html
-<template>
-    <view>
-        <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
-        <button type="primary" @click="takePhoto">拍照</button>
-        <view>预览</view>
-        <image mode="widthFix" :src="src"></image>
-    </view>
-</template>
-```
-
-```javascript
-export default {
-    data() {
-        return {
-            src: ''
-        };
-    },
-    methods: {
-        takePhoto() {
-            const ctx = uni.createCameraContext();
-            ctx.takePhoto({
-                quality: 'high',
-                success: (res) => {
-                    this.src = res.tempImagePath;
-                }
-            });
-        },
-        error(e) {
-            console.log(e.detail);
-        }
-    }
-};
-```

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/009-image.md

@@ -1,197 +0,0 @@
-#### image
-
-图片。
-
-| 属性名                 | 类型        | 默认值        | 说明                                                                                                              | 平台差异说明                                       |
-| :--------------------- | :---------- | :------------ | :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- |
-| src                    | String      |               | 图片资源地址                                                                                                      |                                                    |
-| mode                   | String      | 'scaleToFill' | 图片裁剪、缩放的模式                                                                                              | <div style="width:68px;"></div>                    |
-| lazy-load              | Boolean     | false         | 图片懒加载。只针对 page 与 scroll-view 下的 image 有效                                                            | 微信小程序支持 |
-| webp                   | boolean     | false         | 在系统不支持 webp 的情况下是否单独启用 webp。默认 false，只支持网络资源。webp 支持详见下面说明                    | 微信小程序 2.9.0 支持                                  |
-| show-menu-by-longpress | boolean     | false         | 开启长按图片显示识别平台小程序码菜单                                                                                  | 微信小程序 2.7.0  支持                                 |
-| draggable              | boolean     | true          | 是否能拖动图片                                                                                                    | H5 支持                           |
-| @error                 | HandleEvent |               | 当错误发生时，发布到 AppService 的事件名，事件对象 event.detail = {errMsg: 'something wrong'}                     |                                                    |
-| @load                  | HandleEvent |               | 当图片载入完毕时，发布到 AppService 的事件名，事件对象 event.detail = {height:'图片高度 px', width:'图片宽度 px'} | &nbsp;                                             |
-
-**Tips**
-
--   `<image>` 组件默认宽度 300px、高度 225px；
--   `src` 仅支持相对路径、绝对路径，支持 base64 码；
--   页面结构复杂，css 样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 `image{will-change: transform}` ,可优化此问题。
--   自定义组件里面使用 `<image>`时，若 `src` 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。
--   svg 格式的图片在不同的平台支持情况不同。具体为：平台小程序上只支持网络地址。
-
--   webp 图片支持详解
-    -   Android4 以上（含）、iOS14 以上（含）系统内置支持 webp，此时，不管 web、平台小程序都可以直接使用 webp；
-    -   iOS14 以下，app-vue 下，iOS 不支持；微信小程序 2.9.0 起，配置属性 webp 为 true 时 iOS 支持；
-    -   pc 浏览器上，webp 在不同浏览器的支持详见：[https://caniuse.com/?search=webp](https://caniuse.com/?search=webp)
-
-**mode 有效值：**
-
-mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
-
-| 模式 | 值           | 说明                                                                                                                       |
-| :--- | :----------- | :------------------------------------------------------------------------------------------------------------------------- |
-| 缩放 | scaleToFill  | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素                                                                |
-| 缩放 | aspectFit    | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。                                       |
-| 缩放 | aspectFill   | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
-| 缩放 | widthFix     | 宽度不变，高度自动变化，保持原图宽高比不变                                                                                 |
-| 缩放 | heightFix    | 高度不变，宽度自动变化，保持原图宽高比不变 **App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3**           |
-| 裁剪 | top          | 不缩放图片，只显示图片的顶部区域                                                                                           |
-| 裁剪 | bottom       | 不缩放图片，只显示图片的底部区域                                                                                           |
-| 裁剪 | center       | 不缩放图片，只显示图片的中间区域                                                                                           |
-| 裁剪 | left         | 不缩放图片，只显示图片的左边区域                                                                                           |
-| 裁剪 | right        | 不缩放图片，只显示图片的右边区域                                                                                           |
-| 裁剪 | top left     | 不缩放图片，只显示图片的左上边区域                                                                                         |
-| 裁剪 | top right    | 不缩放图片，只显示图片的右上边区域                                                                                         |
-| 裁剪 | bottom left  | 不缩放图片，只显示图片的左下边区域                                                                                         |
-| 裁剪 | bottom right | 不缩放图片，只显示图片的右下边区域                                                                                         |
-
-**示例：** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/image/image)
-
-::: preview
-
-> Template
-
-```html
-<template>
-    <view class="page">
-        <view class="image-list">
-            <view class="image-item" v-for="(item, index) in array" :key="index">
-                <view class="image-content">
-                    <image
-                        style="width: 200px; height: 200px; background-color: #eeeeee;"
-                        :mode="item.mode"
-                        :src="src"
-                        @error="imageError"
-                    ></image>
-                </view>
-                <view class="image-title">{{ item.text }}</view>
-            </view>
-        </view>
-    </view>
-</template>
-```
-
-> Script
-
-```html
-<script>
-export default {
-    data() {
-        return {
-            array: [
-                {
-                    mode: 'scaleToFill',
-                    text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
-                },
-                {
-                    mode: 'aspectFit',
-                    text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
-                },
-                {
-                    mode: 'aspectFill',
-                    text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
-                },
-                {
-                    mode: 'top',
-                    text: 'top：不缩放图片，只显示图片的顶部区域'
-                },
-                {
-                    mode: 'bottom',
-                    text: 'bottom：不缩放图片，只显示图片的底部区域'
-                },
-                {
-                    mode: 'center',
-                    text: 'center：不缩放图片，只显示图片的中间区域'
-                },
-                {
-                    mode: 'left',
-                    text: 'left：不缩放图片，只显示图片的左边区域'
-                },
-                {
-                    mode: 'right',
-                    text: 'right：不缩放图片，只显示图片的右边边区域'
-                },
-                {
-                    mode: 'top left',
-                    text: 'top left：不缩放图片，只显示图片的左上边区域'
-                },
-                {
-                    mode: 'top right',
-                    text: 'top right：不缩放图片，只显示图片的右上边区域'
-                },
-                {
-                    mode: 'bottom left',
-                    text: 'bottom left：不缩放图片，只显示图片的左下边区域'
-                },
-                {
-                    mode: 'bottom right',
-                    text: 'bottom right：不缩放图片，只显示图片的右下边区域'
-                }
-            ],
-            src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
-        };
-    },
-    methods: {
-        imageError: function (e) {
-            console.error('image发生error事件，携带值为' + e.detail.errMsg);
-        }
-    }
-};
-</script>
-```
-
-:::
-
-原图
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg)
-
-scaleToFill：不保持纵横比缩放图片，使图片完全适应
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6b971f70-4f31-11eb-bd01-97bc1429a9ff.png)
-
-aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6c4e3a70-4f31-11eb-8ff1-d5dcf8779628.png)
-
-aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6cfbdf90-4f31-11eb-8ff1-d5dcf8779628.png)
-
-top：不缩放图片，只显示图片的顶部区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6dd1f440-4f31-11eb-8ff1-d5dcf8779628.png)
-
-bottom：不缩放图片，只显示图片的底部区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/649ee9a0-4f31-11eb-8a36-ebb87efcf8c0.png)
-
-center：不缩放图片，只显示图片的中间区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/65495a70-4f31-11eb-8a36-ebb87efcf8c0.png)
-
-left：不缩放图片，只显示图片的左边区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/66211cd0-4f31-11eb-bd01-97bc1429a9ff.png)
-
-right：不缩放图片，只显示图片的右边边区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/66e55730-4f31-11eb-8a36-ebb87efcf8c0.png)
-
-top left：不缩放图片，只显示图片的左上边区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/67b614b0-4f31-11eb-bd01-97bc1429a9ff.png)
-
-top right：不缩放图片，只显示图片的右上边区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6869fb60-4f31-11eb-a16f-5b3e54966275.png)
-
-bottom left：不缩放图片，只显示图片的左下边区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/693ed790-4f31-11eb-8a36-ebb87efcf8c0.png)
-
-bottom right：不缩放图片，只显示图片的右下边区域
-
-![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6a042360-4f31-11eb-a16f-5b3e54966275.png)