m8-framework-mcp 1.0.0

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

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

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

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

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

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

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