diff --git a/commitlint.config.js b/commitlint.config.js
index 29412e43..d1593f7d 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -69,7 +69,9 @@ module.exports = {
         'IndexList',
         'Behavior',
         'CapsuleBar',
-        'Circle'
+        'Circle',
+        'ImageClipper',
+        'CustomTabBar'
       ]
     ]
   }
diff --git a/dist/album/index.js b/dist/album/index.js
index 983e8928..f5f5b05b 100644
--- a/dist/album/index.js
+++ b/dist/album/index.js
@@ -1 +1 @@
-Component({externalClasses:["l-class","l-single-image-class","l-multi-image-class"],properties:{urls:{type:Array},preview:{type:Boolean,value:!0},gapRow:{type:Number,value:10},gapColumn:{type:Number,value:10},singleSize:{type:Number,value:360},multipleSize:{type:Number,value:158},singleMode:{type:String,value:"aspectFit"},multipleMode:{type:String,value:"aspectFill"},key:{type:String,value:"url"}},data:{newType:!0,shortSideValue:0,row:0,colum:0},lifetimes:{attached(){if(this.data.urls.length>9){const e=this.data.urls.slice(0,9);this.setData({urls:e}),console.warn("超过9张图片！")}this.preview()}},observers:{urls:function(){this.preview()}},methods:{judgeType(){const e=this.data.urls;return 0===e.length||"object"==typeof e[0]},horizontalOrVertical:function(e){wx.getImageInfo({src:e,success:e=>{const t=e.width>=e.height?e.width:e.height,i=e.width>=e.height?e.height:e.width;this.setData({horizontalScreen:e.width>=e.height,shortSideValue:i*this.data.singleSize/t})}})},preview:function(){const e=this.judgeType();this.setData({newType:e});const t=this.data.urls,i=this.data.key;1===t.length&&this.horizontalOrVertical(e?t[0][i]:t[0])},onPreviewTap(e){const t=e.currentTarget.id,i=this.data.urls;let s="",a=[];const l=this.data.newType,r=this.data.key;if(l){s=i[t][r];for(let e=0;e<i.length;e++)a.push(i[e][r])}else s=i[t],a=i;let n={index:t,current:i[t],all:i};!0===this.data.preview&&wx.previewImage({current:s,urls:a}),this.triggerEvent("lintap",n,{})}}});
\ No newline at end of file
+Component({externalClasses:["l-class","l-single-image-class","l-multi-image-class"],properties:{urls:{type:Array},preview:{type:Boolean,value:!0},gapRow:{type:Number,value:10},gapColumn:{type:Number,value:10},singleSize:{type:Number,value:360},multipleSize:{type:Number,value:158},singleMode:{type:String,value:"aspectFit"},multipleMode:{type:String,value:"aspectFill"},key:{type:String,value:"url"},maxNumber:{type:Number,value:9},customRowNumber:{type:Boolean,value:!1},everyRowNumber:{type:Number,value:3},previewFullImage:{type:Boolean,value:!0}},data:{newType:!0,shortSideValue:0,row:0,colum:0,showUrls:[],isLong:!1},lifetimes:{attached(){let e=[];if(this.data.urls.length>this.data.maxNumber?(e=this.data.urls.slice(0,this.data.maxNumber),this.setData({isLong:!0}),console.warn("图片数量超过maxNumber指定数量")):e=this.data.urls,this.setData({showUrls:e}),!this.data.customRowNumber){let e=this.data.showUrls.length;e>1&&e<5?this.setData({everyRowNumber:2}):this.setData({everyRowNumber:3})}this.preview()}},observers:{urls:function(){this.preview()}},methods:{judgeType(){const e=this.data.urls;return 0===e.length||"object"==typeof e[0]},horizontalOrVertical:function(e){wx.getImageInfo({src:e,success:e=>{const t=e.width>=e.height?e.width:e.height,a=e.width>=e.height?e.height:e.width;this.setData({horizontalScreen:e.width>=e.height,shortSideValue:a*this.data.singleSize/t})}})},preview:function(){const e=this.judgeType();this.setData({newType:e});const t=this.data.urls,a=this.data.key;1===t.length&&this.horizontalOrVertical(e?t[0][a]:t[0])},onPreviewTap(e){const t=e.currentTarget.id;let a;a=this.data.previewFullImage?this.data.urls:this.data.showUrls;let s="",i=[];const l=this.data.newType,r=this.data.key;if(l){s=a[t][r];for(let e=0;e<a.length;e++)i.push(a[e][r])}else s=a[t],i=a;let h={index:t,current:a[t],all:a};!0===this.data.preview&&wx.previewImage({current:s,urls:i}),this.triggerEvent("lintap",h,{})}}});
\ No newline at end of file
diff --git a/dist/album/index.wxml b/dist/album/index.wxml
index 972f5530..1cf5e139 100644
--- a/dist/album/index.wxml
+++ b/dist/album/index.wxml
@@ -1,6 +1,9 @@
 <wxs src="index.wxs" module="album"></wxs>
-<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
-    <block wx:for="{{urls}}" wx:key="index">
-        <image id="{{index}}" bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}"/>
+<view style="{{album.gridStyle(gapRow, gapColumn, multipleSize, everyRowNumber)}}">
+    <block wx:for="{{showUrls}}" wx:key="index" class="child">
+        <view class="imageContainer {{album.dimBack(isLong, index, maxNumber, previewFullImage)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}">
+            <image class="{{album.dim(isLong, index, maxNumber, previewFullImage)}}}" id="{{index}}" bind:tap="onPreviewTap" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}"/>
+            <view wx:if="{{album.image(isLong, index, maxNumber, previewFullImage)}}" class="text">+{{urls.length-maxNumber}}</view>
+        </view>
     </block>
 </view>
diff --git a/dist/album/index.wxs b/dist/album/index.wxs
index 05bae060..b41eda00 100644
--- a/dist/album/index.wxs
+++ b/dist/album/index.wxs
@@ -1,5 +1,4 @@
 var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
-    urls.length === 2 || urls.length === 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
     if (urls.length === 2 || urls.length === 4) {
         return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
     } else {
@@ -32,8 +31,49 @@ var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, m
     }
 }
 
+var gridStyle = function (gapRow, gapColumn, multipleSize, everyRowNumber) {
+    return 'display:inline-grid;grid-template-columns: repeat(' + everyRowNumber + ',' + multipleSize + 'rpx);grid-row-gap:' + gapRow + 'rpx;grid-column-gap:' + gapColumn + 'rpx;'
+}
+
+var dimBack = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dimback'
+            }
+        }
+    }
+    return ''
+}
+
+var dim = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dim'
+            }
+        }
+    }
+    return ''
+}
+
+var image = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
 module.exports = {
     containerStyle: containerStyle,
     blockClass: blockClass,
-    blockStyle: blockStyle
+    blockStyle: blockStyle,
+    gridStyle: gridStyle,
+    dimBack: dimBack,
+    dim: dim,
+    image: image,
 }
diff --git a/dist/album/index.wxss b/dist/album/index.wxss
index d7650fc8..73f94e0d 100644
--- a/dist/album/index.wxss
+++ b/dist/album/index.wxss
@@ -1 +1 @@
-.container{display:grid}.vertical{height:360rpx}
\ No newline at end of file
+.container{display:grid}.vertical{height:360rpx}.parent{display:inline-grid;grid-template-columns:repeat(auto-fill)}.child{box-sizing:border-box;background-color:#fff;flex:0 0 44%;height:100px;border:1px solid red;margin-top:4%;margin-left:2%;margin-right:2%}.dimback{background:#000}.dim{opacity:.6}.imageContainer{position:relative}.imageContainer:last-child>.text{color:#fff;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:larger}
\ No newline at end of file
diff --git a/dist/avatar/index.wxml b/dist/avatar/index.wxml
index 8c983c12..16835cb4 100644
--- a/dist/avatar/index.wxml
+++ b/dist/avatar/index.wxml
@@ -1,5 +1,5 @@
 
-<view class="l-avatar {{text||_isHaveUserNickName?'l-placement-'+placement:''}}" bindtap="tapAvatar">
+<view class="l-avatar {{text||_isHaveUserNickName?'l-placement-'+placement:''}}" mut-bind:tap="tapAvatar">
     <view class="l-avatar-image {{shape?'l-'+shape:''}} l-class" wx:if="{{_isHaveUserAvatarUrl||icon||src}}" style="width:{{size}}rpx;height:{{size}}rpx">
         <open-data class="open-data" wx:if="{{_isHaveUserAvatarUrl}}" type="userAvatarUrl"/>
         <l-icon wx:elif="{{icon}}" size="{{iconSize || size*0.6}}" color="{{iconColor||'#ffffff'}}" name="{{icon}}"/>
diff --git a/dist/badge/index.wxml b/dist/badge/index.wxml
index 4d7df27e..1e687872 100644
--- a/dist/badge/index.wxml
+++ b/dist/badge/index.wxml
@@ -1,7 +1,7 @@
-<view class="l-badge" bindtap="handleTap">
+<view class="l-badge" mut-bind:tap="handleTap">
   <slot/>
   <block wx:if="{{show}}">
     <view wx:if="{{dot}}" class="l-badge-dot l-class l-class-self l-self-class"></view>
     <view wx:else class="{{'l-badge-content-'+shape}} l-badge-content l-class l-class-self l-self-class">{{finalCount}}</view>
   </block>
-</view> 
\ No newline at end of file
+</view>
diff --git a/dist/button/index.wxml b/dist/button/index.wxml
index 82159c9c..1021e64b 100644
--- a/dist/button/index.wxml
+++ b/dist/button/index.wxml
@@ -1,4 +1,4 @@
-<label for="{{name}}" bindtap="handleTap" class="l-label-class">
+<label for="{{name}}" mut-bind:tap="handleTap" class="l-label-class">
   <block wx:if="{{special}}">
     <view class="special-container l-class">
       <slot/>
@@ -13,4 +13,4 @@
   </block>
 </label>
 <button style="position: absolute;top: -999px;left: -999px;" wx:if="{{openType}}" id="{{name}}" lang="{{lang}}" form-type="{{formType}}" open-type="{{openType}}" app-parameter="{{ appParameter }}" hover-stop-propagation="{{ hoverStopPropagation }}" hover-start-time="{{ hoverStartTime }}" hover-stay-time="{{ hoverStayTime }}" session-from="{{ sessionFrom }}" send-message-title="{{ sendMessageTitle }}" send-message-path="{{ sendMessagePath }}" send-message-img="{{ sendMessageImg }}" show-message-card="{{ showMessageCard }}" bindcontact="openTypeEvent" bindgetuserinfo="openTypeEvent" bindgetphonenumber="openTypeEvent" bindopensetting="openTypeEvent">
-</button>
\ No newline at end of file
+</button>
diff --git a/dist/capsule-bar/index.wxml b/dist/capsule-bar/index.wxml
index 8f66225d..306b8378 100644
--- a/dist/capsule-bar/index.wxml
+++ b/dist/capsule-bar/index.wxml
@@ -15,7 +15,7 @@
     
     <cover-view wx:if="{{!hiddenCapsule}}" class="capsule-button" style="border-color: rgba({{capsuleColor==='black'?'0,0,0,0.1':'255,255,255,0.25'}});background-color: rgba({{capsuleColor==='black'?'255,255,255,0.6':'0,0,0,0.15'}});width: {{capsuleButtonInfo.width}}px;height: {{capsuleButtonInfo.height}}px;left: {{capsuleButtonInfo.left}}px;top: {{capsuleButtonInfo.top}}px;">
       
-      <cover-view catch:tap="onTapLeftButton" catch:longpress="onLongPressLeftButton" hover-class="icon-wrapper-hover-{{capsuleColor}}" class="icon-wrapper" style="width: {{capsuleButtonInfo.width/2}}px;height: {{capsuleButtonInfo.height}}px;">
+      <cover-view mut-bind:tap="onTapLeftButton" catch:longpress="onLongPressLeftButton" hover-class="icon-wrapper-hover-{{capsuleColor}}" class="icon-wrapper" style="width: {{capsuleButtonInfo.width/2}}px;height: {{capsuleButtonInfo.height}}px;">
         <cover-image class="icon-left" src="icons/capsule-left-{{capsuleColor}}.png"></cover-image>
       </cover-view>
 
@@ -23,7 +23,7 @@
       <cover-view class="line"></cover-view>
 
       
-      <cover-view catch:tap="onTapRightButton" catch:longpress="onLongPressRightButton" hover-class="icon-wrapper-hover-{{capsuleColor}}" class="icon-wrapper" style="width: {{capsuleButtonInfo.width/2}}px;height: {{capsuleButtonInfo.height}}px;">
+      <cover-view mut-bind:tap="onTapRightButton" catch:longpress="onLongPressRightButton" hover-class="icon-wrapper-hover-{{capsuleColor}}" class="icon-wrapper" style="width: {{capsuleButtonInfo.width/2}}px;height: {{capsuleButtonInfo.height}}px;">
         <cover-image class="icon-right" src="icons/capsule-right-{{capsuleColor}}.png"></cover-image>
       </cover-view>
     </cover-view>
diff --git a/dist/checkbox/index.wxml b/dist/checkbox/index.wxml
index be672f79..bca2bea6 100644
--- a/dist/checkbox/index.wxml
+++ b/dist/checkbox/index.wxml
@@ -1,4 +1,4 @@
-<view bind:tap="onCheckboxChangeTap" class="label label-{{placement}} label-placement-{{parentPlacement}} {{disabled ? 'label-disabled l-disabled-class' : 'l-class'}}">
+<view mut-bind:tap="onCheckboxChangeTap" class="label label-{{placement}} label-placement-{{parentPlacement}} {{disabled ? 'label-disabled l-disabled-class' : 'l-class'}}">
         <view class="checkbox" style="color:{{checked ? selectColor : (disabled ? disabledColor : color)}};font-size: {{size}}">
             <slot wx:if="{{custom}}" name="icon"/>
             <view wx:else class="iconfont {{checked? 'icon-select': 'icon-unselect'}}"></view>
diff --git a/dist/collapse-item/index.wxml b/dist/collapse-item/index.wxml
index 2747ab9a..56febb8b 100644
--- a/dist/collapse-item/index.wxml
+++ b/dist/collapse-item/index.wxml
@@ -1,5 +1,5 @@
 <view class="container l-class">
-  <view bind:tap="onTapTitle" class="container-title l-title-class">
+  <view mut-bind:tap="onTapTitle" class="container-title l-title-class">
     <view style="{{disable?'color:#DEE2E6':''}}" wx:if="{{!customTitle}}">{{title}}</view>
     <l-icon class="container-title-icon" wx:if="{{!customTitle}}" style="{{isExpandContent?'transform:rotate(-180deg);':''}}" name="down" size="28" color="{{disable?'#DEE2E6':'#333'}}"></l-icon>
     <slot name="title"></slot>
diff --git a/dist/combined-tabs/index.wxml b/dist/combined-tabs/index.wxml
index baab13fa..e98d022f 100644
--- a/dist/combined-tabs/index.wxml
+++ b/dist/combined-tabs/index.wxml
@@ -33,7 +33,7 @@
 <template name="tab-header">
     <scroll-view scroll-x="{{headerType==='tab' && scrollable}}" scroll-y="{{headerType==='subTab' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll">
         <view class="l-tabs-header l-class-header l-header-class {{hasLine?'l-tabs-header-line':''}}">
-            <view id="{{item.key}}" class="l-tabs-item {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.image.placement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tab}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" data-header-type="{{headerType}}" bind:tap="handleChange">
+            <view id="{{item.key}}" class="l-tabs-item {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.image.placement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tab}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" data-header-type="{{headerType}}" mut-bind:tap="handleChange">
                 <image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class"/>
                 <l-icon wx:if="{{item.icon}}" l-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" size="28" color="{{item.key===activeKey?activeColor:inactiveColor}}"/>
                 {{item.tab}}
diff --git a/dist/count-selector/index.js b/dist/count-selector/index.js
deleted file mode 100644
index 2f9d831a..00000000
--- a/dist/count-selector/index.js
+++ /dev/null
@@ -1 +0,0 @@
-Component({externalClasses:["l-class","l-symbol-class","l-count-class","l-disabled-class"],properties:{count:{type:Number,value:1},max:{type:Number,value:9999},min:{type:Number,value:1},step:{type:Number,value:1},disabled:Boolean,iconSize:String,iconColor:String},data:{focus:!1,result:1},observers:{"count,min,max":function(){this.valueRange(this.data.count,"parameter")}},methods:{doNothing(t){const{type:e}=t.currentTarget.dataset;this.triggerEvent("linout",{type:e,way:"icon"},{bubbles:!0,composed:!0})},onCount(){this.setData({focus:!0})},onBlur(t){this.setData({focus:!1});let{value:e}=t.detail;setTimeout(()=>{this.blurCount(Number(e),()=>{this.data.count=this.data.result,this.triggerEvent("lintap",{count:this.data.result,type:"blur"},{bubbles:!0,composed:!0})})},50)},blurCount(t,e){t?this.valueRange(t):this.setData({result:this.properties.count}),e&&e()},valueRange(t,e="input"){t>this.properties.max?this.setData({result:this.properties.max},()=>{this.triggerEvent("linout",{type:"overflow_max",way:e},{bubbles:!0,composed:!0})}):t<this.properties.min?this.setData({result:this.properties.min},()=>{this.triggerEvent("linout",{type:"overflow_min",way:e},{bubbles:!0,composed:!0})}):this.setData({result:t})},reduceTap(){this.data.count-this.properties.step<=this.properties.min?this.data.count=this.properties.min:this.data.count-=this.properties.step,this.setData({result:this.data.count}),this.triggerEvent("lintap",{count:this.data.result,type:"reduce"},{bubbles:!0,composed:!0})},addTap(){this.data.count+this.properties.step>=this.properties.max?this.data.count=this.properties.max:this.data.count+=this.properties.step,this.setData({result:this.data.count}),this.triggerEvent("lintap",{count:this.data.result,type:"add"},{bubbles:!0,composed:!0})}}});
\ No newline at end of file
diff --git a/dist/count-selector/index.json b/dist/count-selector/index.json
deleted file mode 100644
index e11651a3..00000000
--- a/dist/count-selector/index.json
+++ /dev/null
@@ -1 +0,0 @@
-{"component":true,"usingComponents":{"l-icon":"../icon/index"}}
\ No newline at end of file
diff --git a/dist/count-selector/index.wxml b/dist/count-selector/index.wxml
deleted file mode 100644
index 95ba7c1a..00000000
--- a/dist/count-selector/index.wxml
+++ /dev/null
@@ -1,10 +0,0 @@
-<view class="l-class container-count">
-  <view class="symbol {{result<=min|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" catchtap="{{result<=min|| disabled?'doNothing':'reduceTap'}}" data-type="overflow_min" hover-class="count-hover">
-    <view class="l-icon l-icon-reduce" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
-  </view>
-  <input wx:if="{{focus}}" class="l-count-class count" disabled="{{disabled}}" type="number" focus="{{focus}}" value="{{result}}" bindblur="onBlur"/>
-  <view wx:else class="l-count-class count" bindtap="onCount">{{result}}</view>        
-  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" catchtap="{{result>=max|| disabled?'doNothing':'addTap'}}" data-type="overflow_max" hover-class="count-hover">
-       <view class="l-icon l-icon-add" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
-  </view>
-</view>
\ No newline at end of file
diff --git a/dist/count-selector/index.wxss b/dist/count-selector/index.wxss
deleted file mode 100644
index 929666b8..00000000
--- a/dist/count-selector/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-.container-count{display:flex;flex-direction:row;width:170rpx;height:56rpx}.symbol{height:100%;width:56rpx;font-size:28rpx;color:#596c8e;display:flex;align-items:center;justify-content:center}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:100%;flex:1;min-height:56rpx;line-height:56rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@font-face{font-family:iconfont;src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALEAAsAAAAABqwAAAJ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBFIEWATYCJAMMCwgABCAFhG0HNxvdBcgekiSBqhRCJKIogADMEYRr5GySu0dQoBAloETFRVKmqpWoK1wVG1th2Ij732n7N5fsqTh2xyneKfa2N3/anZKGvYXFohGGrUFIEA6JogD/fZ7L6U2gA7nGtyynNW3s8fyoF2AcUEBjbYqsRALxFtlF3ImLOE6g3ZheoYOxmRVIKtC4QLww9QYkCxFFMfKtQt2wtIjXKq3pZfrEq+j78d9qJEmqDE09fTTahoFf6deHfNxwgxOiBHl1hYx5oBC3GjMXIsLgItpN0e7yWhHSXPEmkcq31Dv94yWihmo7wbQcS/yiMoJf9yskkEFdzE0Diwo7eF2IkexeNr35cvtSjmQ/fjt5zeTy++93z1I4x8LHT3u9VVdH6SHr0r8+OjOTtCopyONe0uFsIlZDiaMZyTdAmzFfZzrm0+EOQPOcP/IeANGP4rNA8KN0+V8rbPwlMwX83P7UK0Wa5wJwS+sZvMEfUwMbiq9F1lxcFVWFvmwE4ErICtOvARTo9zPeMgROEVoL2hG+FqMeslbjZGHnUemwjlqrbbSbM766wwAuIkobZl1ICL0ekXT7jqzXF1nYb1SG/aLWGxG0O4uBLTtMhpne59gQ2CbNHWK2mEeJXaTj+iXUN5wGz2sjfg15YMaJJqvl/Dh6yOeYEWzqFSEooZy5ZEw6DR2HEZ8zC1tCNoTwq4pCm94kt5gLafs41CCgNqJpB2FqYTyUtxbSlc8vQboNjgbeIejJr0FcwOyc0MhUADlu8kCCe3klsElXIQgUQXGMixiTBiGHgyH85kEW1CLIjBEpX5WCm1GoSV7f4n7fNmiH9syRIkeR77bbiWdmwzMaDAAA') format('woff2')}.l-icon-add:before{content:"\e602"}.l-icon-reduce:before{content:"\e69c"}.l-icon{font-family:iconfont;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.l-icon::before{display:inline-flex}.count-hover{opacity:.8}
\ No newline at end of file
diff --git a/dist/counter/index.js b/dist/counter/index.js
index b0e9ed0d..8fc52c2a 100644
--- a/dist/counter/index.js
+++ b/dist/counter/index.js
@@ -1 +1 @@
-import hover from"../behaviors/hover";Component({behaviors:[hover],externalClasses:["l-class","l-symbol-class","l-count-class","l-disabled-class"],properties:{count:{type:Number,value:1},max:{type:Number,value:9999},min:{type:Number,value:1},step:{type:Number,value:1},disabled:Boolean,iconSize:String,iconColor:String},data:{focus:!1,result:1},observers:{"count,min,max":function(){this.valueRange(this.data.count,"parameter")}},methods:{doNothing(t){const{type:e}=t.currentTarget.dataset;this.triggerEvent("linout",{type:e,way:"icon"},{bubbles:!0,composed:!0})},onCount(){this.setData({focus:!0})},onBlur(t){this.setData({focus:!1});let{value:e}=t.detail;setTimeout(()=>{this.blurCount(Number(e),()=>{this.data.count=this.data.result,this.triggerEvent("lintap",{count:this.data.result,type:"blur"},{bubbles:!0,composed:!0})})},50)},blurCount(t,e){t?this.valueRange(t):this.setData({result:this.properties.count}),e&&e()},valueRange(t,e="input"){t>this.properties.max?this.setData({result:this.properties.max},()=>{this.triggerEvent("linout",{type:"overflow_max",way:e},{bubbles:!0,composed:!0})}):t<this.properties.min?this.setData({result:this.properties.min},()=>{this.triggerEvent("linout",{type:"overflow_min",way:e},{bubbles:!0,composed:!0})}):this.setData({result:t})},reduceTap(){this.data.count-this.properties.step<=this.properties.min?this.data.count=this.properties.min:this.data.count-=this.properties.step,this.setData({result:this.data.count}),this.triggerEvent("lintap",{count:this.data.result,type:"reduce"},{bubbles:!0,composed:!0})},addTap(){this.data.count+this.properties.step>=this.properties.max?this.data.count=this.properties.max:this.data.count+=this.properties.step,this.setData({result:this.data.count}),this.triggerEvent("lintap",{count:this.data.result,type:"add"},{bubbles:!0,composed:!0})}}});
\ No newline at end of file
+import hover from"../behaviors/hover";import eventUtil from"../core/utils/event-util";Component({behaviors:[hover],externalClasses:["l-class","l-symbol-class","l-count-class","l-disabled-class"],properties:{count:{type:Number,value:1},max:{type:Number,value:9999},min:{type:Number,value:1},step:{type:Number,value:1},disabled:Boolean,iconSize:String,iconColor:String},data:{focus:!1,result:1},observers:{result:function(t){eventUtil.emit(this,"linchange",{count:t})},"count,min,max":function(){this.valueRange(this.data.count,"parameter")}},methods:{doNothing(t){const{type:e}=t.currentTarget.dataset;eventUtil.emit(this,"linout",{type:e,way:"icon"})},onCount(){this.setData({focus:!0})},onBlur(t){this.setData({focus:!1});let{value:e}=t.detail;setTimeout(()=>{this.blurCount(Number(e),()=>{this.data.count=this.data.result,eventUtil.emit(this,"lintap",{count:this.data.result,type:"blur"})})},50)},blurCount(t,e){t?this.valueRange(t):this.setData({result:this.properties.count}),e&&e()},valueRange(t,e="input"){t>this.properties.max?this.setData({result:this.properties.max},()=>{eventUtil.emit(this,"linout",{type:"overflow_max",way:e})}):t<this.properties.min?this.setData({result:this.properties.min},()=>{eventUtil.emit(this,"linout",{type:"overflow_min",way:e})}):this.setData({result:t})},reduceTap(){this.data.count-this.properties.step<=this.properties.min?this.data.count=this.properties.min:this.data.count-=this.properties.step,this.setData({result:this.data.count}),this.triggerEvent("lintap",{count:this.data.result,type:"reduce"},{bubbles:!0,composed:!0})},addTap(){this.data.count+this.properties.step>=this.properties.max?this.data.count=this.properties.max:this.data.count+=this.properties.step,this.setData({result:this.data.count}),this.triggerEvent("lintap",{count:this.data.result,type:"add"},{bubbles:!0,composed:!0})}}});
\ No newline at end of file
diff --git a/dist/counter/index.wxml b/dist/counter/index.wxml
index c1e63886..983d1256 100644
--- a/dist/counter/index.wxml
+++ b/dist/counter/index.wxml
@@ -3,8 +3,8 @@
     <view class="l-icon l-icon-reduce" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>
   <input wx:if="{{focus}}" class="l-count-class count" disabled="{{disabled}}" type="number" focus="{{focus}}" value="{{result}}" bindblur="onBlur"/>
-  <view wx:else class="l-count-class count" bindtap="onCount">{{result}}</view>        
+  <view wx:else class="l-count-class count" mut-bind:tap="onCount">{{result}}</view>
   <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" catchtap="{{result>=max|| disabled?'doNothing':'addTap'}}" data-type="overflow_max" hover-class="{{isHover?'count-hover':''}}">
        <view class="l-icon l-icon-add" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/dist/custom-tab-bar/index.wxml b/dist/custom-tab-bar/index.wxml
index 071c1bd9..28c3c24e 100644
--- a/dist/custom-tab-bar/index.wxml
+++ b/dist/custom-tab-bar/index.wxml
@@ -1,7 +1,7 @@
 
 <view wx:if="{{show}}" class="tab-bar tab-bar-{{position}}" style='background: {{backgroundImg? "url("+ backgroundImg+ ")" : backgroundColor}}'>
   <view class="tab-bar-border" style="background: {{borderStyle}}"></view>
-  <view wx:for="{{list}}" wx:for-index="idx" wx:key="index" class="tab-bar-item {{item.style === 'circle' ? 'circle': ''}}" data-path="{{item.pagePath}}" data-index="{{idx}}" bindtap="switchTab">
+  <view wx:for="{{list}}" wx:for-index="idx" wx:key="index" class="tab-bar-item {{item.style === 'circle' ? 'circle': ''}}" data-path="{{item.pagePath}}" data-index="{{idx}}" mut-bind:tap="switchTab">
     <view wx:if="{{item.style === 'circle'}}" class="item-circle"></view>
     <image class="tab-bar-item-image" wx:if="{{item.style !== 'circle'}}" style="height: {{item.iconSize}}rpx; width: {{item.iconSize}}rpx" src="{{selected === idx ? item.selectedIconPath : item.iconPath}}"></image>
       <image wx:else class="tab-bar-item-image"></image>
diff --git a/dist/form/index.wxml b/dist/form/index.wxml
index 2b740adc..40d9faca 100644
--- a/dist/form/index.wxml
+++ b/dist/form/index.wxml
@@ -2,10 +2,10 @@
     <slot/>
 </view>
 <view class="l-form-btn-class">
-    <view class="l-form-submit-class" bind:tap="submit">
+    <view class="l-form-submit-class" mut-bind:tap="submit">
         <slot name="submit"/>
     </view>
-    <view class="l-form-reset-class" bind:tap="reset">
+    <view class="l-form-reset-class" mut-bind:tap="reset">
         <slot name="reset"/>
     </view>
 </view>
diff --git a/dist/grid-item/index.wxml b/dist/grid-item/index.wxml
index 49a59ea4..265756ea 100644
--- a/dist/grid-item/index.wxml
+++ b/dist/grid-item/index.wxml
@@ -1,3 +1,3 @@
-<view class="l-grid-item l-grid-item-class grid-item" bindtap="tapGridItem">
+<view class="l-grid-item l-grid-item-class grid-item" mut-bind:tap="tapGridItem">
     <slot></slot>
-</view>
\ No newline at end of file
+</view>
diff --git a/dist/grid/index.wxml b/dist/grid/index.wxml
index c6bd3cc1..42a412e9 100644
--- a/dist/grid/index.wxml
+++ b/dist/grid/index.wxml
@@ -1,5 +1,5 @@
-<view class="l-grid l-class" bindtap="tapGrid">
-    <view bindtap="tapGridItem" hover-class="{{isHover?'l-gird-hover':''}}" hover-start-time="20" hover-stay-time="50" data-grid-index="{{item.index}}" class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key" style="min-width:{{100/rowNum}}%;">
+<view class="l-grid l-class" mut-bind:tap="tapGrid">
+    <view mut-bind:tap="tapGridItem" hover-class="{{isHover?'l-gird-hover':''}}" hover-start-time="20" hover-stay-time="50" data-grid-index="{{item.index}}" class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key" style="min-width:{{100/rowNum}}%;">
         <slot name="{{item.key}}"></slot>
     </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/dist/image-clipper-tools/index.js b/dist/image-clipper-tools/index.js
new file mode 100644
index 00000000..5d71273c
--- /dev/null
+++ b/dist/image-clipper-tools/index.js
@@ -0,0 +1 @@
+Component({relations:{"../image-clipper/index":{type:"parent"}},externalClasses:["l-class"],properties:{zIndex:{type:Number,value:999},lockWidth:{type:Boolean,value:!1},lockHeight:{type:Boolean,value:!1},lockRatio:{type:Boolean,value:!1},disableScale:{type:Number,value:!1},disableRotate:{type:Number,value:!1},limitMove:{type:Boolean,value:!1}},data:{formColor:"#3963bc",lockWidthValue:!1,lockHeightValue:!1,lockRatioValue:!0,disableScaleValue:!1,disableRotateValue:!1,limitMoveValue:!1},methods:{bindSwitchChange:async function(e){const a=e.detail.value,l=e.currentTarget.dataset.type;let t=this.getRelationNodes("../image-clipper/index")[0];await t.setData({[l]:a})}}});
\ No newline at end of file
diff --git a/dist/image-clipper-tools/index.json b/dist/image-clipper-tools/index.json
new file mode 100644
index 00000000..1450e2ec
--- /dev/null
+++ b/dist/image-clipper-tools/index.json
@@ -0,0 +1 @@
+{"component":true,"usingComponents":{}}
\ No newline at end of file
diff --git a/dist/image-clipper-tools/index.wxml b/dist/image-clipper-tools/index.wxml
new file mode 100644
index 00000000..0add6c56
--- /dev/null
+++ b/dist/image-clipper-tools/index.wxml
@@ -0,0 +1,28 @@
+<view class="tools-container l-class" catchtouchmove="{{true}}" style="z-index: {{zIndex}};">
+    <view class="tools-form">
+        <view wx:if="{{lockWidth}}">
+            锁定裁剪框宽
+            <switch model:checked="{{lockWidthValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockWidth"/>
+        </view>
+        <view wx:if="{{lockHeight}}">
+            锁定裁剪框高
+            <switch model:checked="{{lockHeightValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockHeight"/>
+        </view>
+        <view wx:if="{{lockRatio}}">
+            锁定裁剪框比例
+            <switch model:checked="{{lockRatioValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockRatio"/>
+        </view>
+         <view wx:if="{{limitMove}}">
+            限制移动范围
+            <switch model:checked="{{limitMoveValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="limitMove"/>
+        </view>
+        <view wx:if="{{disableScale}}">
+            禁止缩放
+            <switch model:checked="{{disableScaleValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="disableScale"/>
+        </view>
+        <view wx:if="{{disableRotate}}">
+            禁止旋转
+            <switch model:checked="{{disableRotateValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="disableRotate"/>
+        </view>
+    </view>
+</view>
\ No newline at end of file
diff --git a/dist/image-clipper-tools/index.wxss b/dist/image-clipper-tools/index.wxss
new file mode 100644
index 00000000..f072ec77
--- /dev/null
+++ b/dist/image-clipper-tools/index.wxss
@@ -0,0 +1 @@
+.tools-container{width:100%;padding:20rpx 40rpx;box-sizing:border-box}.tools-container .tools-form{margin-top:20rpx;display:flex;flex-wrap:wrap;color:#fff}.tools-container .tools-form .slider-wrapper{display:flex;align-items:center}.tools-container .tools-form switch{transform:scale(.7)}
\ No newline at end of file
diff --git a/dist/image-clipper/calculate.js b/dist/image-clipper/calculate.js
new file mode 100644
index 00000000..fea59075
--- /dev/null
+++ b/dist/image-clipper/calculate.js
@@ -0,0 +1 @@
+export function determineDirection(t,e,i,c,h,a){let n;const r=h>t+i-24&&h<t+i+24,l=h>t-24&&h<t+24,o=a>e+c-24&&a<e+c+24,g=a>e-24&&a<e+24;return r&&o?n=1:r&&g?n=2:l&&g?n=3:l&&o&&(n=4),n}export function calcImageOffset(t,e){let i=t.imageLeft,c=t.imageTop;e=e||t.scale;let h=t.imageWidth,a=t.imageHeight;t.angle/90%2&&(h=t.imageHeight,a=t.imageWidth);const{cutX:n,clipWidth:r,cutY:l,clipHeight:o}=t,g=t=>t*e/2,u=g(h),d=g(a);return i=n+u>=i?i:n+u,i=n+r-u<=i?i:n+r-u,c=l+d>=c?c:l+d,c=l+o-d<=c?c:l+o-d,{left:i,top:c,scale:e}}export function calcImageScale(t,e){e=e||t.scale;let i=t.imageWidth,c=t.imageHeight;return t.angle/90%2&&(i=t.imageHeight,c=t.imageWidth),i*e<t.clipWidth&&(e=t.clipWidth/i),c*e<t.clipHeight&&(e=Math.max(e,t.clipHeight/c)),e}export function calcImageSize(t,e,i){let c=t,h=e;if(c&&h)c/h>(i.clipWidth||i.width)/(i.clipWidth||i.height)?(h=i.clipHeight||i.height,c=t/e*h):(c=i.clipWidth||i.width,h=e/t*c);else{c=(i._SYS_INFO||wx.getSystemInfoSync()).windowWidth,h=0}return{imageWidth:c,imageHeight:h}}export function calcPythagoreanTheorem(t,e){return Math.sqrt(Math.pow(t,2)+Math.pow(e,2))}export function clipTouchMoveOfCalculate(t,e){const i=e.touches[0].clientX,c=e.touches[0].clientY,{clipWidth:h,clipHeight:a,cutY:n,cutX:r,_CUT_START:l,lockRatio:o}=t;let{maxWidth:g,minWidth:u,maxHeight:d,minHeight:p}=t;g/=2,u/=2,p/=2,d/=2;let m=h,f=a,s=n,x=r,w=()=>{m=m<=g?m>=u?m:u:g,f=f<=d?f>=p?f:p:d},W=()=>(m>g||m<u||f>d||f<p)&&o?(w(),!1):(w(),!0);switch(f=l.height+(l.corner>1&&l.corner<4?1:-1)*(l.y-c),l.corner){case 1:if(m=l.width-l.x+i,o&&(f=m/(h/a)),!W())return;break;case 2:if(m=l.width-l.x+i,o&&(f=m/(h/a)),!W())return;s=l.cutY-(f-l.height);break;case 3:if(m=l.width+l.x-i,o&&(f=m/(h/a)),!W())return;s=l.cutY-(f-l.height),x=l.cutX-(m-l.width);break;case 4:if(m=l.width+l.x-i,o&&(f=m/(h/a)),!W())return;x=l.cutX-(m-l.width)}return{width:m,height:f,cutX:x,cutY:s}}export function imageTouchMoveOfCalcOffset(t,e,i){return{left:e-t._touchRelative[0].x,top:i-t._touchRelative[0].y}}
\ No newline at end of file
diff --git a/dist/image-clipper/images/close.png b/dist/image-clipper/images/close.png
new file mode 100755
index 00000000..a1c6c99c
Binary files /dev/null and b/dist/image-clipper/images/close.png differ
diff --git a/dist/image-clipper/images/photo.png b/dist/image-clipper/images/photo.png
new file mode 100755
index 00000000..80928c3b
Binary files /dev/null and b/dist/image-clipper/images/photo.png differ
diff --git a/dist/image-clipper/images/rotate-along.png b/dist/image-clipper/images/rotate-along.png
new file mode 100755
index 00000000..7c51905d
Binary files /dev/null and b/dist/image-clipper/images/rotate-along.png differ
diff --git a/dist/image-clipper/images/rotate-inverse.png b/dist/image-clipper/images/rotate-inverse.png
new file mode 100755
index 00000000..ec77b6b5
Binary files /dev/null and b/dist/image-clipper/images/rotate-inverse.png differ
diff --git a/dist/image-clipper/images/sure.png b/dist/image-clipper/images/sure.png
new file mode 100755
index 00000000..05f59556
Binary files /dev/null and b/dist/image-clipper/images/sure.png differ
diff --git a/dist/image-clipper/index.js b/dist/image-clipper/index.js
new file mode 100644
index 00000000..151b873a
--- /dev/null
+++ b/dist/image-clipper/index.js
@@ -0,0 +1 @@
+import dataUtil from"../core/utils/data-util";import eventUtil from"../core/utils/event-util";import{determineDirection,calcImageOffset,calcImageScale,calcImageSize,calcPythagoreanTheorem,clipTouchMoveOfCalculate,imageTouchMoveOfCalcOffset}from"./calculate";const detail=!0,IMAGE_TYPE={base64:"base64",url:"url"};Component({externalClasses:["l-class"],relations:{"../image-clipper-tools/index":{type:"child"}},options:{pureDataPattern:/^_/},properties:{show:{type:Boolean,value:!1},zIndex:{type:Number,value:99},imageUrl:{type:String},type:{type:String,options:["url","base64"],value:"url"},quality:{type:Number,value:1},width:{type:Number,value:400},height:{type:Number,value:400},minWidth:{type:Number,value:200},maxWidth:{type:Number,value:600},minHeight:{type:Number,value:200},maxHeight:{type:Number,value:600},lockWidth:{type:Boolean,value:!1},lockHeight:{type:Boolean,value:!1},lockRatio:{type:Boolean,value:!0},scaleRatio:{type:Number,value:1},minRatio:{type:Number,value:.5},maxRatio:{type:Number,value:2},disableScale:{type:Number,value:!1},disableRotate:{type:Number,value:!1},limitMove:{type:Boolean,value:!1},checkImage:{type:Boolean,value:!0},checkImageIcon:{type:String,value:"./images/photo.png"},rotateAlong:{type:Boolean,value:!0},rotateAlongIcon:{type:String,value:"./images/rotate-along.png"},rotateInverse:{type:Boolean,value:!0},rotateInverseIcon:{type:String,value:"./images/rotate-inverse.png"},sure:{type:Boolean,value:!0},sureIcon:{type:String,value:"./images/sure.png"},close:{type:Boolean,value:!0},closeIcon:{type:String,value:"./images/close.png"},rotateAngle:{type:Number,value:90}},data:{CANVAS_WIDTH:0,CANVAS_HEIGHT:0,cutX:0,cutY:0,clipWidth:0,clipHeight:0,cutAnimation:!1,imageWidth:0,imageHeight:0,imageTop:0,imageLeft:0,scale:1,angle:0,_SYS_INFO:{},_MOVE_THROTTLE:null,_MOVE_THROTTLE_FLAG:!0,_TIME_CUT_CENTER:null,_flagCutTouch:!1,_flagEndTouch:!1,_CUT_START:{},_cutAnimationTime:null,_touchRelative:[{x:0,y:0}],_hypotenuseLength:0,_ctx:null},observers:{imageUrl(t){t&&(this.imageReset(),wx.showLoading({title:"请稍候...",mask:!0}),wx.getImageInfo({src:t,success:t=>{this.imgComputeSize(t.width,t.height),this.properties.limitMove&&(this.imgMarginDetectionScale(),eventUtil.emit(this,"linimageready",t))},fail:()=>{this.imgComputeSize(),this.properties.limitMove&&this.imgMarginDetectionScale()}}))},"clipWidth, clipHeight"(t,e){let{minWidth:i,minHeight:a}=this.data;i/=2,a/=2,t<i&&dataUtil.setDiffData(this,{clipWidth:i}),e<a&&dataUtil.setDiffData(this,{clipHeight:a}),this.computeCutSize()},rotateAngle(t){dataUtil.setDiffData(this,{cutAnimation:!0,angle:t})},angle(t){this.moveStop();const{limitMove:e}=this.properties;e&&t%90&&dataUtil.setDiffData(this,{angle:90*Math.round(t/90)}),this.imgMarginDetectionScale()},cutAnimation(t){if(clearTimeout(this.data._cutAnimationTime),t){let t=setTimeout(()=>{dataUtil.setDiffData(this,{cutAnimation:!1})},260);dataUtil.setDiffData(this,{_cutAnimationTime:t})}},limitMove(t){t&&(this.data.angle%90&&dataUtil.setDiffData(this,{angle:90*Math.round(this.data.angle/90)}),this.imgMarginDetectionScale())},"cutY, cutX"(){this.cutDetectionPosition()},"width, height"(t,e){t!==this.width&&dataUtil.setDiffData(this,{clipWidth:t/2}),e!==this.height&&dataUtil.setDiffData(this,{clipHeight:e/2})}},methods:{setCutInfo(){const{width:t,height:e}=this.properties,{_SYS_INFO:i}=this.data,a=t/2,s=e/2,o=(i.windowHeight-s)/2,h=(i.windowWidth-a)/2,l=i.windowWidth/2,n=i.windowHeight/2,c=wx.createCanvasContext("image-clipper",this);this.setData({clipWidth:a,clipHeight:s,cutX:h,cutY:o,CANVAS_HEIGHT:s,CANVAS_WIDTH:a,_ctx:c,imageLeft:l,imageTop:n})},setCutCenter(){const{sysInfo:t,clipHeight:e,clipWidth:i,imageTop:a,imageLeft:s}=this.data;let o=t||wx.getSystemInfoSync(),h=.5*(o.windowHeight-e),l=.5*(o.windowWidth-i);this.setData({imageTop:a-this.data.cutY+h,imageLeft:s-this.data.cutX+l,cutY:h,cutX:l})},clipTouchStart(t){if(!this.properties.imageUrl)return void wx.showToast({title:"请选择图片",icon:"none"});const e=t.touches[0].clientX,i=t.touches[0].clientY,{cutX:a,cutY:s,clipWidth:o,clipHeight:h}=this.data,l=determineDirection(a,s,o,h,e,i);this.moveDuring();const n={width:o,height:h,x:e,y:i,cutY:s,cutX:a,corner:l};this.setData({_flagCutTouch:!0,_flagEndTouch:!0,_CUT_START:n})},clipTouchMove(t){if(!this.properties.imageUrl)return void wx.showToast({title:"请选择图片",icon:"none"});const{_flagCutTouch:e,_MOVE_THROTTLE_FLAG:i}=this.data;if(e&&i){const{lockRatio:e,lockHeight:i,lockWidth:a}=this.properties;if(e&&(a||i))return;dataUtil.setDiffData(this,{_MOVE_THROTTLE_FLAG:!1}),this.moveThrottle();const{width:s,height:o,cutX:h,cutY:l}=clipTouchMoveOfCalculate(this.data,t);a||i?a?i||dataUtil.setDiffData(this,{clipHeight:o,cutY:l}):dataUtil.setDiffData(this,{clipWidth:s,cutX:h}):dataUtil.setDiffData(this,{clipWidth:s,clipHeight:o,cutX:h,cutY:l}),this.imgMarginDetectionScale()}},clipTouchEnd(){this.moveStop(),this.setData({_flagCutTouch:!1})},moveDuring(){clearTimeout(this.data._TIME_CUT_CENTER)},moveStop(){clearTimeout(this.data._TIME_CUT_CENTER);const t=setTimeout(()=>{this.data.cutAnimation||dataUtil.setDiffData(this,{cutAnimation:!0}),this.setCutCenter()},800);dataUtil.setDiffData(this,{_TIME_CUT_CENTER:t})},moveThrottle(){if("android"===this.data._SYS_INFO.platform){clearTimeout(this.data._MOVE_THROTTLE);const t=setTimeout(()=>{dataUtil.setDiffData(this,{_MOVE_THROTTLE_FLAG:!0})},20);dataUtil.setDiffData(this,{_MOVE_THROTTLE:t})}else dataUtil.setDiffData(this,{_MOVE_THROTTLE_FLAG:!0})},imageReset(){const t=this.data._SYS_INFO||wx.getSystemInfoSync();this.setData({scale:1,angle:0,imageTop:t.windowHeight/2,imageLeft:t.windowWidth/2})},imageLoad(){this.imageReset(),wx.hideLoading(),eventUtil.emit(this,"linimageload",!0)},imgComputeSize(t,e){const{imageWidth:i,imageHeight:a}=calcImageSize(t,e,this.data);this.setData({imageWidth:i,imageHeight:a})},imgMarginDetectionScale(t){if(!this.properties.limitMove)return;const e=calcImageScale(this.data,t);this.imgMarginDetectionPosition(e)},imgMarginDetectionPosition(t){if(!this.properties.limitMove)return;const{scale:e,left:i,top:a}=calcImageOffset(this.data,t);dataUtil.setDiffData(this,{imageLeft:i,imageTop:a,scale:e})},imageTouchStart(t){this.setData({_flagEndTouch:!1});const{imageLeft:e,imageTop:i}=this.data,a=t.touches[0].clientX,s=t.touches[0].clientY;let o=[];if(1===t.touches.length)o[0]={x:a-e,y:s-i},this.setData({_touchRelative:o});else{const h=t.touches[1].clientX,l=t.touches[1].clientY;let n=Math.abs(a-h),c=Math.abs(s-l);const u=calcPythagoreanTheorem(n,c);o=[{x:a-e,y:s-i},{x:h-e,y:l-i}],this.setData({_touchRelative:o,_hypotenuseLength:u})}},imageTouchMove(t){const{_flagEndTouch:e,_MOVE_THROTTLE_FLAG:i}=this.data;if(e||!i)return;const a=t.touches[0].clientX,s=t.touches[0].clientY;if(dataUtil.setDiffData(this,{_MOVE_THROTTLE_FLAG:!1}),this.moveThrottle(),this.moveDuring(),1===t.touches.length){const{left:t,top:e}=imageTouchMoveOfCalcOffset(this.data,a,s);dataUtil.setDiffData(this,{imageLeft:t,imageTop:e}),this.imgMarginDetectionPosition()}else{const e=t.touches[1].clientX,i=t.touches[1].clientY;let o=Math.abs(a-e),h=Math.abs(s-i),l=calcPythagoreanTheorem(o,h),n=this.data.scale*(l/this.data._hypotenuseLength);this.properties.disableScale?n=1:(n=n<=this.properties.minRatio?this.properties.minRatio:n,n=n>=this.properties.maxRatio?this.properties.maxRatio:n,eventUtil.emit(this,"linsizechange",{imageWidth:this.data.imageWidth*n,imageHeight:this.data.imageHeight*n})),this.imgMarginDetectionScale(n),dataUtil.setDiffData(this,{_hypotenuseLength:Math.sqrt(Math.pow(o,2)+Math.pow(h,2)),scale:n})}},imageTouchEnd(){dataUtil.setDiffData(this,{_flagEndTouch:!0}),this.moveStop()},cutDetectionPosition(){const{cutX:t,cutY:e,_SYS_INFO:i,clipHeight:a,clipWidth:s}=this.data;let o=()=>{e<0&&dataUtil.setDiffData(this,{cutY:0}),e>i.windowHeight-a&&dataUtil.setDiffData(this,{cutY:i.windowHeight-a})},h=()=>{t<0&&dataUtil.setDiffData(this,{cutX:0}),t>i.windowWidth-s&&dataUtil.setDiffData(this,{cutX:i.windowWidth-s})};if(null===e&&null===t){let t=.5*(i.windowHeight-a),e=.5*(i.windowWidth-s);dataUtil.setDiffData(this,{cutX:e,cutY:t})}else null!==e&&null!==t?(o(),h()):null!==e&&null===t?(o(),dataUtil.setDiffData(this,{cutX:(i.windowWidth-s)/2})):null===e&&null!==t&&(h(),dataUtil.setDiffData(this,{cutY:(i.windowHeight-a)/2}))},computeCutSize(){const{clipHeight:t,clipWidth:e,_SYS_INFO:i,cutX:a,cutY:s}=this.data;e>i.windowWidth?dataUtil.setDiffData(this,{clipWidth:i.windowWidth}):e+a>i.windowWidth&&dataUtil.setDiffData(this,{cutX:i.windowWidth-a}),t>i.windowHeight?dataUtil.setDiffData(this,{clipHeight:i.windowHeight}):t+s>i.windowHeight&&dataUtil.setDiffData(this,{cutY:i.windowHeight-s})},getImageData(){if(!this.properties.imageUrl)return void wx.showToast({title:"请选择图片",icon:"none"});wx.showLoading({title:"加载中"});const{clipHeight:t,clipWidth:e,_ctx:i,scale:a,imageLeft:s,imageTop:o,cutX:h,cutY:l,angle:n}=this.data;let{CANVAS_HEIGHT:c,CANVAS_WIDTH:u}=this.data;const{scaleRatio:g,imageUrl:r,quality:d,type:m}=this.properties,p=()=>{const c=this.data.imageWidth*a*g,u=this.data.imageHeight*a*g,p=s-h,f=o-l;i.translate(p*g,f*g),i.rotate(n*Math.PI/180),i.drawImage(r,-c/2,-u/2,c,u),i.draw(!1,()=>{let i={width:e*g,height:Math.round(t*g),destWidth:e*g,destHeight:Math.round(t)*g,fileType:"png",quality:d},a={url:"",base64:"",width:e*g,height:t*g};IMAGE_TYPE.base64===m?wx.canvasGetImageData({canvasId:"image-clipper",x:0,y:0,width:e*g,height:Math.round(t*g),success:t=>{const e=new Uint8Array(t.data),i=wx.arrayBufferToBase64(e);a.url=i,a.base64=i,wx.hideLoading(),eventUtil.emit(this,"linclip",a)}}):wx.canvasToTempFilePath({...i,canvasId:"image-clipper",success:t=>{a.url=t.tempFilePath,a.base64=t.tempFilePath,wx.hideLoading(),eventUtil.emit(this,"linclip",a)},fail(t){throw t}},this)})};u!==e||c!==t?(u=e,c=t,i.draw(),setTimeout(()=>{p()},100)):p()},uploadImage(){wx.chooseImage({count:1,sizeType:["original","compressed"],sourceType:["album","camera"],success:t=>{const e=t.tempFilePaths;this.setData({imageUrl:e})}})},rotate(t){if(this.properties.disableRotate)return;if(!this.properties.imageUrl)return void wx.showToast({title:"请选择图片",icon:"none"});const{rotateAngle:e}=this.properties,i=this.data.angle;"along"===t.currentTarget.dataset.type?this.setData({angle:i+e}):this.setData({angle:i-e}),eventUtil.emit(this,"linrotate",{currentDeg:this.data.angle})},close(){this.setData({show:!1})}},lifetimes:{ready(){const t=wx.getSystemInfoSync();this.setData({_SYS_INFO:t}),this.setCutInfo(),this.setCutCenter(),this.computeCutSize(),this.cutDetectionPosition()}}});
\ No newline at end of file
diff --git a/dist/image-clipper/index.json b/dist/image-clipper/index.json
new file mode 100644
index 00000000..1450e2ec
--- /dev/null
+++ b/dist/image-clipper/index.json
@@ -0,0 +1 @@
+{"component":true,"usingComponents":{}}
\ No newline at end of file
diff --git a/dist/image-clipper/index.wxml b/dist/image-clipper/index.wxml
new file mode 100644
index 00000000..b7c48546
--- /dev/null
+++ b/dist/image-clipper/index.wxml
@@ -0,0 +1,45 @@
+<view wx:if="{{show}}">
+    <view class="container l-class" catchtouchmove="{{true}}" style="z-index: {{zIndex}};">
+        
+        <view class="clip-wrapper" bind:touchstart="clipTouchStart" bind:touchmove="clipTouchMove" bind:touchend="clipTouchEnd">
+            
+            
+            
+            
+            
+            
+            <view class="clip-content">
+                <view class="clip-content-top bg-transparent" style="height: {{cutY}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                <view class="clip-content-middle" style="height: {{clipHeight}}px;">
+                    
+                    
+                    
+                    
+                    
+                    
+                    <view class="clip-content-middle-left bg-transparent" style="width: {{cutX}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                    <view class="clip-content-middle-center" style="width: {{clipWidth}}px;height: {{clipHeight}}px;transition-property: {{cutAnimation ? '' : 'background'}}">
+                        <view class="clip-edge clip-edge-{{index < 2 ? 'top' : 'bottom'}}-{{index === 0 || index === 2 ? 'left' : 'right'}}" wx:for="{{4}}" wx:for-index="index" wx:key="index" style="left: {{index === 0 || index === 2 ? 0 : 'auto'}};right: {{index === 1 || index === 3 ? 0 : 'auto'}};top: {{index < 2 ? 0 : 'auto'}};bottom: {{index > 1 ? 0 : 'auto'}}"></view>
+                    </view>
+                    <view class="clip-content-middle-right flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                </view>
+                <view class="clip-content-footer flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+            </view>
+        </view>
+        
+        <image class="cropper-image" binderror="imageLoad" bindload="imageLoad" bind:touchstart="imageTouchStart" bind:touchmove="imageTouchMove" bind:touchend="imageTouchEnd" src="{{imageUrl}}" mode="widthFix" wx:if="{{imageUrl}}" style="width: {{imageWidth ? imageWidth + 'px' : 'auto'}};height: {{imageHeight ? imageHeight + 'px' : 'auto'}};transform: translate3d({{imageLeft - imageWidth / 2}}px, {{imageTop - imageHeight / 2}}px,0) scale({{scale}}) rotate({{angle}}deg); transition-duration: {{cutAnimation ? 0.35 : 0}}s;"/>
+        
+        <canvas canvas-id="image-clipper" id="image-clipper" :disable-scroll="true" style="width: {{CANVAS_WIDTH * scaleRatio}}px; height:{{CANVAS_HEIGHT * scaleRatio}}px;" class="clipper-canvas"></canvas>
+        
+        <view class="footer-tools">
+            <view class="tools-icon">
+                <image src="{{checkImageIcon}}" mut-bind:tap="uploadImage" wx:if="{{checkImage}}"/>
+                <image src="{{rotateAlongIcon}}" mut-bind:tap="rotate" data-type="along" wx:if="{{rotateAlong}}"/>
+                <image src="{{rotateInverseIcon}}" mut-bind:tap="rotate" data-type="inverse" wx:if="{{rotateInverse}}"/>
+                <image src="{{sureIcon}}" mut-bind:tap="getImageData" wx:if="{{sure}}"/>
+                <image src="{{closeIcon}}" mut-bind:tap="close" wx:if="{{close}}"/>
+            </view>
+            <slot></slot>
+        </view>
+    </view>
+</view>
\ No newline at end of file
diff --git a/dist/image-clipper/index.wxss b/dist/image-clipper/index.wxss
new file mode 100644
index 00000000..cf1b26bc
--- /dev/null
+++ b/dist/image-clipper/index.wxss
@@ -0,0 +1 @@
+.container{width:100vw;height:100vh;background-color:rgba(0,0,0,.6);position:fixed;top:0;left:0;z-index:1}.container .clip-wrapper{position:absolute;width:100vw;height:100vh}.container .clip-wrapper .clip-content{width:100vw;height:100vh;position:absolute;z-index:99;display:flex;flex-direction:column;pointer-events:none}.container .clip-wrapper .clip-content .flex-auto{flex:auto}.container .clip-wrapper .clip-content .clip-content-footer,.container .clip-wrapper .clip-content .clip-content-top{width:100%;pointer-events:none}.container .clip-wrapper .clip-content .clip-content-middle{width:100%;height:400rpx;display:flex;box-sizing:border-box}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-left,.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-right{height:100%}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center{position:relative;border:1px solid;box-sizing:border-box}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge{position:absolute;left:6rpx;width:34rpx;height:34rpx;border:2rpx solid #fff;pointer-events:auto;box-sizing:border-box}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-top-left{border-bottom-width:0!important;border-right-width:0!important}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-top-right{border-bottom-width:0!important;border-left-width:0!important}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-bottom-left{border-top-width:0!important;border-right-width:0!important}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-bottom-right{border-top-width:0!important;border-left-width:0!important}.container .clip-wrapper .bg-transparent{background-color:rgba(0,0,0,.6);transition-duration:.35s}.container .cropper-image{width:100%;border-style:none;position:absolute;top:0;left:0;z-index:2;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center}.container .clipper-canvas{position:fixed;z-index:10;left:-2000px;top:-2000px;pointer-events:none}.container .footer-tools{position:absolute;left:0;bottom:0;width:100%;z-index:99}.container .footer-tools .tools-icon{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20rpx 40rpx;box-sizing:border-box}.container .footer-tools .tools-icon image{display:block;width:50rpx;height:50rpx}
\ No newline at end of file
diff --git a/dist/input/index.wxml b/dist/input/index.wxml
index 07523796..f2dd2075 100644
--- a/dist/input/index.wxml
+++ b/dist/input/index.wxml
@@ -12,7 +12,7 @@
   
   <input class="input {{hideLabel?'hideLabel':''}} l-input-class" value="{{ value }}" type="{{type}}" password="{{type==='password'}}" placeholder="{{placeholder}}" maxlength="{{maxlength}}" placeholder-class="pls-class" placeholder-style="{{placeholderStyle}}" disabled="{{disabled}}" focus="{{focus}}" bindinput="handleInputChange" bindfocus="handleInputFocus" bindblur="handleInputBlur" bindconfirm="handleInputConfirm"/>
   <l-icon wx:if="{{showEye&&value}}" name="eye" catch:tap="onTapEyeIcon" size="40" l-class="l-eye l-eye-{{type}}"/>
-  <view class="close" wx:if="{{clear&&value}}" bindtap="onClearTap">
+  <view class="close" wx:if="{{clear&&value}}" mut-bind:tap="onClearTap">
     <view class="close-icon">
       <l-icon name="close" color="#fff" size="16"/>
     </view>
diff --git a/dist/list/index.wxml b/dist/list/index.wxml
index 770beaa6..ca412781 100644
--- a/dist/list/index.wxml
+++ b/dist/list/index.wxml
@@ -1,4 +1,4 @@
-<view class="l-list l-class" hover-class="{{isHover?'l-list-hover':''}}" hover-start-time="20" hover-stay-time="50" style="{{gap?'padding:0 '+gap+'rpx;':''}} {{leftGap?'padding-left:'+leftGap+'rpx':''}} {{rightGap?'padding-right:'+rightGap+'rpx':''}}" bind:tap="tapcell" data-url="{{url}}" data-link-type="{{linkType}}">
+<view class="l-list l-class" hover-class="{{isHover?'l-list-hover':''}}" hover-start-time="20" hover-stay-time="50" style="{{gap?'padding:0 '+gap+'rpx;':''}} {{leftGap?'padding-left:'+leftGap+'rpx':''}} {{rightGap?'padding-right:'+rightGap+'rpx':''}}" mut-bind:tap="tapcell" data-url="{{url}}" data-link-type="{{linkType}}">
     
     <l-badge wx:if="{{(badgeCount > 0 || dotBadge ) && badgePosition ==='left'}}" value="{{badgeCount}}" dot="{{dotBadge}}" max-count="{{badgeMaxCount}}" number-type="{{badgeCountType}}">
         <template is="cell-left-main" data="{{image,icon,title,desc,tagContent,tagPosition,tagColor,tagShape,tagPlain,iconSize,iconColor}}"/>
diff --git a/dist/loadmore/index.wxml b/dist/loadmore/index.wxml
index 595cfe27..9405776f 100644
--- a/dist/loadmore/index.wxml
+++ b/dist/loadmore/index.wxml
@@ -1,6 +1,6 @@
 
 <slot name="content"/>
-<view bindtap="onLoadmore" wx:if="{{show}}">
+<view mut-bind:tap="onLoadmore" wx:if="{{show}}">
   <view wx:if="{{custom && type==='end'}}">
     <slot name="end"/>
   </view>
diff --git a/dist/notice-bar/index.wxml b/dist/notice-bar/index.wxml
index 2276bd05..958b947d 100644
--- a/dist/notice-bar/index.wxml
+++ b/dist/notice-bar/index.wxml
@@ -2,16 +2,16 @@
   <l-icon wx:if="{{ frontIconName }}" size="{{frontIconSize}}" color="{{frontIconColor}}" name="{{ frontIconName }}" class="l-noticebar-icon" l-class="l-icon-class"/>
   <swiper autoplay vertical interval="{{4*speed}}" class="l-noticebar-content-wrap" wx:if="{{type=='swip'}}">
     <block wx:for="{{swipArr}}" wx:key="swip">
-      <swiper-item data-index="{{index}}" bindtap="onSwip">
+      <swiper-item data-index="{{index}}" mut-bind:tap="onSwip">
         {{item}}
       </swiper-item>
     </block>
   </swiper>
   <view class="l-noticebar-content-wrap l-noticebar-content-wrap-view" wx:else>
-    <view class="l-noticebar-content" bindtap="handleTap" animation="{{ animationData }}">
+    <view class="l-noticebar-content" mut-bind:tap="handleTap" animation="{{ animationData }}">
       <slot></slot>
     </view>
   </view>
-  <l-icon wx:if="{{ endIconName && !close }}" size="{{endIconSize}}" color="{{endIconColor}}" class="l-noticebar-operation" name="{{ endIconName }}" bindtap="onIconTap"/>
-  <l-icon wx:if="{{close}}" class="l-noticebar-operation" name="close" size="{{endIconSize}}" color="{{endIconColor}}" bindtap="onClose"/>
+  <l-icon wx:if="{{ endIconName && !close }}" size="{{endIconSize}}" color="{{endIconColor}}" class="l-noticebar-operation" name="{{ endIconName }}" mut-bind:tap="onIconTap"/>
+  <l-icon wx:if="{{close}}" class="l-noticebar-operation" name="close" size="{{endIconSize}}" color="{{endIconColor}}" mut-bind:tap="onClose"/>
 </view>
diff --git a/dist/radio/index.wxml b/dist/radio/index.wxml
index e4694c8b..3fedd1f4 100644
--- a/dist/radio/index.wxml
+++ b/dist/radio/index.wxml
@@ -1,7 +1,7 @@
-<view bind:tap="onRadioChangeTap" class="label label-{{placement}} {{disabled?'label-disabled l-disabled-class':'l-class'}}">
+<view mut-bind:tap="onRadioChangeTap" class="label label-{{placement}} {{disabled?'label-disabled l-disabled-class':'l-class'}}">
         <view class="radio" style="color:{{checked?selectColor:(disabled?disabledColor:color)}};font-size:{{size}}">
             <slot wx:if="{{custom}}" name="icon"/>
             <view wx:else class="iconfont {{checked?'icon-select':'icon-unselect'}}"></view>
         </view>
         <slot/>
-</view>
\ No newline at end of file
+</view>
diff --git a/dist/rate/index.wxml b/dist/rate/index.wxml
index 4bde2b5d..08c154d6 100644
--- a/dist/rate/index.wxml
+++ b/dist/rate/index.wxml
@@ -1,5 +1,5 @@
 <view class="l-rate l-class">
-    <view wx:for="{{count}}" wx:key="item" class="l-rate-star" data-index="{{index}}" bindtap="handleClick">
+    <view wx:for="{{count}}" wx:key="item" class="l-rate-star" data-index="{{index}}" mut-bind:tap="handleClick">
         <view class="icon-checked" wx:if="{{score > index}}" hover-class="none" hover-stop-propagation="false" data-rate="{{score-index}}" style="width:{{score-index<1?(score-index)*100:100}}%">
             <image wx:if="{{activeImage &&  inActiveImage}}" class="image-item l-class-image l-image-class" src="{{activeImage}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
             <l-icon wx:else name="{{name}}" l-class="l-class-icon l-icon-class" size="{{size}}" color="{{activeColor}}"/>
@@ -7,4 +7,4 @@
         <image wx:if="{{activeImage &&  inActiveImage}}" class="image-item l-class-image l-image-class" src="{{inActiveImage}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
         <l-icon wx:else name="{{name}}" l-class="l-class-icon l-icon-class" size="{{size}}" color="{{inActiveColor}}"></l-icon>
     </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/dist/search-bar/index.wxml b/dist/search-bar/index.wxml
index 09c944fc..bed097a7 100644
--- a/dist/search-bar/index.wxml
+++ b/dist/search-bar/index.wxml
@@ -1,6 +1,6 @@
 <view class="search-bar l-container-class">
   <slot name="before"/>
-  <view wx:if="{{frontText}}" class="icon-container" bind:tap="handleTapFrontText">
+  <view wx:if="{{frontText}}" class="icon-container" mut-bind:tap="handleTapFrontText">
     <text class="city">{{frontText}}</text>
     <l-icon name="down" color="#333" size="22"/>
   </view>
@@ -8,13 +8,13 @@
     <slot wx:if="{{custom}}" name="icon"/>
     <l-icon wx:else name="{{icon}}" size="{{iconSize}}" color="{{iconColor}}" l-class="l-icon-class"/>
     <input confirm-type="{{confirmType}}" class="input l-input-class {{'input'+ TextAlign}}" value="{{ value }}" type="{{type}}" password="{{type==='password'}}" placeholder="{{placeholder}}" maxlength="{{maxlength}}" placeholder-class="pls-class l-placeholder-class" placeholder-style="{{placeholderStyle}}" disabled="{{disabled}}" focus="{{focus}}" bindinput="handleInputChange" bindfocus="handleInputFocus" bindblur="handleInputBlur" bindconfirm="handleInputConfirm"/>
-    <view class="close-wrap" wx:if="{{clear&&value}}" bindtap="onClearTap">
+    <view class="close-wrap" wx:if="{{clear&&value}}" mut-bind:tap="onClearTap">
         <view class="close">
             <l-icon name="close" color="#fff" size="15"/>
         </view>
     </view>
   </view>
-  <view wx:if="{{showCancel}}" class="cancel l-cancel-class" bindtap="onCancel">
+  <view wx:if="{{showCancel}}" class="cancel l-cancel-class" mut-bind:tap="onCancel">
         {{cancelText}}
   </view>
   <slot name="after"/>
diff --git a/dist/segment/index.wxml b/dist/segment/index.wxml
index f631c388..ebf834d1 100644
--- a/dist/segment/index.wxml
+++ b/dist/segment/index.wxml
@@ -2,14 +2,14 @@
     <scroll-view scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}" scroll-y="{{placement==='left'||placement==='right' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}" style="{{width?'width:'+ width +'rpx;':'' }} {{height?'height:'+height+'rpx':''}}">
         <view class="l-tabs-header {{( even && equalWidth)?'l-tabs-equal-header':'l-tabs-unequal-header'}}">
             <block wx:for="{{tabList}}" wx:key="key">
-                <view wx:if="{{item.tab}}" class="l-tabs-item {{( even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}};{{itemWidth?'width:'+ itemWidth +'rpx':'' }};{{itemHeight?'height:'+itemHeight+'rpx':''}}" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
+                <view wx:if="{{item.tab}}" class="l-tabs-item {{( even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}};{{itemWidth?'width:'+ itemWidth +'rpx':'' }};{{itemHeight?'height:'+itemHeight+'rpx':''}}" data-key="{{item.key}}" data-index="{{index}}" mut-bind:tap="handleChange">
                     <l-badge l-self-class="badge-view" l-class="l-class-badge l-badge-class" wx:if="{{(item.badgeCount > 0 || item.dotBadge )}}" value="{{item.badgeCount}}" dot="{{item.dotBadge}}" max-count="{{item.badgeMaxCount}}" number-type="{{item.badgeCountType}}">
                         <template is="tab-item" data="{{item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine}}"/>
                     </l-badge>
                     <template is="tab-item" data="{{item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine}}" wx:else/>
                     <view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
                 </view>
-                <view wx:else class="l-tabs-item {{(even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
+                <view wx:else class="l-tabs-item {{(even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" data-key="{{item.key}}" data-index="{{index}}" mut-bind:tap="handleChange">
                     <slot name="{{item.key}}"></slot>
                     <view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
                 </view>
diff --git a/dist/slide-view/index.wxml b/dist/slide-view/index.wxml
index 536570bd..7adfe705 100644
--- a/dist/slide-view/index.wxml
+++ b/dist/slide-view/index.wxml
@@ -5,8 +5,8 @@
     <view class="left" style="width: {{width}}rpx; height: {{height}}rpx;">
       <slot name="left"></slot>
     </view>
-    <view class="right" bindtap="onRightTap" style="width: {{slideWidth}}rpx; height: {{height}}rpx;">
+    <view class="right" mut-bind:tap="onRightTap" style="width: {{slideWidth}}rpx; height: {{height}}rpx;">
       <slot name="right"></slot>
     </view>
   </movable-view>
-</movable-area>
\ No newline at end of file
+</movable-area>
diff --git a/dist/status-show/index.wxml b/dist/status-show/index.wxml
index fa64f1fd..7b49ab3c 100644
--- a/dist/status-show/index.wxml
+++ b/dist/status-show/index.wxml
@@ -1,4 +1,4 @@
-<view wx:if="{{show}}" class="l-status-container l-class {{fullScreen ? 'content': ''}}" style="{{'background:'+bgColor}};{{fullScreen ?'align-items:center;':''}}" bind:tap="tapStatusShow">
+<view wx:if="{{show}}" class="l-status-container l-class {{fullScreen ? 'content': ''}}" style="{{'background:'+bgColor}};{{fullScreen ?'align-items:center;':''}}" mut-bind:tap="tapStatusShow">
   <block wx:if="{{custom}}">
     <slot/>
   </block>
@@ -17,4 +17,4 @@
       <view>去逛逛</view>
     </l-button>
   </block>
-</view>
\ No newline at end of file
+</view>
diff --git a/dist/tabs/index.wxml b/dist/tabs/index.wxml
index 598f81fb..57b9760d 100644
--- a/dist/tabs/index.wxml
+++ b/dist/tabs/index.wxml
@@ -2,7 +2,7 @@
 <view class="l-tabs l-class-tabs l-tabs-class {{'l-placement-'+placement}} {{animated ? 'l-aminmated' :''}} {{placement==='left'||placement==='right'?'l-tabs-vertical':'l-tabs-horizontal'}} {{scrollable ? 'l-tabs-scroll':''}}">
   <scroll-view scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}" scroll-y="{{placement==='left'||placement==='right' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
     <view class="l-tabs-header">
-      <view class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tabList}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
+      <view class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tabList}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" mut-bind:tap="handleChange">
         <image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class"/>
         <l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class {{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
         {{item.tab}}
diff --git a/dist/tag/index.wxml b/dist/tag/index.wxml
index a33b489c..851691f2 100644
--- a/dist/tag/index.wxml
+++ b/dist/tag/index.wxml
@@ -1,5 +1,5 @@
 <view style="display:flex">
-  <view class="l-tag {{type==='touch'?'l-tag-touch':''}} {{plain?'l-tag-plain-'+ size:'l-tag-'+size}} {{disable?'l-tag-disable':''}} {{select?'select l-select-class':'l-class'}} {{plain?'l-tag-plain':''}} {{'l-tag-'+size+'-'+ shape}}" style="{{height?'line-height:'+height+'rpx;height:'+height+'rpx;':''}}{{plain?'color:'+fontColor+';border-color:'+fontColor:'background-color:'+bgColor+';color:'+fontColor}}" bindtap="handleTap">
+  <view class="l-tag {{type==='touch'?'l-tag-touch':''}} {{plain?'l-tag-plain-'+ size:'l-tag-'+size}} {{disable?'l-tag-disable':''}} {{select?'select l-select-class':'l-class'}} {{plain?'l-tag-plain':''}} {{'l-tag-'+size+'-'+ shape}}" style="{{height?'line-height:'+height+'rpx;height:'+height+'rpx;':''}}{{plain?'color:'+fontColor+';border-color:'+fontColor:'background-color:'+bgColor+';color:'+fontColor}}" mut-bind:tap="handleTap">
     <view class="{{location==='left'?'content':'content-l'}}" style="{{iconName?'line-height:0':''}}">
       <l-icon wx:if="{{icon}}" style="{{location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" name="{{icon}}" size="{{iconSize}}" color="{{iconColor}}"/>
       <image style="{{location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" wx:if="{{image}}" src="{{image}}" class="{{'tag-image-'+size}} l-image-class"></image>
diff --git a/examples/app.json b/examples/app.json
index c4a215e4..b6565f20 100644
--- a/examples/app.json
+++ b/examples/app.json
@@ -96,6 +96,7 @@
         "pages/checkbox/index",
         "pages/textarea/index",
         "pages/image-picker/index",
+        "pages/image-clipper/index",
         "pages/rules/index",
         "pages/rate/index",
         "pages/form/index"
@@ -121,7 +122,7 @@
       "root": "pages/components/shopping",
       "pages": [
         "pages/price/index",
-        "pages/count-selector/index",
+        "pages/counter/index",
         "pages/search-bar/index"
       ]
     },
@@ -142,4 +143,4 @@
     "content-card": "/components/content-card/index"
   },
   "sitemapLocation": "sitemap.json"
-}
+}
\ No newline at end of file
diff --git a/examples/dist/album/index.js b/examples/dist/album/index.js
index 6935fea7..7b3a1c3a 100644
--- a/examples/dist/album/index.js
+++ b/examples/dist/album/index.js
@@ -44,6 +44,22 @@ Component({
     key: {
       type: String,
       value: 'url'
+    },
+    maxNumber: {
+      type: Number,
+      value: 9
+    },
+    customRowNumber: {
+      type: Boolean,
+      value: false
+    },
+    everyRowNumber: {
+      type: Number,
+      value: 3
+    },
+    previewFullImage: {
+      type: Boolean,
+      value: true,
     }
   },
 
@@ -59,6 +75,10 @@ Component({
     row: 0,
     // 图片排列几列
     colum: 0,
+    // 用于显示的图片列表
+    showUrls: [],
+    // 传入的url长度是否大于maxNumber指定的数量
+    isLong: false,
   },
 
   /**
@@ -69,12 +89,29 @@ Component({
       // 在组件实例进入页面节点树时执行
 
       //判断传入urls长度
-      if (this.data.urls.length > 9) {
-        const urls = this.data.urls.slice(0, 9);
+      let urls = [];
+      if (this.data.urls.length > this.data.maxNumber) {
+        urls = this.data.urls.slice(0, this.data.maxNumber);
         this.setData({
-          urls
+          isLong: true,
         });
-        console.warn('超过9张图片！');
+        console.warn('图片数量超过maxNumber指定数量');
+      } else {
+        urls = this.data.urls;
+      }
+      this.setData({
+        showUrls: urls
+      });
+
+      if (!this.data.customRowNumber) {
+        let urlLength = this.data.showUrls.length;
+        if (urlLength > 1 && urlLength < 5) {
+          this.setData({
+            everyRowNumber: 2
+          });
+        } else(this.setData({
+          everyRowNumber: 3
+        }));
       }
 
       this.preview();
@@ -137,7 +174,13 @@ Component({
 
     onPreviewTap(e) {
       const index = e.currentTarget.id;
-      const urls = this.data.urls;
+      let urls;
+      if (this.data.previewFullImage) {
+        urls = this.data.urls;
+      } else {
+        urls = this.data.showUrls;
+      }
+
       let tempFilePath = '';
       let previewImageList = [];
       const newType = this.data.newType;
diff --git a/examples/dist/album/index.wxml b/examples/dist/album/index.wxml
index 274d4d6f..007f7235 100644
--- a/examples/dist/album/index.wxml
+++ b/examples/dist/album/index.wxml
@@ -1,6 +1,9 @@
 <wxs src="index.wxs" module="album"></wxs>
-<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
-    <block wx:for="{{urls}}" wx:key="index">
-        <image id='{{index}}' bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+<view style="{{album.gridStyle(gapRow, gapColumn, multipleSize, everyRowNumber)}}">
+    <block wx:for="{{showUrls}}" wx:key="index" class="child">
+        <view class="imageContainer {{album.dimBack(isLong, index, maxNumber, previewFullImage)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}">
+            <image class="{{album.dim(isLong, index, maxNumber, previewFullImage)}}}" id='{{index}}' bind:tap="onPreviewTap" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+            <view wx:if="{{album.image(isLong, index, maxNumber, previewFullImage)}}" class="text">+{{urls.length-maxNumber}}</view>
+        </view>
     </block>
 </view>
diff --git a/examples/dist/album/index.wxs b/examples/dist/album/index.wxs
index 05bae060..b41eda00 100644
--- a/examples/dist/album/index.wxs
+++ b/examples/dist/album/index.wxs
@@ -1,5 +1,4 @@
 var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
-    urls.length === 2 || urls.length === 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
     if (urls.length === 2 || urls.length === 4) {
         return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
     } else {
@@ -32,8 +31,49 @@ var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, m
     }
 }
 
+var gridStyle = function (gapRow, gapColumn, multipleSize, everyRowNumber) {
+    return 'display:inline-grid;grid-template-columns: repeat(' + everyRowNumber + ',' + multipleSize + 'rpx);grid-row-gap:' + gapRow + 'rpx;grid-column-gap:' + gapColumn + 'rpx;'
+}
+
+var dimBack = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dimback'
+            }
+        }
+    }
+    return ''
+}
+
+var dim = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dim'
+            }
+        }
+    }
+    return ''
+}
+
+var image = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
 module.exports = {
     containerStyle: containerStyle,
     blockClass: blockClass,
-    blockStyle: blockStyle
+    blockStyle: blockStyle,
+    gridStyle: gridStyle,
+    dimBack: dimBack,
+    dim: dim,
+    image: image,
 }
diff --git a/examples/dist/album/index.wxss b/examples/dist/album/index.wxss
index d7650fc8..73f94e0d 100644
--- a/examples/dist/album/index.wxss
+++ b/examples/dist/album/index.wxss
@@ -1 +1 @@
-.container{display:grid}.vertical{height:360rpx}
\ No newline at end of file
+.container{display:grid}.vertical{height:360rpx}.parent{display:inline-grid;grid-template-columns:repeat(auto-fill)}.child{box-sizing:border-box;background-color:#fff;flex:0 0 44%;height:100px;border:1px solid red;margin-top:4%;margin-left:2%;margin-right:2%}.dimback{background:#000}.dim{opacity:.6}.imageContainer{position:relative}.imageContainer:last-child>.text{color:#fff;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:larger}
\ No newline at end of file
diff --git a/examples/dist/avatar/index.wxml b/examples/dist/avatar/index.wxml
index 7f9ae0bc..b7529cf4 100644
--- a/examples/dist/avatar/index.wxml
+++ b/examples/dist/avatar/index.wxml
@@ -1,5 +1,5 @@
 
-<view class="l-avatar {{text||_isHaveUserNickName?'l-placement-'+placement:''}}" bindtap="tapAvatar">
+<view class="l-avatar {{text||_isHaveUserNickName?'l-placement-'+placement:''}}" mut-bind:tap="tapAvatar">
     <view class="l-avatar-image {{shape?'l-'+shape:''}} l-class" wx:if="{{_isHaveUserAvatarUrl||icon||src}}" style="width:{{size}}rpx;height:{{size}}rpx">
         <open-data class="open-data" wx:if="{{_isHaveUserAvatarUrl}}" type="userAvatarUrl" />
         <l-icon wx:elif="{{icon}}" size="{{iconSize || size*0.6}}" color="{{iconColor||'#ffffff'}}" name="{{icon}}" />
diff --git a/examples/dist/badge/index.wxml b/examples/dist/badge/index.wxml
index 2854d246..33c6be88 100644
--- a/examples/dist/badge/index.wxml
+++ b/examples/dist/badge/index.wxml
@@ -1,7 +1,7 @@
-<view class="l-badge" bindtap="handleTap">
+<view class="l-badge" mut-bind:tap="handleTap">
   <slot/>
   <block wx:if="{{show}}">
     <view wx:if="{{dot}}" class="l-badge-dot  l-class l-class-self l-self-class"></view>
     <view wx:else class="{{'l-badge-content-'+shape}} l-badge-content l-class l-class-self l-self-class">{{finalCount}}</view>
   </block>
-</view> 
\ No newline at end of file
+</view>
diff --git a/examples/dist/button/index.wxml b/examples/dist/button/index.wxml
index 3738cc7c..51d7dc3d 100644
--- a/examples/dist/button/index.wxml
+++ b/examples/dist/button/index.wxml
@@ -1,11 +1,11 @@
-<label for="{{name}}" bindtap="handleTap" class="l-label-class">
+<label for="{{name}}" mut-bind:tap="handleTap" class="l-label-class">
   <block wx:if="{{special}}">
     <view class="special-container l-class">
       <slot/>
     </view>
   </block>
   <block wx:else>
-    <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class " 
+    <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class "
           hover-class="{{disabled?'':'btn-hover l-hover-class'}}"
           hover-stop-propagation="{{hoverStopPropagation}}"
           hover-start-time="{{hoverStartTime}}"
@@ -19,21 +19,21 @@
 </label>
 <button style="position: absolute;top: -999px;left: -999px;"
         wx:if="{{openType}}"
-        id="{{name}}" 
-        lang="{{lang}}" 
-        form-type="{{formType}}" 
-        open-type="{{openType}}" 
-        app-parameter="{{ appParameter }}" 
-        hover-stop-propagation="{{ hoverStopPropagation }}" 
-        hover-start-time="{{ hoverStartTime }}" 
+        id="{{name}}"
+        lang="{{lang}}"
+        form-type="{{formType}}"
+        open-type="{{openType}}"
+        app-parameter="{{ appParameter }}"
+        hover-stop-propagation="{{ hoverStopPropagation }}"
+        hover-start-time="{{ hoverStartTime }}"
         hover-stay-time="{{ hoverStayTime }}"
-        session-from="{{ sessionFrom }}" 
-        send-message-title="{{ sendMessageTitle }}" 
-        send-message-path="{{ sendMessagePath }}" 
-        send-message-img="{{ sendMessageImg }}" 
-        show-message-card="{{ showMessageCard }}" 
-        bindcontact="openTypeEvent" 
+        session-from="{{ sessionFrom }}"
+        send-message-title="{{ sendMessageTitle }}"
+        send-message-path="{{ sendMessagePath }}"
+        send-message-img="{{ sendMessageImg }}"
+        show-message-card="{{ showMessageCard }}"
+        bindcontact="openTypeEvent"
         bindgetuserinfo="openTypeEvent"
-        bindgetphonenumber="openTypeEvent" 
+        bindgetphonenumber="openTypeEvent"
         bindopensetting="openTypeEvent">
-</button>
\ No newline at end of file
+</button>
diff --git a/examples/dist/capsule-bar/index.wxml b/examples/dist/capsule-bar/index.wxml
index badc97e6..b1228347 100644
--- a/examples/dist/capsule-bar/index.wxml
+++ b/examples/dist/capsule-bar/index.wxml
@@ -25,7 +25,7 @@
       style="border-color: rgba({{capsuleColor==='black'?'0,0,0,0.1':'255,255,255,0.25'}});background-color: rgba({{capsuleColor==='black'?'255,255,255,0.6':'0,0,0,0.15'}});width: {{capsuleButtonInfo.width}}px;height: {{capsuleButtonInfo.height}}px;left: {{capsuleButtonInfo.left}}px;top: {{capsuleButtonInfo.top}}px;"
     >
       <!--左侧按钮-->
-      <cover-view catch:tap="onTapLeftButton"
+      <cover-view mut-bind:tap="onTapLeftButton"
                   catch:longpress="onLongPressLeftButton"
                   hover-class="icon-wrapper-hover-{{capsuleColor}}"
                   class="icon-wrapper"
@@ -37,7 +37,7 @@
       <cover-view class="line"></cover-view>
 
       <!--右侧按钮-->
-      <cover-view catch:tap="onTapRightButton"
+      <cover-view mut-bind:tap="onTapRightButton"
                   catch:longpress="onLongPressRightButton"
                   hover-class="icon-wrapper-hover-{{capsuleColor}}"
                   class="icon-wrapper"
diff --git a/examples/dist/checkbox/index.wxml b/examples/dist/checkbox/index.wxml
index e17d4390..8c65625d 100644
--- a/examples/dist/checkbox/index.wxml
+++ b/examples/dist/checkbox/index.wxml
@@ -1,4 +1,4 @@
-<view bind:tap="onCheckboxChangeTap" 
+<view mut-bind:tap="onCheckboxChangeTap"
       class="label label-{{placement}} label-placement-{{parentPlacement}} {{disabled ? 'label-disabled l-disabled-class' : 'l-class'}}">
         <view class="checkbox" style="color:{{checked ? selectColor : (disabled ? disabledColor : color)}};font-size: {{size}}">
             <slot wx:if="{{custom}}" name="icon"/>
diff --git a/examples/dist/collapse-item/index.wxml b/examples/dist/collapse-item/index.wxml
index e60a0f4d..3adf6299 100644
--- a/examples/dist/collapse-item/index.wxml
+++ b/examples/dist/collapse-item/index.wxml
@@ -1,5 +1,5 @@
 <view class="container l-class">
-  <view bind:tap="onTapTitle" class="container-title l-title-class">
+  <view mut-bind:tap="onTapTitle" class="container-title l-title-class">
     <view style="{{disable?'color:#DEE2E6':''}}" wx:if="{{!customTitle}}">{{title}}</view>
     <l-icon class="container-title-icon" wx:if="{{!customTitle}}" style="{{isExpandContent?'transform:rotate(-180deg);':''}}" name="down" size="28"
             color="{{disable?'#DEE2E6':'#333'}}"></l-icon>
diff --git a/examples/dist/combined-tabs/index.wxml b/examples/dist/combined-tabs/index.wxml
index f7873629..4fc82ea5 100644
--- a/examples/dist/combined-tabs/index.wxml
+++ b/examples/dist/combined-tabs/index.wxml
@@ -33,7 +33,7 @@
 <template name="tab-header">
     <scroll-view scroll-x="{{headerType==='tab' && scrollable}}" scroll-y="{{headerType==='subTab' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll">
         <view class="l-tabs-header l-class-header l-header-class {{hasLine?'l-tabs-header-line':''}}">
-            <view id="{{item.key}}" class="l-tabs-item {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.image.placement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tab}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" data-header-type="{{headerType}}" bind:tap="handleChange">
+            <view id="{{item.key}}" class="l-tabs-item {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.image.placement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tab}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" data-header-type="{{headerType}}" mut-bind:tap="handleChange">
                 <image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class" />
                 <l-icon wx:if="{{item.icon}}" l-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" size="28" color="{{item.key===activeKey?activeColor:inactiveColor}}" />
                 {{item.tab}}
diff --git a/examples/dist/count-selector/index.js b/examples/dist/count-selector/index.js
deleted file mode 100644
index c037e059..00000000
--- a/examples/dist/count-selector/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-Component({
-  externalClasses: [
-    'l-class',
-    'l-symbol-class',
-    'l-count-class',
-    'l-disabled-class'
-  ],
-  properties: {
-    count: {
-      type: Number,
-      value: 1
-    },
-    max: {
-      type: Number,
-      value: 9999
-    },
-    min: {
-      type: Number,
-      value: 1
-    },
-    step: {
-      type: Number,
-      value: 1
-    },
-    disabled: Boolean,
-    iconSize: String,
-    iconColor: String
-  },
-
-  /**
-   * 组件的初始数据
-   */
-  data: {
-    focus: false,
-    result: 1
-  },
-
-  observers: {
-    'count,min,max': function () {
-      this.valueRange(this.data.count, 'parameter');
-    }
-  },
-
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-    doNothing(e) {
-      const { type } = e.currentTarget.dataset;
-      this.triggerEvent('linout', { type, way: 'icon' }, {
-        bubbles: true,
-        composed: true
-      });
-    },
-
-    onCount() {
-      this.setData({
-        focus: true
-      });
-    },
-
-    onBlur(e) {
-      this.setData({
-        focus: false
-      });
-      let {
-        value
-      } = e.detail;
-      setTimeout(() => {
-        this.blurCount(Number(value), () => {
-          this.data.count = this.data.result;
-          this.triggerEvent('lintap', {
-            count: this.data.result,
-            type: 'blur'
-          }, {
-            bubbles: true,
-            composed: true
-          });
-        });
-      }, 50);
-    },
-
-    blurCount(value, callback) {
-      if (value) {
-        this.valueRange(value);
-      } else {
-        this.setData({
-          result: this.properties.count
-        });
-      }
-      callback && callback();
-    },
-
-    valueRange(value, way = 'input') {
-      if (value > this.properties.max) {
-        this.setData({
-          result: this.properties.max
-        }, () => {
-          this.triggerEvent('linout', { type: 'overflow_max', way }, {
-            bubbles: true,
-            composed: true
-          });
-        });
-      } else if (value < this.properties.min) {
-        this.setData({
-          result: this.properties.min
-        }, () => {
-          this.triggerEvent('linout', { type: 'overflow_min', way }, {
-            bubbles: true,
-            composed: true
-          });
-        });
-      } else {
-        this.setData({
-          result: value
-        });
-      }
-    },
-
-    reduceTap() {
-      let distance = this.data.count - this.properties.step;
-      if (distance <= this.properties.min) {
-        this.data.count = this.properties.min;
-      } else {
-        this.data.count -= this.properties.step;
-      }
-      this.setData({
-        result: this.data.count
-      });
-      this.triggerEvent('lintap', {
-        count: this.data.result,
-        type: 'reduce'
-      }, {
-        bubbles: true,
-        composed: true
-      });
-    },
-
-    addTap() {
-      let distance = this.data.count + this.properties.step;
-      if (distance >= this.properties.max) {
-        this.data.count = this.properties.max;
-      } else {
-        this.data.count += this.properties.step;
-      }
-      this.setData({
-        result: this.data.count
-      });
-      this.triggerEvent('lintap', {
-        count: this.data.result,
-        type: 'add'
-      }, {
-        bubbles: true,
-        composed: true
-      });
-    },
-  }
-});
\ No newline at end of file
diff --git a/examples/dist/count-selector/index.json b/examples/dist/count-selector/index.json
deleted file mode 100644
index c01e2d7e..00000000
--- a/examples/dist/count-selector/index.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "l-icon":"../icon/index"
-  }
-}
\ No newline at end of file
diff --git a/examples/dist/count-selector/index.wxml b/examples/dist/count-selector/index.wxml
deleted file mode 100644
index c1b1cff4..00000000
--- a/examples/dist/count-selector/index.wxml
+++ /dev/null
@@ -1,22 +0,0 @@
-<view class="l-class container-count">
-  <view class="symbol {{result<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}" 
-        catchtap="{{result<=min|| disabled?'doNothing':'reduceTap'}}"
-        data-type="overflow_min"
-        hover-class="count-hover">
-    <view class="l-icon l-icon-reduce" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
-  </view>
-  <input  wx:if="{{focus}}"
-          class="l-count-class count" 
-          disabled="{{disabled}}" 
-          type="number"
-          focus="{{focus}}" 
-          value="{{result}}"
-          bindblur="onBlur" />
-  <view wx:else class="l-count-class count" bindtap="onCount">{{result}}</view>        
-  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" 
-        catchtap="{{result>=max|| disabled?'doNothing':'addTap'}}"
-        data-type="overflow_max"
-        hover-class="count-hover">
-       <view class="l-icon l-icon-add" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
-  </view>
-</view>
\ No newline at end of file
diff --git a/examples/dist/count-selector/index.wxss b/examples/dist/count-selector/index.wxss
deleted file mode 100644
index 929666b8..00000000
--- a/examples/dist/count-selector/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-.container-count{display:flex;flex-direction:row;width:170rpx;height:56rpx}.symbol{height:100%;width:56rpx;font-size:28rpx;color:#596c8e;display:flex;align-items:center;justify-content:center}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:100%;flex:1;min-height:56rpx;line-height:56rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@font-face{font-family:iconfont;src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALEAAsAAAAABqwAAAJ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBFIEWATYCJAMMCwgABCAFhG0HNxvdBcgekiSBqhRCJKIogADMEYRr5GySu0dQoBAloETFRVKmqpWoK1wVG1th2Ij732n7N5fsqTh2xyneKfa2N3/anZKGvYXFohGGrUFIEA6JogD/fZ7L6U2gA7nGtyynNW3s8fyoF2AcUEBjbYqsRALxFtlF3ImLOE6g3ZheoYOxmRVIKtC4QLww9QYkCxFFMfKtQt2wtIjXKq3pZfrEq+j78d9qJEmqDE09fTTahoFf6deHfNxwgxOiBHl1hYx5oBC3GjMXIsLgItpN0e7yWhHSXPEmkcq31Dv94yWihmo7wbQcS/yiMoJf9yskkEFdzE0Diwo7eF2IkexeNr35cvtSjmQ/fjt5zeTy++93z1I4x8LHT3u9VVdH6SHr0r8+OjOTtCopyONe0uFsIlZDiaMZyTdAmzFfZzrm0+EOQPOcP/IeANGP4rNA8KN0+V8rbPwlMwX83P7UK0Wa5wJwS+sZvMEfUwMbiq9F1lxcFVWFvmwE4ErICtOvARTo9zPeMgROEVoL2hG+FqMeslbjZGHnUemwjlqrbbSbM766wwAuIkobZl1ICL0ekXT7jqzXF1nYb1SG/aLWGxG0O4uBLTtMhpne59gQ2CbNHWK2mEeJXaTj+iXUN5wGz2sjfg15YMaJJqvl/Dh6yOeYEWzqFSEooZy5ZEw6DR2HEZ8zC1tCNoTwq4pCm94kt5gLafs41CCgNqJpB2FqYTyUtxbSlc8vQboNjgbeIejJr0FcwOyc0MhUADlu8kCCe3klsElXIQgUQXGMixiTBiGHgyH85kEW1CLIjBEpX5WCm1GoSV7f4n7fNmiH9syRIkeR77bbiWdmwzMaDAAA') format('woff2')}.l-icon-add:before{content:"\e602"}.l-icon-reduce:before{content:"\e69c"}.l-icon{font-family:iconfont;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.l-icon::before{display:inline-flex}.count-hover{opacity:.8}
\ No newline at end of file
diff --git a/examples/dist/counter/index.js b/examples/dist/counter/index.js
index 6a3a6b7d..96499fc0 100644
--- a/examples/dist/counter/index.js
+++ b/examples/dist/counter/index.js
@@ -1,4 +1,5 @@
 import hover from '../behaviors/hover';
+import eventUtil from '../core/utils/event-util';
 
 Component({
   behaviors: [hover],
@@ -39,9 +40,12 @@ Component({
   },
 
   observers: {
+    'result': function (count) {
+      eventUtil.emit(this, 'linchange', { count });
+    },
     'count,min,max': function () {
       this.valueRange(this.data.count, 'parameter');
-    }
+    },
   },
 
   /**
@@ -50,10 +54,7 @@ Component({
   methods: {
     doNothing(e) {
       const { type } = e.currentTarget.dataset;
-      this.triggerEvent('linout', { type, way: 'icon' }, {
-        bubbles: true,
-        composed: true
-      });
+      eventUtil.emit(this, 'linout', { type, way: 'icon' });
     },
 
     onCount() {
@@ -72,13 +73,7 @@ Component({
       setTimeout(() => {
         this.blurCount(Number(value), () => {
           this.data.count = this.data.result;
-          this.triggerEvent('lintap', {
-            count: this.data.result,
-            type: 'blur'
-          }, {
-            bubbles: true,
-            composed: true
-          });
+          eventUtil.emit(this, 'lintap', { count: this.data.result, type: 'blur' });
         });
       }, 50);
     },
@@ -99,19 +94,13 @@ Component({
         this.setData({
           result: this.properties.max
         }, () => {
-          this.triggerEvent('linout', { type: 'overflow_max', way }, {
-            bubbles: true,
-            composed: true
-          });
+          eventUtil.emit(this, 'linout', { type: 'overflow_max', way });
         });
       } else if (value < this.properties.min) {
         this.setData({
           result: this.properties.min
         }, () => {
-          this.triggerEvent('linout', { type: 'overflow_min', way }, {
-            bubbles: true,
-            composed: true
-          });
+          eventUtil.emit(this, 'linout', { type: 'overflow_min', way });
         });
       } else {
         this.setData({
@@ -158,4 +147,4 @@ Component({
       });
     },
   }
-});
\ No newline at end of file
+});
diff --git a/examples/dist/counter/index.wxml b/examples/dist/counter/index.wxml
index 47791290..1211eea4 100644
--- a/examples/dist/counter/index.wxml
+++ b/examples/dist/counter/index.wxml
@@ -1,22 +1,22 @@
 <view class="l-class container-count">
-  <view class="symbol {{result<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}" 
+  <view class="symbol {{result<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}"
         catchtap="{{result<=min|| disabled?'doNothing':'reduceTap'}}"
         data-type="overflow_min"
         hover-class="{{isHover?'count-hover':''}}">
     <view class="l-icon l-icon-reduce" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>
   <input  wx:if="{{focus}}"
-          class="l-count-class count" 
-          disabled="{{disabled}}" 
+          class="l-count-class count"
+          disabled="{{disabled}}"
           type="number"
-          focus="{{focus}}" 
+          focus="{{focus}}"
           value="{{result}}"
           bindblur="onBlur"/>
-  <view wx:else class="l-count-class count" bindtap="onCount">{{result}}</view>        
-  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" 
+  <view wx:else class="l-count-class count" mut-bind:tap="onCount">{{result}}</view>
+  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}"
         catchtap="{{result>=max|| disabled?'doNothing':'addTap'}}"
         data-type="overflow_max"
         hover-class="{{isHover?'count-hover':''}}">
        <view class="l-icon l-icon-add" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/examples/dist/custom-tab-bar/index.wxml b/examples/dist/custom-tab-bar/index.wxml
index faf7d111..fef791a2 100644
--- a/examples/dist/custom-tab-bar/index.wxml
+++ b/examples/dist/custom-tab-bar/index.wxml
@@ -11,7 +11,7 @@
     class="tab-bar-item {{item.style === 'circle' ? 'circle': ''}}"
     data-path="{{item.pagePath}}"
     data-index="{{idx}}"
-    bindtap="switchTab">
+    mut-bind:tap="switchTab">
     <view  wx:if="{{item.style === 'circle'}}" class='item-circle'></view>
     <image
       class='tab-bar-item-image'
diff --git a/examples/dist/form/index.wxml b/examples/dist/form/index.wxml
index fb186479..6f055290 100644
--- a/examples/dist/form/index.wxml
+++ b/examples/dist/form/index.wxml
@@ -2,10 +2,10 @@
     <slot />
 </view>
 <view class="l-form-btn-class">
-    <view class="l-form-submit-class" bind:tap="submit">
+    <view class="l-form-submit-class" mut-bind:tap="submit">
         <slot name="submit"/>
     </view>
-    <view class="l-form-reset-class" bind:tap="reset">
+    <view class="l-form-reset-class" mut-bind:tap="reset">
         <slot name="reset"/>
     </view>
 </view>
diff --git a/examples/dist/grid-item/index.wxml b/examples/dist/grid-item/index.wxml
index 49a59ea4..265756ea 100644
--- a/examples/dist/grid-item/index.wxml
+++ b/examples/dist/grid-item/index.wxml
@@ -1,3 +1,3 @@
-<view class="l-grid-item l-grid-item-class grid-item" bindtap="tapGridItem">
+<view class="l-grid-item l-grid-item-class grid-item" mut-bind:tap="tapGridItem">
     <slot></slot>
-</view>
\ No newline at end of file
+</view>
diff --git a/examples/dist/grid/index.wxml b/examples/dist/grid/index.wxml
index ddd2ffed..936b3ef5 100644
--- a/examples/dist/grid/index.wxml
+++ b/examples/dist/grid/index.wxml
@@ -1,11 +1,11 @@
-<view class="l-grid l-class" bindtap="tapGrid">
-    <view bindtap="tapGridItem" 
-          hover-class="{{isHover?'l-gird-hover':''}}" 
+<view class="l-grid l-class" mut-bind:tap="tapGrid">
+    <view mut-bind:tap="tapGridItem"
+          hover-class="{{isHover?'l-gird-hover':''}}"
           hover-start-time="20"
-          hover-stay-time="50" 
-          data-grid-index="{{item.index}}" 
-          class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key" 
+          hover-stay-time="50"
+          data-grid-index="{{item.index}}"
+          class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key"
           style="min-width:{{100/rowNum}}%;">
         <slot name="{{item.key}}"></slot>
     </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/examples/dist/image-clipper-tools/index.js b/examples/dist/image-clipper-tools/index.js
new file mode 100644
index 00000000..3226d451
--- /dev/null
+++ b/examples/dist/image-clipper-tools/index.js
@@ -0,0 +1,80 @@
+Component({
+
+  relations: {
+    '../image-clipper/index': {
+      type: 'parent'
+    }
+  },
+  externalClasses: ['l-class'],
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 组件层级
+    zIndex: {
+      type: Number,
+      value: 999
+    },
+    // 是否显示锁定裁剪框宽度按钮
+    lockWidth: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示锁定裁剪框高度按钮
+    lockHeight: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示锁定裁剪框比例按钮
+    lockRatio: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示禁止缩放按钮
+    disableScale: {
+      type: Number,
+      value: false
+    },
+    // 是否显示禁止旋转按钮
+    disableRotate: {
+      type: Number,
+      value: false
+    },
+    // 是否显示限制移动范围按钮
+    limitMove: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    formColor: '#3963bc',
+    lockWidthValue: false,
+    lockHeightValue: false,
+    lockRatioValue: true,
+    disableScaleValue: false,
+    disableRotateValue: false,
+    limitMoveValue: false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * switch change事件
+     */
+    bindSwitchChange: async function(event) {
+      const value = event.detail.value;
+      const type = event.currentTarget.dataset.type;
+      let parent = this.getRelationNodes('../image-clipper/index')[0];
+      await parent.setData({
+        [type]: value
+      });
+    },
+  }
+});
diff --git a/examples/dist/image-clipper-tools/index.json b/examples/dist/image-clipper-tools/index.json
new file mode 100644
index 00000000..e8cfaaf8
--- /dev/null
+++ b/examples/dist/image-clipper-tools/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/examples/dist/image-clipper-tools/index.wxml b/examples/dist/image-clipper-tools/index.wxml
new file mode 100644
index 00000000..35f37ef2
--- /dev/null
+++ b/examples/dist/image-clipper-tools/index.wxml
@@ -0,0 +1,28 @@
+<view class="tools-container l-class" catchtouchmove="{{true}}" style="z-index: {{zIndex}};">
+    <view class="tools-form">
+        <view wx:if="{{lockWidth}}">
+            锁定裁剪框宽
+            <switch model:checked="{{lockWidthValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockWidth" />
+        </view>
+        <view wx:if="{{lockHeight}}">
+            锁定裁剪框高
+            <switch model:checked="{{lockHeightValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockHeight" />
+        </view>
+        <view wx:if="{{lockRatio}}">
+            锁定裁剪框比例
+            <switch model:checked="{{lockRatioValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockRatio" />
+        </view>
+         <view wx:if="{{limitMove}}">
+            限制移动范围
+            <switch model:checked="{{limitMoveValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="limitMove" />
+        </view>
+        <view wx:if="{{disableScale}}">
+            禁止缩放
+            <switch model:checked="{{disableScaleValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="disableScale" />
+        </view>
+        <view wx:if="{{disableRotate}}">
+            禁止旋转
+            <switch model:checked="{{disableRotateValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="disableRotate" />
+        </view>
+    </view>
+</view>
\ No newline at end of file
diff --git a/examples/dist/image-clipper-tools/index.wxss b/examples/dist/image-clipper-tools/index.wxss
new file mode 100644
index 00000000..f072ec77
--- /dev/null
+++ b/examples/dist/image-clipper-tools/index.wxss
@@ -0,0 +1 @@
+.tools-container{width:100%;padding:20rpx 40rpx;box-sizing:border-box}.tools-container .tools-form{margin-top:20rpx;display:flex;flex-wrap:wrap;color:#fff}.tools-container .tools-form .slider-wrapper{display:flex;align-items:center}.tools-container .tools-form switch{transform:scale(.7)}
\ No newline at end of file
diff --git a/examples/dist/image-clipper/calculate.js b/examples/dist/image-clipper/calculate.js
new file mode 100644
index 00000000..1dffc8e7
--- /dev/null
+++ b/examples/dist/image-clipper/calculate.js
@@ -0,0 +1,276 @@
+/**
+ * 判断手指触摸位置
+ *
+ * @param {*} cutX
+ * @param {*} cutY
+ * @param {*} clipWidth
+ * @param {*} clipHeight
+ * @param {*} currentX
+ * @param {*} currentY
+ * @returns
+ */
+export function determineDirection(cutX, cutY, clipWidth, clipHeight, currentX, currentY) {
+  /*
+   * (右下>>1 右上>>2 左上>>3 左下>>4)
+   * left_x：  裁剪框左边线距离视口最左侧两点位置 [3,4]
+   * right_x： 裁剪框右边线距离视口最右侧两点位置 [1,2]
+   * top_y：   裁剪框顶部线距离视口最顶部两点位置 [2,3]
+   * bottom_y：裁剪框底部线距离视口最底部两点位置 [1,4]
+   */
+  // 用户体验优化，增加裁剪框四角可触摸区域
+  const EXPAND_SIZE = 24;
+
+  let left_x1 = cutX - EXPAND_SIZE;
+  let left_x2 = cutX + EXPAND_SIZE;
+
+  let top_y1 = cutY - EXPAND_SIZE;
+  let top_y2 = cutY + EXPAND_SIZE;
+
+  let right_x1 = cutX + clipWidth - EXPAND_SIZE;
+  let right_x2 = cutX + clipWidth + EXPAND_SIZE;
+
+  let bottom_y1 = cutY + clipHeight - EXPAND_SIZE;
+  let bottom_y2 = cutY + clipHeight + EXPAND_SIZE;
+  /*
+   * 四角
+   * (右下>>1 右上>>2 左上>>3 左下>>4)
+   */
+  let corner;
+
+  const isRight = currentX > right_x1 && currentX < right_x2;
+  const isLeft = currentX > left_x1 && currentX < left_x2;
+  const isBottom = currentY > bottom_y1 && currentY < bottom_y2;
+  const isTop = currentY > top_y1 && currentY < top_y2;
+
+  if (isRight && isBottom) {
+    corner = 1;
+  } else if (isRight && isTop) {
+    corner = 2;
+  } else if (isLeft && isTop) {
+    corner = 3;
+  } else if (isLeft && isBottom) {
+    corner = 4;
+  }
+  return corner;
+}
+
+/**
+ * 图片边缘检测检测时，计算图片偏移量
+ *
+ * @param {*} data
+ * @param {*} scale
+ * @returns
+ */
+export function calcImageOffset(data, scale) {
+  let left = data.imageLeft;
+  let top = data.imageTop;
+  scale = scale || data.scale;
+  
+  let imageWidth = data.imageWidth;
+  let imageHeight = data.imageHeight;
+  if ((data.angle / 90) % 2) {
+    imageWidth = data.imageHeight;
+    imageHeight = data.imageWidth;
+  }
+  const {
+    cutX,
+    clipWidth,
+    cutY,
+    clipHeight
+  } = data;
+  // 当前图片宽度/高度
+  const currentImageSize = (size) => (size * scale) / 2;
+  const currentImageWidth = currentImageSize(imageWidth);
+  const currentImageHeight = currentImageSize(imageHeight);
+
+  left = cutX + currentImageWidth >= left ? left : cutX + currentImageWidth;
+  left = cutX + clipWidth - currentImageWidth <= left ? left : cutX + clipWidth - currentImageWidth;
+  top = cutY + currentImageHeight >= top ? top : cutY + currentImageHeight;
+  top = cutY + clipHeight - currentImageHeight <= top ? top : cutY + clipHeight - currentImageHeight;
+  return {
+    left,
+    top,
+    scale
+  };
+}
+
+/**
+ * 图片边缘检测时，计算图片缩放比例
+ *
+ * @param {*} data
+ * @param {*} scale
+ * @returns
+ */
+export function calcImageScale(data, scale) {
+  scale = scale || data.scale;
+  let imageWidth = data.imageWidth;
+  let imageHeight = data.imageHeight;
+  if ((data.angle / 90) % 2) {
+    imageWidth = data.imageHeight;
+    imageHeight = data.imageWidth;
+  }
+  if (imageWidth * scale < data.clipWidth) {
+    scale = data.clipWidth / imageWidth;
+  }
+  if (imageHeight * scale < data.clipHeight) {
+    scale = Math.max(scale, data.clipHeight / imageHeight);
+  }
+  return scale;
+}
+
+/**
+ * 计算图片尺寸
+ *
+ * @export
+ * @param {*} width
+ * @param {*} height
+ * @param {*} data
+ * @returns
+ */
+export function calcImageSize(width, height, data) {
+  // 默认按图片最小边 = 对应裁剪框尺寸
+  let imageWidth = width,
+    imageHeight = height;
+  if (imageWidth && imageHeight) {
+    if (imageWidth / imageHeight > (data.clipWidth || data.width) / (data.clipWidth || data.height)) {
+      imageHeight = data.clipHeight || data.height;
+      imageWidth = (width / height) * imageHeight;
+    } else {
+      imageWidth = data.clipWidth || data.width;
+      imageHeight = (height / width) * imageWidth;
+    }
+  } else {
+    let sys = data._SYS_INFO || wx.getSystemInfoSync();
+    imageWidth = sys.windowWidth;
+    imageHeight = 0;
+  }
+  return {
+    imageWidth,
+    imageHeight
+  };
+}
+
+/**
+ * 勾股定理求斜边
+ *
+ * @param {*} width
+ * @param {*} height
+ * @returns
+ */
+export function calcPythagoreanTheorem(width, height) {
+  return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+}
+
+/**
+ * 拖动裁剪框时计算
+ *
+ * @export
+ * @param {*} data
+ * @param {*} event
+ * @returns
+ */
+export function clipTouchMoveOfCalculate(data, event) {
+  const clientX = event.touches[0].clientX;
+  const clientY = event.touches[0].clientY;
+
+  const {
+    clipWidth,
+    clipHeight,
+    cutY: oldCutY,
+    cutX: oldCutX,
+    _CUT_START,
+    lockRatio
+  } = data;
+  let {
+    maxWidth,
+    minWidth,
+    maxHeight,
+    minHeight
+  } = data;
+  maxWidth = maxWidth / 2;
+  minWidth = minWidth / 2;
+  minHeight = minHeight / 2;
+  maxHeight = maxHeight / 2;
+
+  let width = clipWidth,
+    height = clipHeight,
+    cutY = oldCutY,
+    cutX = oldCutX,
+    // 获取裁剪框实际宽度/高度
+    // 如果大于最大值则使用最大值
+    // 如果小于最小值则使用最小值
+    size_correct = () => {
+      width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
+      height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
+    },
+    size_inspect = () => {
+      if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && lockRatio) {
+        size_correct();
+        return false;
+      } else {
+        size_correct();
+        return true;
+      }
+    };
+  height = _CUT_START.height + (_CUT_START.corner > 1 && _CUT_START.corner < 4 ? 1 : -1) * (_CUT_START.y - clientY);
+  switch (_CUT_START.corner) {
+  case 1:
+    width = _CUT_START.width - _CUT_START.x + clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    break;
+  case 2:
+    width = _CUT_START.width - _CUT_START.x + clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    cutY = _CUT_START.cutY - (height - _CUT_START.height);
+    break;
+  case 3:
+    width = _CUT_START.width + _CUT_START.x - clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    cutY = _CUT_START.cutY - (height - _CUT_START.height);
+    cutX = _CUT_START.cutX - (width - _CUT_START.width);
+    break;
+  case 4:
+    width = _CUT_START.width + _CUT_START.x - clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    cutX = _CUT_START.cutX - (width - _CUT_START.width);
+    break;
+  default:
+    break;
+  }
+  return {
+    width,
+    height,
+    cutX,
+    cutY
+  };
+}
+
+/**
+ * 单指拖动图片计算偏移
+ *
+ * @export
+ * @param {*} data
+ * @param {*} clientXForLeft
+ * @param {*} clientYForLeft
+ * @returns
+ */
+export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
+  let left = clientXForLeft - data._touchRelative[0].x,
+    top = clientYForLeft - data._touchRelative[0].y;
+  return {
+    left,
+    top
+  };
+}
diff --git a/examples/dist/image-clipper/images/close.png b/examples/dist/image-clipper/images/close.png
new file mode 100755
index 00000000..a1c6c99c
Binary files /dev/null and b/examples/dist/image-clipper/images/close.png differ
diff --git a/examples/dist/image-clipper/images/photo.png b/examples/dist/image-clipper/images/photo.png
new file mode 100755
index 00000000..80928c3b
Binary files /dev/null and b/examples/dist/image-clipper/images/photo.png differ
diff --git a/examples/dist/image-clipper/images/rotate-along.png b/examples/dist/image-clipper/images/rotate-along.png
new file mode 100755
index 00000000..7c51905d
Binary files /dev/null and b/examples/dist/image-clipper/images/rotate-along.png differ
diff --git a/examples/dist/image-clipper/images/rotate-inverse.png b/examples/dist/image-clipper/images/rotate-inverse.png
new file mode 100755
index 00000000..ec77b6b5
Binary files /dev/null and b/examples/dist/image-clipper/images/rotate-inverse.png differ
diff --git a/examples/dist/image-clipper/images/sure.png b/examples/dist/image-clipper/images/sure.png
new file mode 100755
index 00000000..05f59556
Binary files /dev/null and b/examples/dist/image-clipper/images/sure.png differ
diff --git a/examples/dist/image-clipper/index.js b/examples/dist/image-clipper/index.js
new file mode 100644
index 00000000..55fa2629
--- /dev/null
+++ b/examples/dist/image-clipper/index.js
@@ -0,0 +1,802 @@
+import dataUtil from '../core/utils/data-util';
+import eventUtil from '../core/utils/event-util';
+import {
+  determineDirection,
+  calcImageOffset,
+  calcImageScale,
+  calcImageSize,
+  calcPythagoreanTheorem,
+  clipTouchMoveOfCalculate,
+  imageTouchMoveOfCalcOffset
+} from './calculate';
+const detail = true;
+// 模拟enum
+const IMAGE_TYPE = {
+  base64: 'base64',
+  url: 'url'
+};
+Component({
+  externalClasses: ['l-class'],
+  relations: {
+    '../image-clipper-tools/index': {
+      type: 'child'
+    }
+  },
+  options: {
+    pureDataPattern: /^_/
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 组件显示隐藏
+    show: {
+      type: Boolean,
+      value: false
+    },
+    // 组件层级
+    zIndex: {
+      type: Number,
+      value: 99
+    },
+    // 图片url
+    imageUrl: {
+      type: String
+    },
+    // 生成的图片类型
+    type: {
+      type: String,
+      options: ['url', 'base64'],
+      value: 'url'
+    },
+    // 生成的图片质量
+    quality: {
+      type: Number,
+      value: 1
+    },
+    // 裁剪框宽度
+    width: {
+      type: Number,
+      value: 400
+    },
+    // 裁剪框高度
+    height: {
+      type: Number,
+      value: 400
+    },
+    // 裁剪框最小宽度
+    minWidth: {
+      type: Number,
+      value: 200
+    },
+    // 裁剪框最大宽度
+    maxWidth: {
+      type: Number,
+      value: 600
+    },
+    // 裁剪框最小高度
+    minHeight: {
+      type: Number,
+      value: 200
+    },
+    // 裁剪框最大高度
+    maxHeight: {
+      type: Number,
+      value: 600
+    },
+    // 是否锁定裁剪框宽度	
+    lockWidth: {
+      type: Boolean,
+      value: false
+    },
+    // 是否锁定裁剪框高度	
+    lockHeight: {
+      type: Boolean,
+      value: false
+    },
+    // 是否锁定裁剪框比例	
+    lockRatio: {
+      type: Boolean,
+      value: true
+    },
+    // 生成图片相对于裁剪框的比例
+    scaleRatio: {
+      type: Number,
+      value: 1
+    },
+    // 图片最小缩放比
+    minRatio: {
+      type: Number,
+      value: 0.5
+    },
+    // 图片最大缩放比
+    maxRatio: {
+      type: Number,
+      value: 2
+    },
+    // 是否禁止缩放
+    disableScale: {
+      type: Number,
+      value: false
+    },
+    // 是否禁止旋转
+    disableRotate: {
+      type: Number,
+      value: false
+    },
+    // 是否限制移动范围	
+    limitMove: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示选择图片按钮
+    checkImage: {
+      type: Boolean,
+      value: true
+    },
+    checkImageIcon: {
+      type: String,
+      value: './images/photo.png'
+    },
+    // 是否显示顺时针旋转按钮
+    rotateAlong: {
+      type: Boolean,
+      value: true
+    },
+    rotateAlongIcon: {
+      type: String,
+      value: './images/rotate-along.png'
+    },
+    // 是否显示逆时针旋转按钮
+    rotateInverse: {
+      type: Boolean,
+      value: true
+    },
+    rotateInverseIcon: {
+      type: String,
+      value: './images/rotate-inverse.png'
+    },
+    // 是否显示确定按钮
+    sure: {
+      type: Boolean,
+      value: true
+    },
+    sureIcon: {
+      type: String,
+      value: './images/sure.png'
+    },
+    // 是否显示关闭按钮
+    close: {
+      type: Boolean,
+      value: true
+    },
+    closeIcon: {
+      type: String,
+      value: './images/close.png'
+    },
+    // 旋转按钮每次旋转的角度
+    rotateAngle: {
+      type: Number,
+      value: 90
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    CANVAS_WIDTH: 0,
+    CANVAS_HEIGHT: 0,
+    cutX: 0, // 裁剪框x轴起点，可用于裁剪框left区域宽度
+    cutY: 0, // 裁剪框y轴起点，可用于裁剪框top区域高度
+    clipWidth: 0, // 裁剪框宽度
+    clipHeight: 0, // 裁剪框高度
+    cutAnimation: false, //是否开启图片和裁剪框过渡
+    imageWidth: 0, // 图片宽度
+    imageHeight: 0, // 图片高度
+    imageTop: 0, // 图片上边距
+    imageLeft: 0, // 图片左边距
+    scale: 1, // 图片缩放比
+    angle: 0, // 图片旋转角度
+    _SYS_INFO: {},
+    _MOVE_THROTTLE: null, // 触摸移动节流setTimeout
+    _MOVE_THROTTLE_FLAG: true, // 节流标识
+    _TIME_CUT_CENTER: null, // 自动居中节流函数
+    _flagCutTouch: false, // 是否开始拖动裁剪框
+    _flagEndTouch: false, // 是否结束拖动裁剪框
+    _CUT_START: {}, // 拖动裁剪框所需数据
+    _cutAnimationTime: null,
+    _touchRelative: [{
+      x: 0,
+      y: 0
+    }], // 手指或鼠标和图片中心的相对位置
+    _hypotenuseLength: 0, // 双指触摸时斜边长度
+    _ctx: null, // canvas上下文
+  },
+  /**
+   * 组件监听器
+   */
+  observers: {
+    // 监听图片url改变，获取图片信息
+    'imageUrl'(url) {
+      if (!url) return;
+      this.imageReset();
+      wx.showLoading({
+        title: '请稍候...',
+        mask: true
+      });
+      wx.getImageInfo({
+        src: url,
+        success: res => {
+          // 计算图片尺寸
+          this.imgComputeSize(res.width, res.height);
+          if (this.properties.limitMove) {
+            // 限制移动，不留空白处理
+            this.imgMarginDetectionScale();
+            eventUtil.emit(this, 'linimageready', res);
+          }
+        },
+        fail: () => {
+          this.imgComputeSize();
+          if (this.properties.limitMove) {
+            this.imgMarginDetectionScale();
+          }
+        }
+      });
+    },
+    'clipWidth, clipHeight'(widthVal, heightVal) {
+      let { minWidth, minHeight } = this.data;
+      minWidth = minWidth / 2;
+      minHeight = minHeight / 2;
+      if (widthVal < minWidth) {
+        dataUtil.setDiffData(this, { clipWidth: minWidth });
+      }
+      if (heightVal < minHeight) {
+        dataUtil.setDiffData(this, { clipHeight: minHeight });
+      }
+      this.computeCutSize();
+    },
+    'rotateAngle'(val) {
+      dataUtil.setDiffData(this, { cutAnimation: true, angle: val });
+    },
+    'angle'(val) {
+      this.moveStop();
+      const {
+        limitMove
+      } = this.properties;
+      if (limitMove && val % 90) {
+        dataUtil.setDiffData(this, { angle: Math.round(val / 90) * 90 });
+      }
+      this.imgMarginDetectionScale();
+    },
+    'cutAnimation'(val) {
+      // 开启过渡260毫秒之后自动关闭
+      clearTimeout(this.data._cutAnimationTime);
+      if (val) {
+        let _cutAnimationTime = setTimeout(() => {
+          dataUtil.setDiffData(this, { cutAnimation: false });
+        }, 260);
+        dataUtil.setDiffData(this, { _cutAnimationTime });
+      }
+    },
+    'limitMove'(val) {
+      if (val) {
+        if (this.data.angle % 90) {
+          dataUtil.setDiffData(this, { angle: Math.round(this.data.angle / 90) * 90 });
+        }
+        this.imgMarginDetectionScale();
+      }
+    },
+    'cutY, cutX'() {
+      this.cutDetectionPosition();
+    },
+    'width, height'(width, height) {
+      if(width !== this.width) {
+        dataUtil.setDiffData(this, {clipWidth: width / 2});
+      }
+      if(height !== this.height) {
+        dataUtil.setDiffData(this, {clipHeight: height / 2});
+      }
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * 设置裁剪框的一些信息
+     */
+    setCutInfo() {
+      const {
+        width,
+        height
+      } = this.properties;
+      const {
+        _SYS_INFO
+      } = this.data;
+      // 本组件动态style默认单位为px，需将用户传入值/2
+      const clipWidth = width / 2;
+      const clipHeight = height / 2;
+      const cutY = (_SYS_INFO.windowHeight - clipHeight) / 2;
+      const cutX = (_SYS_INFO.windowWidth - clipWidth) / 2;
+      const imageLeft = _SYS_INFO.windowWidth / 2;
+      const imageTop = _SYS_INFO.windowHeight / 2;
+      const _ctx = wx.createCanvasContext('image-clipper', this);
+      this.setData({
+        clipWidth,
+        clipHeight,
+        cutX,
+        cutY,
+        CANVAS_HEIGHT: clipHeight,
+        CANVAS_WIDTH: clipWidth,
+        _ctx,
+        imageLeft,
+        imageTop
+      });
+    },
+    /**
+     * 裁剪框居中
+     */
+    setCutCenter() {
+      const { sysInfo, clipHeight, clipWidth, imageTop, imageLeft } = this.data;
+      let sys = sysInfo || wx.getSystemInfoSync();
+      let cutY = (sys.windowHeight - clipHeight) * 0.5;
+      let cutX = (sys.windowWidth - clipWidth) * 0.5;
+      this.setData({ 
+        imageTop: imageTop - this.data.cutY + cutY, 
+        imageLeft: imageLeft - this.data.cutX + cutX, 
+        cutY, 
+        cutX 
+      });
+    },
+    /**
+     * 开始拖动裁剪框
+     * 需在此处查找到是否拖动的裁剪框四角
+     */
+    clipTouchStart(event) {
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+      const currentX = event.touches[0].clientX;
+      const currentY = event.touches[0].clientY;
+      const { cutX, cutY, clipWidth, clipHeight } = this.data;
+      const corner = determineDirection(cutX, cutY, clipWidth, clipHeight, currentX, currentY);
+      this.moveDuring();
+      const _CUT_START = {
+        width: clipWidth,
+        height: clipHeight,
+        x: currentX,
+        y: currentY,
+        cutY,
+        cutX,
+        corner
+      };
+      this.setData({ _flagCutTouch: true, _flagEndTouch: true, _CUT_START });
+    },
+    /**
+     * 拖动裁剪框
+     * 当拖动的裁剪框区域时处理数据
+     */
+    clipTouchMove(event) {
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+
+      const { _flagCutTouch, _MOVE_THROTTLE_FLAG } = this.data;
+      if (_flagCutTouch && _MOVE_THROTTLE_FLAG) {
+        const { lockRatio, lockHeight, lockWidth } = this.properties;
+        if (lockRatio && (lockWidth || lockHeight)) return;
+        dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: false });
+        this.moveThrottle();
+        const { width, height, cutX, cutY } = clipTouchMoveOfCalculate(this.data, event);
+        if (!lockWidth && !lockHeight) {
+          dataUtil.setDiffData(this, { clipWidth: width, clipHeight: height, cutX, cutY });
+        } else if (!lockWidth) {
+          dataUtil.setDiffData(this, { clipWidth: width, cutX });
+        } else if (!lockHeight) {
+          dataUtil.setDiffData(this, { clipHeight: height, cutY });
+        }
+        this.imgMarginDetectionScale();
+      }
+    },
+    /**
+     * 拖动裁剪框结束
+     * 当拖动的裁剪框区域时处理数据
+     */
+    clipTouchEnd() {
+      this.moveStop();
+      this.setData({ _flagCutTouch: false });
+    },
+    /**
+     * 清空之前的自动居中延迟函数
+     */
+    moveDuring() {
+      clearTimeout(this.data._TIME_CUT_CENTER);
+    },
+    /**
+     * 停止移动时需要做的操作
+     * 清空之前的自动居中延迟函数并添加最新的
+     */
+    moveStop() {
+      clearTimeout(this.data._TIME_CUT_CENTER);
+      const _TIME_CUT_CENTER = setTimeout(() => {
+        //动画启动
+        if (!this.data.cutAnimation) {
+          dataUtil.setDiffData(this, { cutAnimation: true });
+        }
+        this.setCutCenter();
+      }, 800);
+      dataUtil.setDiffData(this, { _TIME_CUT_CENTER });
+    },
+    /**
+     * 重置延迟函数
+     */
+    moveThrottle() {
+      if (this.data._SYS_INFO.platform === 'android') {
+        clearTimeout(this.data._MOVE_THROTTLE);
+        const _MOVE_THROTTLE = setTimeout(() => {
+          dataUtil.setDiffData(this, {  _MOVE_THROTTLE_FLAG: true });
+        }, 800 / 40);
+        dataUtil.setDiffData(this, { _MOVE_THROTTLE });
+      } else {
+        dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: true });
+      }
+    },
+    /**
+     * 图片初始化
+     */
+    imageReset() {
+      const sys = this.data._SYS_INFO || wx.getSystemInfoSync();
+      this.setData({ scale: 1, angle: 0, imageTop: sys.windowHeight / 2, imageLeft: sys.windowWidth / 2 });
+    },
+    /**
+     * 图片加载完成
+     */
+    imageLoad() {
+      this.imageReset();
+      wx.hideLoading();
+      eventUtil.emit(this, 'linimageload', detail);
+    },
+    /**
+     * 计算图片尺寸
+     */
+    imgComputeSize(width, height) {
+      const { imageWidth, imageHeight } = calcImageSize(width, height, this.data);
+      this.setData({ imageWidth, imageHeight });
+    },
+    /**
+     * 图片边缘检测-缩放
+     */
+    imgMarginDetectionScale(scale) {
+      if (!this.properties.limitMove) return;
+      const currentScale = calcImageScale(this.data, scale);
+      this.imgMarginDetectionPosition(currentScale);
+    },
+    /**
+     * 图片边缘检测-位置
+     */
+    imgMarginDetectionPosition(scale) {
+      if (!this.properties.limitMove) return;
+      const { scale: currentScale, left, top } = calcImageOffset(this.data, scale);
+      dataUtil.setDiffData(this, { imageLeft: left, imageTop: top, scale: currentScale });
+    },
+    /**
+     * 开始图片触摸
+     */
+    imageTouchStart(e) {
+      this.setData({ _flagEndTouch: false });
+      const { imageLeft, imageTop } = this.data;
+      // 双指左指坐标
+      const clientXForLeft = e.touches[0].clientX;
+      const clientYForLeft = e.touches[0].clientY;
+
+      let _touchRelative = [];
+      if (e.touches.length === 1) {
+        // 单指拖动
+        _touchRelative[0] = {
+          x: clientXForLeft - imageLeft,
+          y: clientYForLeft - imageTop
+        };
+        this.setData({ _touchRelative });
+      } else {
+        // 双指右指坐标
+        const clientXForRight = e.touches[1].clientX;
+        const clientYForRight = e.touches[1].clientY;
+        // 双指放大
+        let width = Math.abs(clientXForLeft - clientXForRight);
+        let height = Math.abs(clientYForLeft - clientYForRight);
+        // 勾股定理求出斜边长度
+        const _hypotenuseLength = calcPythagoreanTheorem(width, height);
+
+        _touchRelative = [{
+          x: clientXForLeft - imageLeft,
+          y: clientYForLeft - imageTop
+        },
+        {
+          x: clientXForRight - imageLeft,
+          y: clientYForRight - imageTop
+        }
+        ];
+        this.setData({_touchRelative, _hypotenuseLength});
+      }
+    },
+    /**
+     * 图片放大旋转等操作
+     */
+    imageTouchMove(e) {
+      const {
+        _flagEndTouch,
+        _MOVE_THROTTLE_FLAG
+      } = this.data;
+      if (_flagEndTouch || !_MOVE_THROTTLE_FLAG) return;
+      // 双指左指坐标
+      const clientXForLeft = e.touches[0].clientX;
+      const clientYForLeft = e.touches[0].clientY;
+
+      dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: false });
+      this.moveThrottle();
+      this.moveDuring();
+      if (e.touches.length === 1) {
+        //单指拖动
+        const { left, top } = imageTouchMoveOfCalcOffset(this.data, clientXForLeft, clientYForLeft);
+        dataUtil.setDiffData(this, { imageLeft: left, imageTop: top});
+        // 图像边缘检测,防止截取到空白
+        this.imgMarginDetectionPosition();
+      } else {
+        // 双指右指坐标
+        const clientXForRight = e.touches[1].clientX;
+        const clientYForRight = e.touches[1].clientY;
+        // 双指放大
+        let width = Math.abs(clientXForLeft - clientXForRight),
+          height = Math.abs(clientYForLeft - clientYForRight),
+          // 勾股定理求出斜边长度
+          hypotenuse = calcPythagoreanTheorem(width, height), // 斜边
+          scale = this.data.scale * (hypotenuse / this.data._hypotenuseLength);
+        // 计算出真实缩放倍率
+        // 如果禁止缩放则倍率一直为1
+        if (this.properties.disableScale) {
+          scale = 1;
+        } else {
+          scale = scale <= this.properties.minRatio ? this.properties.minRatio : scale;
+          scale = scale >= this.properties.maxRatio ? this.properties.maxRatio : scale;
+          eventUtil.emit(this, 'linsizechange', {
+            imageWidth: this.data.imageWidth * scale,
+            imageHeight: this.data.imageHeight * scale
+          });
+        }
+
+        this.imgMarginDetectionScale(scale);
+        dataUtil.setDiffData(this, {
+          _hypotenuseLength: Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+          scale
+        });
+      }
+    },
+    /**
+     * 图片手指触摸结束
+     */
+    imageTouchEnd() {
+      dataUtil.setDiffData(this, { _flagEndTouch: true });
+      this.moveStop();
+    },
+
+    /**
+     * 检测剪裁框位置是否在允许的范围内(屏幕内)
+     */
+    cutDetectionPosition() {
+      const { cutX, cutY, _SYS_INFO, clipHeight, clipWidth } = this.data;
+      let cutDetectionPositionTop = () => {
+          //检测上边距是否在范围内
+          if (cutY < 0) {
+            dataUtil.setDiffData(this, { cutY: 0 });
+          }
+          if (cutY > _SYS_INFO.windowHeight - clipHeight) {
+            dataUtil.setDiffData(this, { cutY: _SYS_INFO.windowHeight - clipHeight });
+          }
+        },
+        cutDetectionPositionLeft = () => {
+          //检测左边距是否在范围内
+          if (cutX < 0) {
+            dataUtil.setDiffData(this, { cutX: 0 });
+          }
+          if (cutX > _SYS_INFO.windowWidth - clipWidth) {
+            dataUtil.setDiffData(this, { cutX: _SYS_INFO.windowWidth - clipWidth });
+          }
+        };
+      //裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+      if (cutY === null && cutX === null) {
+        let newCutY = (_SYS_INFO.windowHeight - clipHeight) * 0.5;
+        let newCutX = (_SYS_INFO.windowWidth - clipWidth) * 0.5;
+        dataUtil.setDiffData(this, {
+          cutX: newCutX, // 截取的框上边距
+          cutY: newCutY // 截取的框左边距
+        });
+      } else if (cutY !== null && cutX !== null) {
+        cutDetectionPositionTop();
+        cutDetectionPositionLeft();
+      } else if (cutY !== null && cutX === null) {
+        cutDetectionPositionTop();
+        dataUtil.setDiffData(this, { cutX: (_SYS_INFO.windowWidth - clipWidth) / 2 });
+      } else if (cutY === null && cutX !== null) {
+        cutDetectionPositionLeft();
+        dataUtil.setDiffData(this, { cutY: (_SYS_INFO.windowHeight - clipHeight) / 2 });
+      }
+    },
+    /**
+     * 改变截取框大小
+     */
+    computeCutSize() {
+      const { clipHeight, clipWidth, _SYS_INFO, cutX, cutY } = this.data;
+      if (clipWidth > _SYS_INFO.windowWidth) {
+        // 设置裁剪框宽度
+        dataUtil.setDiffData(this, { clipWidth: _SYS_INFO.windowWidth });
+      } else if (clipWidth + cutX > _SYS_INFO.windowWidth) {
+        dataUtil.setDiffData(this, { cutX: _SYS_INFO.windowWidth - cutX });
+      }
+      if (clipHeight > _SYS_INFO.windowHeight) {
+        // 设置裁剪框高度
+        dataUtil.setDiffData(this, { clipHeight: _SYS_INFO.windowHeight });
+      } else if (clipHeight + cutY > _SYS_INFO.windowHeight) {
+        dataUtil.setDiffData(this, { cutY: _SYS_INFO.windowHeight - cutY });
+      }
+    },
+    /**
+     * 获取图片数据
+     */
+    getImageData() {
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+      wx.showLoading({
+        title: '加载中'
+      });
+
+      const { clipHeight, clipWidth, _ctx, scale, imageLeft, imageTop, cutX, cutY, angle } = this.data;
+      let { CANVAS_HEIGHT, CANVAS_WIDTH } = this.data;
+      const { scaleRatio, imageUrl, quality, type: imageType } = this.properties;
+      // 绘制函数
+      const draw = () => {
+        // 图片真实大小
+        const imageWidth = this.data.imageWidth * scale * scaleRatio;
+        const imageHeight = this.data.imageHeight * scale * scaleRatio;
+        // canvas和图片的相对距离
+        const xpos = imageLeft - cutX;
+        const ypos = imageTop - cutY;
+        // 旋转画布
+        _ctx.translate(xpos * scaleRatio, ypos * scaleRatio);
+        _ctx.rotate((angle * Math.PI) / 180);
+        _ctx.drawImage(imageUrl, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
+        _ctx.draw(false, () => {
+          let params = {
+            width: clipWidth * scaleRatio,
+            height: Math.round(clipHeight * scaleRatio),
+            destWidth: clipWidth * scaleRatio,
+            destHeight: Math.round(clipHeight) * scaleRatio,
+            fileType: 'png',
+            quality
+          };
+
+          let data = {
+            url: '',
+            base64: '',
+            width: clipWidth * scaleRatio,
+            height: clipHeight * scaleRatio
+          };
+
+          if (IMAGE_TYPE.base64 === imageType) {
+            wx.canvasGetImageData({
+              canvasId: 'image-clipper',
+              x: 0,
+              y: 0,
+              width: clipWidth * scaleRatio,
+              height: Math.round(clipHeight * scaleRatio),
+              success: res => {
+                const arrayBuffer = new Uint8Array(res.data);
+                const base64 = wx.arrayBufferToBase64(arrayBuffer);
+                data.url = base64;
+                data.base64 = base64;
+                wx.hideLoading();
+                eventUtil.emit(this, 'linclip', data);
+              }
+            });
+          } else {
+            wx.canvasToTempFilePath({
+              ...params,
+              canvasId: 'image-clipper',
+              success: res => {
+                data.url = res.tempFilePath;
+                data.base64 = res.tempFilePath;
+                wx.hideLoading();
+                eventUtil.emit(this, 'linclip', data);
+              },
+              fail(res) {
+                throw res;
+              }
+            },
+            this
+            );
+          }
+        });
+      };
+
+      if (CANVAS_WIDTH !== clipWidth || CANVAS_HEIGHT !== clipHeight) {
+        CANVAS_WIDTH = clipWidth;
+        CANVAS_HEIGHT = clipHeight;
+        _ctx.draw();
+        setTimeout(() => {
+          draw();
+        }, 100);
+      } else {
+        draw();
+      }
+    },
+    /**
+     * 上传图片
+     */
+    uploadImage() {
+      wx.chooseImage({
+        count: 1,
+        sizeType: ['original', 'compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          const tempFilePaths = res.tempFilePaths;
+          this.setData({ imageUrl: tempFilePaths });
+        }
+      });
+    },
+    /**
+     * 工具栏旋转
+     */
+    rotate(event) {
+      if (this.properties.disableRotate) return;
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+      const { rotateAngle } = this.properties;
+      const originAngle = this.data.angle;
+      const type = event.currentTarget.dataset.type;
+      if (type === 'along') {
+        this.setData({  angle: originAngle + rotateAngle });
+      } else {
+        this.setData({ angle: originAngle - rotateAngle});
+      }
+      eventUtil.emit(this, 'linrotate', { currentDeg: this.data.angle });
+    },
+    /**
+     * 关闭
+     */
+    close() {
+      this.setData({ show: false });
+    },
+  },
+
+  /**
+   * 组件的生命周期
+   */
+  lifetimes: {
+    ready() {
+      const _SYS_INFO = wx.getSystemInfoSync();
+      this.setData({ _SYS_INFO });
+      this.setCutInfo();
+      this.setCutCenter();
+      this.computeCutSize();
+      this.cutDetectionPosition();
+    }
+  }
+});
diff --git a/examples/dist/image-clipper/index.json b/examples/dist/image-clipper/index.json
new file mode 100644
index 00000000..e8cfaaf8
--- /dev/null
+++ b/examples/dist/image-clipper/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/examples/dist/image-clipper/index.wxml b/examples/dist/image-clipper/index.wxml
new file mode 100644
index 00000000..7bc12fd6
--- /dev/null
+++ b/examples/dist/image-clipper/index.wxml
@@ -0,0 +1,68 @@
+<view wx:if="{{show}}">
+    <view class="container l-class" catchtouchmove="{{true}}" style="z-index: {{zIndex}};">
+        <!-- 图片裁剪容器 -->
+        <view class="clip-wrapper" bind:touchstart="clipTouchStart" bind:touchmove="clipTouchMove" bind:touchend="clipTouchEnd">
+            <!-- 裁剪区域容器 -->
+            <!-- 分为三部分top、middle、footer，采用flex布局 -->
+            <!-- top：裁剪容器顶部占位区域 -->
+            <!-- middle：裁剪框所在区域 -->
+            <!-- footer：裁剪容器底部占位区域 -->
+            <!-- top、middle区域高度需计算，footer区域自适应 -->
+            <view class="clip-content">
+                <view class="clip-content-top bg-transparent" style="height: {{cutY}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                <view class="clip-content-middle" style="height: {{clipHeight}}px;">
+                    <!-- 此容器为裁剪框所在容器 -->
+                    <!-- 分为三部分left、center、right，采用flex布局 -->
+                    <!-- left：裁剪框左侧占位区域 -->
+                    <!-- center：裁剪框所在区域 -->
+                    <!-- right：裁剪框右侧占位区域 -->
+                    <!-- left、right需根据center区域的宽度而改变宽度 -->
+                    <view class="clip-content-middle-left bg-transparent" style="width: {{cutX}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                    <view class="clip-content-middle-center" style="width: {{clipWidth}}px;height: {{clipHeight}}px;transition-property: {{cutAnimation ? '' : 'background'}}">
+                        <view 
+                            class="clip-edge clip-edge-{{index < 2 ? 'top' : 'bottom'}}-{{index === 0 || index === 2 ? 'left' : 'right'}}" 
+                            wx:for="{{4}}" 
+                            wx:for-index="index" 
+                            wx:key="index" 
+                            style="left: {{index === 0 || index === 2 ? 0 : 'auto'}};right: {{index === 1 || index === 3 ? 0 : 'auto'}};top: {{index < 2 ? 0 : 'auto'}};bottom: {{index > 1 ? 0 : 'auto'}}"
+                        ></view>
+                    </view>
+                    <view class="clip-content-middle-right flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                </view>
+                <view class="clip-content-footer flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+            </view>
+        </view>
+        <!-- 图片容器 -->
+        <image 
+            class="cropper-image" 
+            binderror="imageLoad" 
+            bindload="imageLoad"
+            bind:touchstart="imageTouchStart"
+            bind:touchmove="imageTouchMove"
+            bind:touchend="imageTouchEnd"
+            src="{{imageUrl}}" 
+            mode="widthFix" 
+            wx:if="{{imageUrl}}" 
+            style="width: {{imageWidth ? imageWidth + 'px' : 'auto'}};height: {{imageHeight ? imageHeight + 'px' : 'auto'}};transform: translate3d({{imageLeft - imageWidth / 2}}px, {{imageTop - imageHeight / 2}}px,0) scale({{scale}}) rotate({{angle}}deg); transition-duration: {{cutAnimation ? 0.35 : 0}}s;" 
+        />
+        <!-- 图片绘制容器 -->
+        <canvas
+            canvas-id="image-clipper"
+            id="image-clipper"
+            :disable-scroll="true"
+            style="width: {{CANVAS_WIDTH * scaleRatio}}px; height:{{CANVAS_HEIGHT * scaleRatio}}px;"
+            class="clipper-canvas"
+        ></canvas>
+        <!-- 底部工具栏容器 -->
+        <view class="footer-tools">
+            <view class="tools-icon">
+                <image src="{{checkImageIcon}}" mut-bind:tap="uploadImage" wx:if="{{checkImage}}" />
+                <image src="{{rotateAlongIcon}}" mut-bind:tap="rotate" data-type="along" wx:if="{{rotateAlong}}" />
+                <image src="{{rotateInverseIcon}}" mut-bind:tap="rotate" data-type="inverse" wx:if="{{rotateInverse}}" />
+                <image src="{{sureIcon}}" mut-bind:tap="getImageData" wx:if="{{sure}}" />
+                <image src="{{closeIcon}}" mut-bind:tap="close" wx:if="{{close}}" />
+            </view>
+            <slot></slot>
+        </view>
+    </view>
+</view>
\ No newline at end of file
diff --git a/examples/dist/image-clipper/index.wxss b/examples/dist/image-clipper/index.wxss
new file mode 100644
index 00000000..cf1b26bc
--- /dev/null
+++ b/examples/dist/image-clipper/index.wxss
@@ -0,0 +1 @@
+.container{width:100vw;height:100vh;background-color:rgba(0,0,0,.6);position:fixed;top:0;left:0;z-index:1}.container .clip-wrapper{position:absolute;width:100vw;height:100vh}.container .clip-wrapper .clip-content{width:100vw;height:100vh;position:absolute;z-index:99;display:flex;flex-direction:column;pointer-events:none}.container .clip-wrapper .clip-content .flex-auto{flex:auto}.container .clip-wrapper .clip-content .clip-content-footer,.container .clip-wrapper .clip-content .clip-content-top{width:100%;pointer-events:none}.container .clip-wrapper .clip-content .clip-content-middle{width:100%;height:400rpx;display:flex;box-sizing:border-box}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-left,.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-right{height:100%}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center{position:relative;border:1px solid;box-sizing:border-box}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge{position:absolute;left:6rpx;width:34rpx;height:34rpx;border:2rpx solid #fff;pointer-events:auto;box-sizing:border-box}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-top-left{border-bottom-width:0!important;border-right-width:0!important}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-top-right{border-bottom-width:0!important;border-left-width:0!important}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-bottom-left{border-top-width:0!important;border-right-width:0!important}.container .clip-wrapper .clip-content .clip-content-middle .clip-content-middle-center .clip-edge.clip-edge-bottom-right{border-top-width:0!important;border-left-width:0!important}.container .clip-wrapper .bg-transparent{background-color:rgba(0,0,0,.6);transition-duration:.35s}.container .cropper-image{width:100%;border-style:none;position:absolute;top:0;left:0;z-index:2;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center}.container .clipper-canvas{position:fixed;z-index:10;left:-2000px;top:-2000px;pointer-events:none}.container .footer-tools{position:absolute;left:0;bottom:0;width:100%;z-index:99}.container .footer-tools .tools-icon{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20rpx 40rpx;box-sizing:border-box}.container .footer-tools .tools-icon image{display:block;width:50rpx;height:50rpx}
\ No newline at end of file
diff --git a/examples/dist/input/index.wxml b/examples/dist/input/index.wxml
index 0e1070d8..e29a7053 100644
--- a/examples/dist/input/index.wxml
+++ b/examples/dist/input/index.wxml
@@ -28,7 +28,7 @@
     bindblur="handleInputBlur"
     bindconfirm="handleInputConfirm" />
   <l-icon wx:if="{{showEye&&value}}" name="eye" catch:tap="onTapEyeIcon" size="40" l-class="l-eye l-eye-{{type}}"/>
-  <view class="close" wx:if="{{clear&&value}}" bindtap="onClearTap">
+  <view class="close" wx:if="{{clear&&value}}" mut-bind:tap="onClearTap">
     <view  class="close-icon">
       <l-icon  name="close" color="#fff" size="16" />
     </view>
diff --git a/examples/dist/list/index.wxml b/examples/dist/list/index.wxml
index 47600180..d4127b71 100644
--- a/examples/dist/list/index.wxml
+++ b/examples/dist/list/index.wxml
@@ -1,4 +1,4 @@
-<view class="l-list l-class" hover-class="{{isHover?'l-list-hover':''}}" hover-start-time="20" hover-stay-time="50"  style="{{gap?'padding:0 '+gap+'rpx;':''}} {{leftGap?'padding-left:'+leftGap+'rpx':''}} {{rightGap?'padding-right:'+rightGap+'rpx':''}}" bind:tap="tapcell" data-url="{{url}}" data-link-type="{{linkType}}">
+<view class="l-list l-class" hover-class="{{isHover?'l-list-hover':''}}" hover-start-time="20" hover-stay-time="50"  style="{{gap?'padding:0 '+gap+'rpx;':''}} {{leftGap?'padding-left:'+leftGap+'rpx':''}} {{rightGap?'padding-right:'+rightGap+'rpx':''}}" mut-bind:tap="tapcell" data-url="{{url}}" data-link-type="{{linkType}}">
     <!-- left -->
     <l-badge wx:if="{{(badgeCount > 0 || dotBadge ) && badgePosition ==='left'}}" value="{{badgeCount}}" dot="{{dotBadge}}" max-count="{{badgeMaxCount}}" number-type="{{badgeCountType}}">
         <template is="cell-left-main" data="{{image,icon,title,desc,tagContent,tagPosition,tagColor,tagShape,tagPlain,iconSize,iconColor}}" />
diff --git a/examples/dist/loadmore/index.wxml b/examples/dist/loadmore/index.wxml
index a2c99c1f..05137d68 100644
--- a/examples/dist/loadmore/index.wxml
+++ b/examples/dist/loadmore/index.wxml
@@ -1,6 +1,6 @@
 <!-- 内容插槽 -->
 <slot name="content" />
-<view bindtap="onLoadmore" wx:if="{{show}}">
+<view mut-bind:tap="onLoadmore" wx:if="{{show}}">
   <view wx:if="{{custom && type==='end'}}">
     <slot name="end" />
   </view>
diff --git a/examples/dist/notice-bar/index.wxml b/examples/dist/notice-bar/index.wxml
index 667a2a28..107e6d20 100644
--- a/examples/dist/notice-bar/index.wxml
+++ b/examples/dist/notice-bar/index.wxml
@@ -2,16 +2,16 @@
   <l-icon wx:if="{{ frontIconName }}" size="{{frontIconSize}}" color="{{frontIconColor}}" name="{{ frontIconName }}" class="l-noticebar-icon" l-class="l-icon-class" />
   <swiper autoplay vertical interval="{{4*speed}}" class="l-noticebar-content-wrap" wx:if="{{type=='swip'}}">
     <block wx:for="{{swipArr}}" wx:key="swip">
-      <swiper-item data-index="{{index}}" bindtap="onSwip">
+      <swiper-item data-index="{{index}}" mut-bind:tap="onSwip">
         {{item}}
       </swiper-item>
     </block>
   </swiper>
   <view class="l-noticebar-content-wrap l-noticebar-content-wrap-view" wx:else>
-    <view class="l-noticebar-content"  bindtap="handleTap" animation="{{ animationData }}">
+    <view class="l-noticebar-content"  mut-bind:tap="handleTap" animation="{{ animationData }}">
       <slot></slot>
     </view>
   </view>
-  <l-icon wx:if="{{ endIconName && !close }}" size="{{endIconSize}}" color="{{endIconColor}}" class="l-noticebar-operation" name="{{ endIconName }}" bindtap="onIconTap"  />
-  <l-icon wx:if="{{close}}" class="l-noticebar-operation" name="close" size="{{endIconSize}}" color="{{endIconColor}}" bindtap="onClose"/>
+  <l-icon wx:if="{{ endIconName && !close }}" size="{{endIconSize}}" color="{{endIconColor}}" class="l-noticebar-operation" name="{{ endIconName }}" mut-bind:tap="onIconTap"  />
+  <l-icon wx:if="{{close}}" class="l-noticebar-operation" name="close" size="{{endIconSize}}" color="{{endIconColor}}" mut-bind:tap="onClose"/>
 </view>
diff --git a/examples/dist/radio/index.wxml b/examples/dist/radio/index.wxml
index d3d60156..0deb03e4 100644
--- a/examples/dist/radio/index.wxml
+++ b/examples/dist/radio/index.wxml
@@ -1,4 +1,4 @@
-<view bind:tap="onRadioChangeTap" 
+<view mut-bind:tap="onRadioChangeTap"
       class="label label-{{placement}} {{disabled?'label-disabled l-disabled-class':'l-class'}}">
         <view class="radio"
               style="color:{{checked?selectColor:(disabled?disabledColor:color)}};font-size:{{size}}">
@@ -6,4 +6,4 @@
             <view wx:else class="iconfont {{checked?'icon-select':'icon-unselect'}}"></view>
         </view>
         <slot/>
-</view>
\ No newline at end of file
+</view>
diff --git a/examples/dist/rate/index.wxml b/examples/dist/rate/index.wxml
index 0edcb153..a80300d9 100644
--- a/examples/dist/rate/index.wxml
+++ b/examples/dist/rate/index.wxml
@@ -1,5 +1,5 @@
 <view class="l-rate l-class">
-    <view wx:for="{{count}}" wx:key="item" class="l-rate-star" data-index="{{index}}" bindtap="handleClick">
+    <view wx:for="{{count}}" wx:key="item" class="l-rate-star" data-index="{{index}}" mut-bind:tap="handleClick">
         <view class="icon-checked" wx:if="{{score > index}}" hover-class="none" hover-stop-propagation="false" data-rate="{{score-index}}" style="width:{{score-index<1?(score-index)*100:100}}%">
             <image wx:if="{{activeImage &&  inActiveImage}}" class="image-item l-class-image l-image-class" src="{{activeImage}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
             <l-icon wx:else name="{{name}}" l-class="l-class-icon l-icon-class" size="{{size}}" color="{{activeColor}}" />
@@ -7,4 +7,4 @@
         <image wx:if="{{activeImage &&  inActiveImage}}" class="image-item l-class-image l-image-class" src="{{inActiveImage}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
         <l-icon wx:else name="{{name}}" l-class="l-class-icon l-icon-class" size="{{size}}" color="{{inActiveColor}}"></l-icon>
     </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/examples/dist/search-bar/index.wxml b/examples/dist/search-bar/index.wxml
index 2828862b..74b1155c 100644
--- a/examples/dist/search-bar/index.wxml
+++ b/examples/dist/search-bar/index.wxml
@@ -1,6 +1,6 @@
 <view class="search-bar l-container-class">
   <slot name="before"/>
-  <view wx:if="{{frontText}}" class="icon-container" bind:tap="handleTapFrontText">
+  <view wx:if="{{frontText}}" class="icon-container" mut-bind:tap="handleTapFrontText">
     <text class="city">{{frontText}}</text>
     <l-icon name="down" color="#333" size="22" />
   </view>
@@ -23,7 +23,7 @@
         bindfocus="handleInputFocus"
         bindblur="handleInputBlur"
         bindconfirm="handleInputConfirm"/>
-    <view class="close-wrap" wx:if="{{clear&&value}}" bindtap="onClearTap">
+    <view class="close-wrap" wx:if="{{clear&&value}}" mut-bind:tap="onClearTap">
         <view class="close">
             <l-icon  name="close" color="#fff" size="15" />
         </view>
@@ -31,7 +31,7 @@
   </view>
   <view wx:if="{{showCancel}}"
         class="cancel l-cancel-class"
-        bindtap="onCancel">
+        mut-bind:tap="onCancel">
         {{cancelText}}
   </view>
   <slot name="after"/>
diff --git a/examples/dist/segment/index.wxml b/examples/dist/segment/index.wxml
index 74240e79..6c03fef3 100644
--- a/examples/dist/segment/index.wxml
+++ b/examples/dist/segment/index.wxml
@@ -5,14 +5,14 @@
         <view class="l-tabs-header {{( even && equalWidth)?'l-tabs-equal-header':'l-tabs-unequal-header'}}">
             <block wx:for="{{tabList}}" wx:key="key">
                 <view wx:if="{{item.tab}}" class="l-tabs-item {{( even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}"
-                    style="color:{{item.key===activeKey?activeColor:inactiveColor}};{{itemWidth?'width:'+ itemWidth +'rpx':'' }};{{itemHeight?'height:'+itemHeight+'rpx':''}}" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
+                    style="color:{{item.key===activeKey?activeColor:inactiveColor}};{{itemWidth?'width:'+ itemWidth +'rpx':'' }};{{itemHeight?'height:'+itemHeight+'rpx':''}}" data-key="{{item.key}}" data-index="{{index}}" mut-bind:tap="handleChange">
                     <l-badge l-self-class="badge-view" l-class="l-class-badge l-badge-class" wx:if="{{(item.badgeCount > 0 || item.dotBadge )}}" value="{{item.badgeCount}}" dot="{{item.dotBadge}}" max-count="{{item.badgeMaxCount}}" number-type="{{item.badgeCountType}}">
                         <template is="tab-item" data="{{item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine}}" />
                     </l-badge>
                     <template is="tab-item" data="{{item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine}}" wx:else />
                     <view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
                 </view>
-                <view wx:else class="l-tabs-item {{(even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
+                <view wx:else class="l-tabs-item {{(even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" data-key="{{item.key}}" data-index="{{index}}" mut-bind:tap="handleChange">
                     <slot name="{{item.key}}"></slot>
                     <view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
                 </view>
diff --git a/examples/dist/slide-view/index.wxml b/examples/dist/slide-view/index.wxml
index c0bc342f..ec640abf 100644
--- a/examples/dist/slide-view/index.wxml
+++ b/examples/dist/slide-view/index.wxml
@@ -17,8 +17,8 @@
     <view class="left"  style="width: {{width}}rpx; height: {{height}}rpx;">
       <slot name="left"></slot>
     </view>
-    <view class="right" bindtap="onRightTap" style="width: {{slideWidth}}rpx; height: {{height}}rpx;">
+    <view class="right" mut-bind:tap="onRightTap" style="width: {{slideWidth}}rpx; height: {{height}}rpx;">
       <slot name="right"></slot>
     </view>
   </movable-view>
-</movable-area>
\ No newline at end of file
+</movable-area>
diff --git a/examples/dist/status-show/index.wxml b/examples/dist/status-show/index.wxml
index 90fabf57..deecf395 100644
--- a/examples/dist/status-show/index.wxml
+++ b/examples/dist/status-show/index.wxml
@@ -1,4 +1,4 @@
-<view wx:if="{{show}}" class="l-status-container l-class {{fullScreen ? 'content': ''}}" style="{{'background:'+bgColor}};{{fullScreen ?'align-items:center;':''}}" bind:tap="tapStatusShow">
+<view wx:if="{{show}}" class="l-status-container l-class {{fullScreen ? 'content': ''}}" style="{{'background:'+bgColor}};{{fullScreen ?'align-items:center;':''}}" mut-bind:tap="tapStatusShow">
   <block wx:if="{{custom}}">
     <slot />
   </block>
@@ -17,4 +17,4 @@
       <view>去逛逛</view>
     </l-button>
   </block>
-</view>
\ No newline at end of file
+</view>
diff --git a/examples/dist/tabs/index.wxml b/examples/dist/tabs/index.wxml
index 44fce1f5..5f290b23 100644
--- a/examples/dist/tabs/index.wxml
+++ b/examples/dist/tabs/index.wxml
@@ -16,11 +16,11 @@
         wx:key="key"
         data-key="{{item.key}}"
         data-index="{{index}}"
-        bind:tap="handleChange">
+        mut-bind:tap="handleChange">
         <image wx:if="{{ item.image.activeImage || item.image.defaultImage }}"
                src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}"
                class="l-tab-image l-class-tabimage l-tabimage-class"/>
-        <l-icon wx:if="{{item.icon}}" 
+        <l-icon wx:if="{{item.icon}}"
                 l-class="l-class-icon l-icon-class {{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}"
                 name="{{item.icon}}"
                 color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
diff --git a/examples/dist/tag/index.wxml b/examples/dist/tag/index.wxml
index 1f9d79af..011c7b68 100644
--- a/examples/dist/tag/index.wxml
+++ b/examples/dist/tag/index.wxml
@@ -1,6 +1,6 @@
 <view style="display:flex">
   <view class="l-tag {{type==='touch'?'l-tag-touch':''}} {{plain?'l-tag-plain-'+ size:'l-tag-'+size}} {{disable?'l-tag-disable':''}} {{select?'select l-select-class':'l-class'}} {{plain?'l-tag-plain':''}}  {{'l-tag-'+size+'-'+ shape}}" style="{{height?'line-height:'+height+'rpx;height:'+height+'rpx;':''}}{{plain?'color:'+fontColor+';border-color:'+fontColor:'background-color:'+bgColor+';color:'+fontColor}}"
-    bindtap="handleTap">
+    mut-bind:tap="handleTap">
     <view class="{{location==='left'?'content':'content-l'}}" style="{{iconName?'line-height:0':''}}">
       <l-icon wx:if="{{icon}}" style="{{location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" name="{{icon}}" size="{{iconSize}}" color="{{iconColor}}" />
       <image style="{{location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" wx:if="{{image}}" src="{{image}}" class="{{'tag-image-'+size}} l-image-class"></image>
diff --git a/examples/pages/components/form/pages/image-clipper/clipper-nav.js b/examples/pages/components/form/pages/image-clipper/clipper-nav.js
new file mode 100644
index 00000000..8852c8ce
--- /dev/null
+++ b/examples/pages/components/form/pages/image-clipper/clipper-nav.js
@@ -0,0 +1,144 @@
+const clipperNaviConfigs = [{
+  title: '基本案例',
+  type: 0,
+  config: {
+    show: false,
+    zIndex: 99,
+    imageUrl: '',
+    type: 'url',
+    quality: 1,
+    width: 400,
+    height: 400,
+    minWidth: 200,
+    maxWidth: 600,
+    minHeight: 200,
+    maxHeight: 600,
+    lockWidth: false,
+    lockHeight: false,
+    lockRatio: true,
+    scaleRatio: 1,
+    minRatio: 0.5,
+    maxRatio: 2,
+    disableScale: false,
+    disableRotate: false,
+    limitMove: false,
+    resultImageUrl: '',
+    checkImage: true,
+    checkImageIcon: './images/photo.png',
+    rotateAlong: true,
+    rotateAlongIcon: './images/rotate-along.png',
+    rotateInverse: true,
+    rotateInverseIcon: './images/rotate-inverse.png',
+    sure: true,
+    sureIcon: './images/sure.png',
+    close: true,
+    closeIcon: './images/close.png',
+  },
+  toolsConfig: {
+    zIndex: 999,
+    rotateAngle: 90,
+    lockWidth: false,
+    lockHeight: false,
+    lockRatio: false,
+    disableScale: false,
+    disableRotate: false,
+    limitMove: false
+  }
+},
+{
+  title: '页面选择图片',
+  type: 1,
+  config: {
+    show: false,
+    zIndex: 99,
+    imageUrl: '',
+    type: 'url',
+    quality: 1,
+    width: 400,
+    height: 400,
+    minWidth: 200,
+    maxWidth: 600,
+    minHeight: 200,
+    maxHeight: 600,
+    lockWidth: false,
+    lockHeight: false,
+    lockRatio: false,
+    scaleRatio: 1,
+    minRatio: 0.5,
+    maxRatio: 2,
+    disableScale: false,
+    disableRotate: false,
+    limitMove: false,
+    resultImageUrl: '',
+    checkImage: true,
+    checkImageIcon: './images/photo.png',
+    rotateAlong: true,
+    rotateAlongIcon: './images/rotate-along.png',
+    rotateInverse: true,
+    rotateInverseIcon: './images/rotate-inverse.png',
+    sure: true,
+    sureIcon: './images/sure.png',
+    close: true,
+    closeIcon: './images/close.png',
+  },
+  toolsConfig: {
+    zIndex: 999,
+    rotateAngle: 90,
+    lockWidth: false,
+    lockHeight: false,
+    lockRatio: false,
+    disableScale: false,
+    disableRotate: false,
+    limitMove: false
+  }
+},
+{
+  title: '自定义工具栏功能',
+  type: 2,
+  config: {
+    show: false,
+    zIndex: 99,
+    imageUrl: '',
+    type: 'url',
+    quality: 1,
+    width: 400,
+    height: 400,
+    minWidth: 200,
+    maxWidth: 600,
+    minHeight: 200,
+    maxHeight: 600,
+    lockWidth: false,
+    lockHeight: false,
+    lockRatio: true,
+    scaleRatio: 1,
+    minRatio: 0.5,
+    maxRatio: 2,
+    disableScale: false,
+    disableRotate: false,
+    limitMove: false,
+    resultImageUrl: '',
+    checkImage: true,
+    checkImageIcon: './images/photo.png',
+    rotateAlong: true,
+    rotateAlongIcon: './images/rotate-along.png',
+    rotateInverse: true,
+    rotateInverseIcon: './images/rotate-inverse.png',
+    sure: true,
+    sureIcon: './images/sure.png',
+    close: true,
+    closeIcon: './images/close.png',
+  },
+  toolsConfig: {
+    zIndex: 999,
+    rotateAngle: 90,
+    lockWidth: true,
+    lockHeight: true,
+    lockRatio: true,
+    disableScale: true,
+    disableRotate: true,
+    limitMove: true
+  }
+}
+];
+
+export default clipperNaviConfigs;
diff --git a/examples/pages/components/form/pages/image-clipper/index.js b/examples/pages/components/form/pages/image-clipper/index.js
new file mode 100644
index 00000000..65348693
--- /dev/null
+++ b/examples/pages/components/form/pages/image-clipper/index.js
@@ -0,0 +1,69 @@
+import clipperNaviConfigs from './clipper-nav';
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    clipperNaviConfigs,
+    currentConfig: {},
+    toolsConfig: {},
+    currentIndex: 0
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function () {
+    const current = this.data.clipperNaviConfigs[this.data.currentIndex];
+    this.setData({
+      currentConfig: current.config,
+      toolsConfig: current.toolsConfig
+    });
+  },
+  linclip(event) {
+    let {
+      clipperNaviConfigs,
+      currentIndex
+    } = this.data;
+    clipperNaviConfigs[currentIndex].config.resultImageUrl = event.detail.url;
+    this.setData({
+      clipperNaviConfigs,
+      'currentConfig.show': false
+    });
+  },
+  upload(event) {
+    const currentIndex = event.currentTarget.dataset.index;
+    const current = this.data.clipperNaviConfigs[currentIndex];
+    let currentConfig = current.config;
+    let toolsConfig = current.toolsConfig;
+
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        // tempFilePath可以作为img标签的src属性显示图片
+        const tempFilePaths = res.tempFilePaths;
+        currentConfig.imageUrl = tempFilePaths;
+        currentConfig.show = true;
+        this.setData({
+          currentConfig,
+          toolsConfig,
+          currentIndex
+        });
+      }
+    });
+  },
+  showClipper(event) {
+    const currentIndex = event.currentTarget.dataset.index;
+    const current = this.data.clipperNaviConfigs[currentIndex];
+    let currentConfig = current.config;
+    let toolsConfig = current.toolsConfig;
+    currentConfig.show = true;
+    this.setData({
+      currentConfig,
+      currentIndex,
+      toolsConfig
+    });
+  },
+});
diff --git a/examples/pages/components/form/pages/image-clipper/index.json b/examples/pages/components/form/pages/image-clipper/index.json
new file mode 100644
index 00000000..17966d79
--- /dev/null
+++ b/examples/pages/components/form/pages/image-clipper/index.json
@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "l-image-clipper": "/dist/image-clipper/index",
+    "l-image-clipper-tools": "/dist/image-clipper-tools/index",
+    "l-card": "/dist/card/index"
+  }
+}
\ No newline at end of file
diff --git a/examples/pages/components/form/pages/image-clipper/index.wxml b/examples/pages/components/form/pages/image-clipper/index.wxml
new file mode 100644
index 00000000..a8f4b4f3
--- /dev/null
+++ b/examples/pages/components/form/pages/image-clipper/index.wxml
@@ -0,0 +1,55 @@
+<view class='container'>
+	<l-image-clipper 
+    show="{{currentConfig.show}}" 
+    image-url="{{currentConfig.imageUrl}}" 
+    z-index="{{currentConfig.zIndex}}" 
+    type="{{currentConfig.type}}" 
+    quality="{{currentConfig.quality}}" 
+    width="{{currentConfig.width}}" 
+    height="{{currentConfig.height}}" 
+    max-height="{{currentConfig.maxHeight}}" 
+    max-width="{{currentConfig.maxWidth}}" 
+    min-width="{{currentConfig.minWidth}}" 
+    min-height="{{currentConfig.minHeight}}" 
+    lock-width="{{currentConfig.lockWidth}}" 
+    lock-height="{{currentConfig.lockHeight}}" 
+    lock-ratio="{{currentConfig.lockRatio}}" 
+    scale-ratio="{{currentConfig.scaleRatio}}" 
+    min-ratio="{{currentConfig.minRatio}}" 
+    max-ratio="{{currentConfig.maxRatio}}" 
+    disable-scale="{{currentConfig.disableScale}}" 
+    disable-rotate="{{currentConfig.disableRotate}}" 
+    limit-move="{{currentConfig.limitMove}}"
+    check-image="{{currentConfig.checkImage}}" 
+    check-image-icon="{{currentConfig.checkImageIcon}}"
+    rotate-along="{{currentConfig.rotateAlong}}"
+    rotate-along-icon="{{currentConfig.rotateAlongIcon}}"
+    rotate-inverse="{{currentConfig.rotateInverse}}"
+    rotate-inverse-icon="{{currentConfig.rotateInverseIcon}}" 
+    sure="{{currentConfig.sure}}"
+    sure-icon="{{currentConfig.sureIcon}}"
+    close="{{currentConfig.close}}"
+    close-icon="{{currentConfig.closeIcon}}" 
+    bindlinclip="linclip"
+  >
+		<l-image-clipper-tools 
+      z-index="{{toolsConfig.zIndex}}" 
+      rotate-angle="{{toolsConfig.rotateAngle}}"
+      lock-width="{{toolsConfig.lockWidth}}" 
+      lock-height="{{toolsConfig.lockHeight}}" 
+      lock-ratio="{{toolsConfig.lockRatio}}" 
+      disable-scale="{{toolsConfig.disableScale}}" 
+      disable-rotate="{{toolsConfig.disableRotate}}" 
+      limit-move="{{toolsConfig.limitMove}}"
+    ></l-image-clipper-tools>
+	</l-image-clipper>
+	<content-title name="ImageClipper" describe="图片裁剪">
+		<content-card l-content="content" name="{{item.title}}" wx:for="{{clipperNaviConfigs}}" wx:for-item="item" wx:key="index">
+			<l-button bind:lintap="showClipper" size="large" data-index="{{index}}" wx:if="{{item.type === 0 || item.type === 2}}">显示组件</l-button>
+      <l-button bind:lintap="upload" size="large" data-index="{{index}}" wx:if="{{item.type === 1}}">选择图片</l-button>
+      <view class="image-wrapper">
+        <image src="{{item.config.resultImageUrl}}" wx:if="{{item.config.resultImageUrl}}" mode="widthFix"></image>
+      </view>
+		</content-card>
+	</content-title>
+</view>
\ No newline at end of file
diff --git a/examples/pages/components/form/pages/image-clipper/index.wxss b/examples/pages/components/form/pages/image-clipper/index.wxss
new file mode 100644
index 00000000..404127de
--- /dev/null
+++ b/examples/pages/components/form/pages/image-clipper/index.wxss
@@ -0,0 +1,14 @@
+
+.image-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+.image-wrapper image {
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/examples/pages/components/layout/pages/album/index.wxml b/examples/pages/components/layout/pages/album/index.wxml
index 2274a3a3..5e94b08d 100644
--- a/examples/pages/components/layout/pages/album/index.wxml
+++ b/examples/pages/components/layout/pages/album/index.wxml
@@ -18,7 +18,7 @@
                     <l-avatar class="avatar" size='80' shape="square" src="{{avatarUrl}}" />
                     <view class="right">
                         <view class="name">LinUI@27315</view>
-                        <l-album urls='{{urls5}}'></l-album>
+                        <l-album max-number='{{4}}' urls='{{urls5}}'  custom-row-number='{{false}}' preview-full-image='{{true}}'></l-album>
                     </view>
                 </view>
             </view>
@@ -33,7 +33,7 @@
                     </view>
                 </view>
             </view>
-            <view>
+            <view style="margin-top:20rpx">
                 <view class="album">
                     <l-avatar class="avatar" size='80' shape="square" src="{{avatarUrl}}" />
                     <view class="right">
@@ -60,7 +60,7 @@
                     <l-avatar class="avatar" size='80' shape="square" src="{{avatarUrl}}" />
                     <view class="right">
                         <view class="name">LinUI@27315</view>
-                        <l-album urls='{{urls4}}' key='newurl' gapRow='{{25}}' gapColumn='{{25}}'></l-album>
+                        <l-album urls='{{urls4}}' key='newurl' gap-row='{{25}}' gap-column='{{25}}' every-row-number="{{3}}"></l-album>
                     </view>
                 </view>
             </view>
diff --git a/examples/pages/components/layout/pages/album/index.wxss b/examples/pages/components/layout/pages/album/index.wxss
index 61344361..d489fccb 100644
--- a/examples/pages/components/layout/pages/album/index.wxss
+++ b/examples/pages/components/layout/pages/album/index.wxss
@@ -1,49 +1,57 @@
 /* pages/components/layout/pages/album/index.wxss */
 .num {
-    color: #fc6517;
-    font-size: 42rpx;
-    font-style: italic;
+  color: #fc6517;
+  font-size: 42rpx;
+  font-style: italic;
 }
 
 .text {
-    height: 30rpx;
-    font-size: 22rpx;
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    color: rgba(102, 102, 102, 1);
-    line-height: 30rpx;
-    margin-top: 9rpx;
+  height: 30rpx;
+  font-size: 22rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  color: rgba(102, 102, 102, 1);
+  line-height: 30rpx;
+  margin-top: 9rpx;
 }
 
 .album {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .avatar {
-    margin-left: 20rpx;
+  margin-left: 20rpx;
 }
 
 .right {
-    margin-left: 20rpx;
+  margin-left: 20rpx;
 }
 
 .name {
-    color: rgb(91, 108, 160);
-    font-weight: 450;
+  color: rgb(91, 108, 160);
+  font-weight: 450;
+  margin-bottom: 20rpx;
 }
 
 .content {
-    margin-top: 7rpx;
-    margin-right: 10rpx;
-    color: black;
-    font-weight: 445;
-    margin-bottom: 15rpx;
+  margin-top: 7rpx;
+  margin-right: 10rpx;
+  color: black;
+  font-weight: 445;
+  margin-bottom: 15rpx;
 }
 
 .line {
-    height: 1px;
-    border-top: solid Silver 1px;
-    /* margin-bottom: 40rpx; */
-    margin-top: 30rpx;
-}
\ No newline at end of file
+  height: 1px;
+  border-top: solid Silver 1px;
+  /* margin-bottom: 40rpx; */
+  margin-top: 30rpx;
+}
+
+.parent {
+  display: inline-grid;
+  grid-template-columns: repeat(2, 158rpx);
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+}
diff --git a/examples/pages/components/shopping/pages/count-selector/index.wxml b/examples/pages/components/shopping/pages/count-selector/index.wxml
deleted file mode 100644
index d7421f16..00000000
--- a/examples/pages/components/shopping/pages/count-selector/index.wxml
+++ /dev/null
@@ -1,5 +0,0 @@
-<content-title name="CountSelector" describe="数量选择器">
-  <content-card name="{{item.title}}" wx:for="{{countConfig}}" wx:key="item">
-    <l-count-selector l-class="count" wx:for="{{item.config}}" wx:for-item="count" wx:key="count" min="{{count.min}}" count="{{count.count}}" max="{{count.max}}" step="{{count.step}}" disabled="{{count.disabled}}" bind:linout="onOut"/>
-  </content-card>
-</content-title>
diff --git a/examples/pages/components/shopping/pages/count-selector/count-nav.js b/examples/pages/components/shopping/pages/counter/count-nav.js
similarity index 100%
rename from examples/pages/components/shopping/pages/count-selector/count-nav.js
rename to examples/pages/components/shopping/pages/counter/count-nav.js
diff --git a/examples/pages/components/shopping/pages/count-selector/index.js b/examples/pages/components/shopping/pages/counter/index.js
similarity index 94%
rename from examples/pages/components/shopping/pages/count-selector/index.js
rename to examples/pages/components/shopping/pages/counter/index.js
index 2e4d28a7..97327303 100644
--- a/examples/pages/components/shopping/pages/count-selector/index.js
+++ b/examples/pages/components/shopping/pages/counter/index.js
@@ -1,5 +1,5 @@
 // pages/shopping/pages/count/index.js
-import countConfig from '../count-selector/count-nav.js';
+import countConfig from './count-nav.js';
 
 Page({
 
diff --git a/examples/pages/components/shopping/pages/count-selector/index.json b/examples/pages/components/shopping/pages/counter/index.json
similarity index 72%
rename from examples/pages/components/shopping/pages/count-selector/index.json
rename to examples/pages/components/shopping/pages/counter/index.json
index 614acaf4..ece83113 100644
--- a/examples/pages/components/shopping/pages/count-selector/index.json
+++ b/examples/pages/components/shopping/pages/counter/index.json
@@ -2,6 +2,6 @@
   "usingComponents": {
     "content-title": "/components/content-title/index",
     "content-card": "/components/content-card/index",
-    "l-count-selector": "/dist/count-selector/index"
+    "l-counter": "/dist/counter/index"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/pages/components/shopping/pages/counter/index.wxml b/examples/pages/components/shopping/pages/counter/index.wxml
new file mode 100644
index 00000000..e3714ffc
--- /dev/null
+++ b/examples/pages/components/shopping/pages/counter/index.wxml
@@ -0,0 +1,5 @@
+<content-title name="CountSelector" describe="数量选择器">
+  <content-card name="{{item.title}}" wx:for="{{countConfig}}" wx:key="item">
+    <l-counter l-class="count" wx:for="{{item.config}}" wx:for-item="count" wx:key="count" min="{{count.min}}" count="{{count.count}}" max="{{count.max}}" step="{{count.step}}" disabled="{{count.disabled}}" bind:linout="onOut"/>
+  </content-card>
+</content-title>
diff --git a/examples/pages/components/shopping/pages/count-selector/index.wxss b/examples/pages/components/shopping/pages/counter/index.wxss
similarity index 100%
rename from examples/pages/components/shopping/pages/count-selector/index.wxss
rename to examples/pages/components/shopping/pages/counter/index.wxss
diff --git a/examples/pages/navigator/content/config/animation-navi.js b/examples/pages/navigator/content/config/animation-navi.js
index d0c8088b..5f8050c1 100644
--- a/examples/pages/navigator/content/config/animation-navi.js
+++ b/examples/pages/navigator/content/config/animation-navi.js
@@ -1,7 +1,7 @@
 
 const animationNaviConfigs = [
   {
-    icon: '/images/component/icon.png',
+    icon: 'cloud://env-9eb476.656e-env-9eb476-1258886794/images/components/transition/transition-icon.png',
     title: 'Transition',
     desc: '过渡',
     componentsPath: '/pages/components/animation/pages/transition/index'
diff --git a/examples/pages/navigator/content/config/form-navi.js b/examples/pages/navigator/content/config/form-navi.js
index 8455b367..346f60ab 100644
--- a/examples/pages/navigator/content/config/form-navi.js
+++ b/examples/pages/navigator/content/config/form-navi.js
@@ -29,6 +29,12 @@ const formNaviConfigs = [
     desc: '图片选择器',
     componentsPath: '/pages/components/form/pages/image-picker/index'
   },
+  {
+    icon: '/images/component/progress.png',
+    title: 'ImageClipper',
+    desc: '图片裁剪',
+    componentsPath: '/pages/components/form/pages/image-clipper/index'
+  },
   {
     icon: '/images/component/rate.png',
     title: 'Rate',
diff --git a/examples/pages/navigator/filter/index.wxml b/examples/pages/navigator/filter/index.wxml
index b6a5e621..f1f385c9 100644
--- a/examples/pages/navigator/filter/index.wxml
+++ b/examples/pages/navigator/filter/index.wxml
@@ -6,7 +6,7 @@
       <detail-navi-card
         wx:for="{{baseNaviConfigs}}"
         wx:for-item="baseNaviConfigs"
-        wx:key="{{index}}"
+        wx:key="index"
         icon="{{baseNaviConfigs.icon}}"
         title="{{baseNaviConfigs.title}}"
         componentsPath="{{baseNaviConfigs.componentsPath}}"
diff --git a/package.json b/package.json
index 3a52b26c..39d109e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lin-ui",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "A high quality UI components library with MiniProgram",
   "main": "app.js",
   "directories": {
diff --git a/src/album/index.js b/src/album/index.js
index 6935fea7..7b3a1c3a 100644
--- a/src/album/index.js
+++ b/src/album/index.js
@@ -44,6 +44,22 @@ Component({
     key: {
       type: String,
       value: 'url'
+    },
+    maxNumber: {
+      type: Number,
+      value: 9
+    },
+    customRowNumber: {
+      type: Boolean,
+      value: false
+    },
+    everyRowNumber: {
+      type: Number,
+      value: 3
+    },
+    previewFullImage: {
+      type: Boolean,
+      value: true,
     }
   },
 
@@ -59,6 +75,10 @@ Component({
     row: 0,
     // 图片排列几列
     colum: 0,
+    // 用于显示的图片列表
+    showUrls: [],
+    // 传入的url长度是否大于maxNumber指定的数量
+    isLong: false,
   },
 
   /**
@@ -69,12 +89,29 @@ Component({
       // 在组件实例进入页面节点树时执行
 
       //判断传入urls长度
-      if (this.data.urls.length > 9) {
-        const urls = this.data.urls.slice(0, 9);
+      let urls = [];
+      if (this.data.urls.length > this.data.maxNumber) {
+        urls = this.data.urls.slice(0, this.data.maxNumber);
         this.setData({
-          urls
+          isLong: true,
         });
-        console.warn('超过9张图片！');
+        console.warn('图片数量超过maxNumber指定数量');
+      } else {
+        urls = this.data.urls;
+      }
+      this.setData({
+        showUrls: urls
+      });
+
+      if (!this.data.customRowNumber) {
+        let urlLength = this.data.showUrls.length;
+        if (urlLength > 1 && urlLength < 5) {
+          this.setData({
+            everyRowNumber: 2
+          });
+        } else(this.setData({
+          everyRowNumber: 3
+        }));
       }
 
       this.preview();
@@ -137,7 +174,13 @@ Component({
 
     onPreviewTap(e) {
       const index = e.currentTarget.id;
-      const urls = this.data.urls;
+      let urls;
+      if (this.data.previewFullImage) {
+        urls = this.data.urls;
+      } else {
+        urls = this.data.showUrls;
+      }
+
       let tempFilePath = '';
       let previewImageList = [];
       const newType = this.data.newType;
diff --git a/src/album/index.less b/src/album/index.less
index bcb69449..558ca1aa 100644
--- a/src/album/index.less
+++ b/src/album/index.less
@@ -1,8 +1,48 @@
 /* miniprogram_npm/lin-ui/picture-album/index.wxss */
-.container{
+.container {
     display: grid;
-
 }
+
 .vertical {
     height: 360rpx;
-}
\ No newline at end of file
+}
+
+.parent {
+    display: inline-grid;
+    grid-template-columns: repeat(auto-fill);
+}
+
+.child {
+    box-sizing: border-box;
+    background-color: white;
+    flex: 0 0 44%;
+    height: 100px;
+    border: 1px solid red;
+    margin-top: 4%;
+    margin-left: 2%;
+    margin-right: 2%;
+}
+
+.dimback {
+    background: #000;
+}
+
+.dim {
+    opacity: 0.6;
+    filter: alpha(opacity=60);
+}
+
+
+.imageContainer {
+    position: relative;
+}
+
+.imageContainer:last-child>.text {
+    color: white;
+    font-weight: bold;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: larger;
+}
diff --git a/src/album/index.wxml b/src/album/index.wxml
index 274d4d6f..007f7235 100644
--- a/src/album/index.wxml
+++ b/src/album/index.wxml
@@ -1,6 +1,9 @@
 <wxs src="index.wxs" module="album"></wxs>
-<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
-    <block wx:for="{{urls}}" wx:key="index">
-        <image id='{{index}}' bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+<view style="{{album.gridStyle(gapRow, gapColumn, multipleSize, everyRowNumber)}}">
+    <block wx:for="{{showUrls}}" wx:key="index" class="child">
+        <view class="imageContainer {{album.dimBack(isLong, index, maxNumber, previewFullImage)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}">
+            <image class="{{album.dim(isLong, index, maxNumber, previewFullImage)}}}" id='{{index}}' bind:tap="onPreviewTap" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+            <view wx:if="{{album.image(isLong, index, maxNumber, previewFullImage)}}" class="text">+{{urls.length-maxNumber}}</view>
+        </view>
     </block>
 </view>
diff --git a/src/album/index.wxs b/src/album/index.wxs
index 05bae060..b41eda00 100644
--- a/src/album/index.wxs
+++ b/src/album/index.wxs
@@ -1,5 +1,4 @@
 var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
-    urls.length === 2 || urls.length === 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
     if (urls.length === 2 || urls.length === 4) {
         return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
     } else {
@@ -32,8 +31,49 @@ var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, m
     }
 }
 
+var gridStyle = function (gapRow, gapColumn, multipleSize, everyRowNumber) {
+    return 'display:inline-grid;grid-template-columns: repeat(' + everyRowNumber + ',' + multipleSize + 'rpx);grid-row-gap:' + gapRow + 'rpx;grid-column-gap:' + gapColumn + 'rpx;'
+}
+
+var dimBack = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dimback'
+            }
+        }
+    }
+    return ''
+}
+
+var dim = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dim'
+            }
+        }
+    }
+    return ''
+}
+
+var image = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
 module.exports = {
     containerStyle: containerStyle,
     blockClass: blockClass,
-    blockStyle: blockStyle
+    blockStyle: blockStyle,
+    gridStyle: gridStyle,
+    dimBack: dimBack,
+    dim: dim,
+    image: image,
 }
diff --git a/src/avatar/index.wxml b/src/avatar/index.wxml
index 7f9ae0bc..b7529cf4 100644
--- a/src/avatar/index.wxml
+++ b/src/avatar/index.wxml
@@ -1,5 +1,5 @@
 
-<view class="l-avatar {{text||_isHaveUserNickName?'l-placement-'+placement:''}}" bindtap="tapAvatar">
+<view class="l-avatar {{text||_isHaveUserNickName?'l-placement-'+placement:''}}" mut-bind:tap="tapAvatar">
     <view class="l-avatar-image {{shape?'l-'+shape:''}} l-class" wx:if="{{_isHaveUserAvatarUrl||icon||src}}" style="width:{{size}}rpx;height:{{size}}rpx">
         <open-data class="open-data" wx:if="{{_isHaveUserAvatarUrl}}" type="userAvatarUrl" />
         <l-icon wx:elif="{{icon}}" size="{{iconSize || size*0.6}}" color="{{iconColor||'#ffffff'}}" name="{{icon}}" />
diff --git a/src/badge/index.wxml b/src/badge/index.wxml
index 2854d246..33c6be88 100644
--- a/src/badge/index.wxml
+++ b/src/badge/index.wxml
@@ -1,7 +1,7 @@
-<view class="l-badge" bindtap="handleTap">
+<view class="l-badge" mut-bind:tap="handleTap">
   <slot/>
   <block wx:if="{{show}}">
     <view wx:if="{{dot}}" class="l-badge-dot  l-class l-class-self l-self-class"></view>
     <view wx:else class="{{'l-badge-content-'+shape}} l-badge-content l-class l-class-self l-self-class">{{finalCount}}</view>
   </block>
-</view> 
\ No newline at end of file
+</view>
diff --git a/src/button/index.wxml b/src/button/index.wxml
index 3738cc7c..51d7dc3d 100644
--- a/src/button/index.wxml
+++ b/src/button/index.wxml
@@ -1,11 +1,11 @@
-<label for="{{name}}" bindtap="handleTap" class="l-label-class">
+<label for="{{name}}" mut-bind:tap="handleTap" class="l-label-class">
   <block wx:if="{{special}}">
     <view class="special-container l-class">
       <slot/>
     </view>
   </block>
   <block wx:else>
-    <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class " 
+    <view class="l-btn {{ 'l-btn-' + size }} {{ 'l-btn-' + type }} {{ 'l-btn-' + shape }} {{plain?'l-btn-plain':''}} {{ disabled ? 'l-btn-disabled' : ''}} l-class "
           hover-class="{{disabled?'':'btn-hover l-hover-class'}}"
           hover-stop-propagation="{{hoverStopPropagation}}"
           hover-start-time="{{hoverStartTime}}"
@@ -19,21 +19,21 @@
 </label>
 <button style="position: absolute;top: -999px;left: -999px;"
         wx:if="{{openType}}"
-        id="{{name}}" 
-        lang="{{lang}}" 
-        form-type="{{formType}}" 
-        open-type="{{openType}}" 
-        app-parameter="{{ appParameter }}" 
-        hover-stop-propagation="{{ hoverStopPropagation }}" 
-        hover-start-time="{{ hoverStartTime }}" 
+        id="{{name}}"
+        lang="{{lang}}"
+        form-type="{{formType}}"
+        open-type="{{openType}}"
+        app-parameter="{{ appParameter }}"
+        hover-stop-propagation="{{ hoverStopPropagation }}"
+        hover-start-time="{{ hoverStartTime }}"
         hover-stay-time="{{ hoverStayTime }}"
-        session-from="{{ sessionFrom }}" 
-        send-message-title="{{ sendMessageTitle }}" 
-        send-message-path="{{ sendMessagePath }}" 
-        send-message-img="{{ sendMessageImg }}" 
-        show-message-card="{{ showMessageCard }}" 
-        bindcontact="openTypeEvent" 
+        session-from="{{ sessionFrom }}"
+        send-message-title="{{ sendMessageTitle }}"
+        send-message-path="{{ sendMessagePath }}"
+        send-message-img="{{ sendMessageImg }}"
+        show-message-card="{{ showMessageCard }}"
+        bindcontact="openTypeEvent"
         bindgetuserinfo="openTypeEvent"
-        bindgetphonenumber="openTypeEvent" 
+        bindgetphonenumber="openTypeEvent"
         bindopensetting="openTypeEvent">
-</button>
\ No newline at end of file
+</button>
diff --git a/src/capsule-bar/index.wxml b/src/capsule-bar/index.wxml
index badc97e6..b1228347 100644
--- a/src/capsule-bar/index.wxml
+++ b/src/capsule-bar/index.wxml
@@ -25,7 +25,7 @@
       style="border-color: rgba({{capsuleColor==='black'?'0,0,0,0.1':'255,255,255,0.25'}});background-color: rgba({{capsuleColor==='black'?'255,255,255,0.6':'0,0,0,0.15'}});width: {{capsuleButtonInfo.width}}px;height: {{capsuleButtonInfo.height}}px;left: {{capsuleButtonInfo.left}}px;top: {{capsuleButtonInfo.top}}px;"
     >
       <!--左侧按钮-->
-      <cover-view catch:tap="onTapLeftButton"
+      <cover-view mut-bind:tap="onTapLeftButton"
                   catch:longpress="onLongPressLeftButton"
                   hover-class="icon-wrapper-hover-{{capsuleColor}}"
                   class="icon-wrapper"
@@ -37,7 +37,7 @@
       <cover-view class="line"></cover-view>
 
       <!--右侧按钮-->
-      <cover-view catch:tap="onTapRightButton"
+      <cover-view mut-bind:tap="onTapRightButton"
                   catch:longpress="onLongPressRightButton"
                   hover-class="icon-wrapper-hover-{{capsuleColor}}"
                   class="icon-wrapper"
diff --git a/src/checkbox/index.wxml b/src/checkbox/index.wxml
index e17d4390..8c65625d 100644
--- a/src/checkbox/index.wxml
+++ b/src/checkbox/index.wxml
@@ -1,4 +1,4 @@
-<view bind:tap="onCheckboxChangeTap" 
+<view mut-bind:tap="onCheckboxChangeTap"
       class="label label-{{placement}} label-placement-{{parentPlacement}} {{disabled ? 'label-disabled l-disabled-class' : 'l-class'}}">
         <view class="checkbox" style="color:{{checked ? selectColor : (disabled ? disabledColor : color)}};font-size: {{size}}">
             <slot wx:if="{{custom}}" name="icon"/>
diff --git a/src/collapse-item/index.wxml b/src/collapse-item/index.wxml
index e60a0f4d..3adf6299 100644
--- a/src/collapse-item/index.wxml
+++ b/src/collapse-item/index.wxml
@@ -1,5 +1,5 @@
 <view class="container l-class">
-  <view bind:tap="onTapTitle" class="container-title l-title-class">
+  <view mut-bind:tap="onTapTitle" class="container-title l-title-class">
     <view style="{{disable?'color:#DEE2E6':''}}" wx:if="{{!customTitle}}">{{title}}</view>
     <l-icon class="container-title-icon" wx:if="{{!customTitle}}" style="{{isExpandContent?'transform:rotate(-180deg);':''}}" name="down" size="28"
             color="{{disable?'#DEE2E6':'#333'}}"></l-icon>
diff --git a/src/combined-tabs/index.wxml b/src/combined-tabs/index.wxml
index f7873629..4fc82ea5 100644
--- a/src/combined-tabs/index.wxml
+++ b/src/combined-tabs/index.wxml
@@ -33,7 +33,7 @@
 <template name="tab-header">
     <scroll-view scroll-x="{{headerType==='tab' && scrollable}}" scroll-y="{{headerType==='subTab' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll">
         <view class="l-tabs-header l-class-header l-header-class {{hasLine?'l-tabs-header-line':''}}">
-            <view id="{{item.key}}" class="l-tabs-item {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.image.placement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tab}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" data-header-type="{{headerType}}" bind:tap="handleChange">
+            <view id="{{item.key}}" class="l-tabs-item {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.image.placement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tab}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" data-header-type="{{headerType}}" mut-bind:tap="handleChange">
                 <image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class" />
                 <l-icon wx:if="{{item.icon}}" l-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" size="28" color="{{item.key===activeKey?activeColor:inactiveColor}}" />
                 {{item.tab}}
diff --git a/src/count-selector/index.js b/src/count-selector/index.js
deleted file mode 100644
index c037e059..00000000
--- a/src/count-selector/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-Component({
-  externalClasses: [
-    'l-class',
-    'l-symbol-class',
-    'l-count-class',
-    'l-disabled-class'
-  ],
-  properties: {
-    count: {
-      type: Number,
-      value: 1
-    },
-    max: {
-      type: Number,
-      value: 9999
-    },
-    min: {
-      type: Number,
-      value: 1
-    },
-    step: {
-      type: Number,
-      value: 1
-    },
-    disabled: Boolean,
-    iconSize: String,
-    iconColor: String
-  },
-
-  /**
-   * 组件的初始数据
-   */
-  data: {
-    focus: false,
-    result: 1
-  },
-
-  observers: {
-    'count,min,max': function () {
-      this.valueRange(this.data.count, 'parameter');
-    }
-  },
-
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-    doNothing(e) {
-      const { type } = e.currentTarget.dataset;
-      this.triggerEvent('linout', { type, way: 'icon' }, {
-        bubbles: true,
-        composed: true
-      });
-    },
-
-    onCount() {
-      this.setData({
-        focus: true
-      });
-    },
-
-    onBlur(e) {
-      this.setData({
-        focus: false
-      });
-      let {
-        value
-      } = e.detail;
-      setTimeout(() => {
-        this.blurCount(Number(value), () => {
-          this.data.count = this.data.result;
-          this.triggerEvent('lintap', {
-            count: this.data.result,
-            type: 'blur'
-          }, {
-            bubbles: true,
-            composed: true
-          });
-        });
-      }, 50);
-    },
-
-    blurCount(value, callback) {
-      if (value) {
-        this.valueRange(value);
-      } else {
-        this.setData({
-          result: this.properties.count
-        });
-      }
-      callback && callback();
-    },
-
-    valueRange(value, way = 'input') {
-      if (value > this.properties.max) {
-        this.setData({
-          result: this.properties.max
-        }, () => {
-          this.triggerEvent('linout', { type: 'overflow_max', way }, {
-            bubbles: true,
-            composed: true
-          });
-        });
-      } else if (value < this.properties.min) {
-        this.setData({
-          result: this.properties.min
-        }, () => {
-          this.triggerEvent('linout', { type: 'overflow_min', way }, {
-            bubbles: true,
-            composed: true
-          });
-        });
-      } else {
-        this.setData({
-          result: value
-        });
-      }
-    },
-
-    reduceTap() {
-      let distance = this.data.count - this.properties.step;
-      if (distance <= this.properties.min) {
-        this.data.count = this.properties.min;
-      } else {
-        this.data.count -= this.properties.step;
-      }
-      this.setData({
-        result: this.data.count
-      });
-      this.triggerEvent('lintap', {
-        count: this.data.result,
-        type: 'reduce'
-      }, {
-        bubbles: true,
-        composed: true
-      });
-    },
-
-    addTap() {
-      let distance = this.data.count + this.properties.step;
-      if (distance >= this.properties.max) {
-        this.data.count = this.properties.max;
-      } else {
-        this.data.count += this.properties.step;
-      }
-      this.setData({
-        result: this.data.count
-      });
-      this.triggerEvent('lintap', {
-        count: this.data.result,
-        type: 'add'
-      }, {
-        bubbles: true,
-        composed: true
-      });
-    },
-  }
-});
\ No newline at end of file
diff --git a/src/count-selector/index.json b/src/count-selector/index.json
deleted file mode 100644
index c01e2d7e..00000000
--- a/src/count-selector/index.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "l-icon":"../icon/index"
-  }
-}
\ No newline at end of file
diff --git a/src/count-selector/index.less b/src/count-selector/index.less
deleted file mode 100644
index 4345f8b2..00000000
--- a/src/count-selector/index.less
+++ /dev/null
@@ -1,68 +0,0 @@
-.container-count {
-  display       : flex;
-  flex-direction: row;
-  width         : 170rpx;
-  height        : 56rpx;
-}
-
-.symbol {
-  height         : 100%;
-  width          : 56rpx;
-  font-size      : 28rpx;
-  color          : #596C8E;
-  display        : flex;
-  align-items    : center;
-  justify-content: center;
-}
-
-.disabled {
-  background-color: #f3f3f3;
-  color           : #c4c9d2;
-}
-
-.abled {
-  background-color: #ecf1f8;
-  color           : #596c8e;
-}
-
-.count {
-  height       : 100%;
-  flex         : 1;
-  min-height   : 56rpx;
-  line-height  : 56rpx;
-  font-size    : 24rpx;
-  color        : #596c8e;
-  background   : #f6f7f9;
-  text-align   : center;
-  overflow     : hidden;
-  text-overflow: ellipsis;
-  white-space  : nowrap;
-}
-
-@font-face {
-  font-family: "iconfont";
-  src        : url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALEAAsAAAAABqwAAAJ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBFIEWATYCJAMMCwgABCAFhG0HNxvdBcgekiSBqhRCJKIogADMEYRr5GySu0dQoBAloETFRVKmqpWoK1wVG1th2Ij732n7N5fsqTh2xyneKfa2N3/anZKGvYXFohGGrUFIEA6JogD/fZ7L6U2gA7nGtyynNW3s8fyoF2AcUEBjbYqsRALxFtlF3ImLOE6g3ZheoYOxmRVIKtC4QLww9QYkCxFFMfKtQt2wtIjXKq3pZfrEq+j78d9qJEmqDE09fTTahoFf6deHfNxwgxOiBHl1hYx5oBC3GjMXIsLgItpN0e7yWhHSXPEmkcq31Dv94yWihmo7wbQcS/yiMoJf9yskkEFdzE0Diwo7eF2IkexeNr35cvtSjmQ/fjt5zeTy++93z1I4x8LHT3u9VVdH6SHr0r8+OjOTtCopyONe0uFsIlZDiaMZyTdAmzFfZzrm0+EOQPOcP/IeANGP4rNA8KN0+V8rbPwlMwX83P7UK0Wa5wJwS+sZvMEfUwMbiq9F1lxcFVWFvmwE4ErICtOvARTo9zPeMgROEVoL2hG+FqMeslbjZGHnUemwjlqrbbSbM766wwAuIkobZl1ICL0ekXT7jqzXF1nYb1SG/aLWGxG0O4uBLTtMhpne59gQ2CbNHWK2mEeJXaTj+iXUN5wGz2sjfg15YMaJJqvl/Dh6yOeYEWzqFSEooZy5ZEw6DR2HEZ8zC1tCNoTwq4pCm94kt5gLafs41CCgNqJpB2FqYTyUtxbSlc8vQboNjgbeIejJr0FcwOyc0MhUADlu8kCCe3klsElXIQgUQXGMixiTBiGHgyH85kEW1CLIjBEpX5WCm1GoSV7f4n7fNmiH9syRIkeR77bbiWdmwzMaDAAA') format('woff2')
-}
-
-.l-icon-add:before {
-  content: "\e602";
-}
-
-.l-icon-reduce:before {
-  content: "\e69c";
-}
-
-.l-icon {
-  font-family            : "iconfont";
-  font-style             : normal;
-  -webkit-font-smoothing : antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.l-icon::before {
-  display: inline-flex;
-}
-
-.count-hover{
-  opacity: .8;
-}
\ No newline at end of file
diff --git a/src/count-selector/index.wxml b/src/count-selector/index.wxml
deleted file mode 100644
index c1b1cff4..00000000
--- a/src/count-selector/index.wxml
+++ /dev/null
@@ -1,22 +0,0 @@
-<view class="l-class container-count">
-  <view class="symbol {{result<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}" 
-        catchtap="{{result<=min|| disabled?'doNothing':'reduceTap'}}"
-        data-type="overflow_min"
-        hover-class="count-hover">
-    <view class="l-icon l-icon-reduce" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
-  </view>
-  <input  wx:if="{{focus}}"
-          class="l-count-class count" 
-          disabled="{{disabled}}" 
-          type="number"
-          focus="{{focus}}" 
-          value="{{result}}"
-          bindblur="onBlur" />
-  <view wx:else class="l-count-class count" bindtap="onCount">{{result}}</view>        
-  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" 
-        catchtap="{{result>=max|| disabled?'doNothing':'addTap'}}"
-        data-type="overflow_max"
-        hover-class="count-hover">
-       <view class="l-icon l-icon-add" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
-  </view>
-</view>
\ No newline at end of file
diff --git a/src/counter/index.js b/src/counter/index.js
index 6a3a6b7d..96499fc0 100644
--- a/src/counter/index.js
+++ b/src/counter/index.js
@@ -1,4 +1,5 @@
 import hover from '../behaviors/hover';
+import eventUtil from '../core/utils/event-util';
 
 Component({
   behaviors: [hover],
@@ -39,9 +40,12 @@ Component({
   },
 
   observers: {
+    'result': function (count) {
+      eventUtil.emit(this, 'linchange', { count });
+    },
     'count,min,max': function () {
       this.valueRange(this.data.count, 'parameter');
-    }
+    },
   },
 
   /**
@@ -50,10 +54,7 @@ Component({
   methods: {
     doNothing(e) {
       const { type } = e.currentTarget.dataset;
-      this.triggerEvent('linout', { type, way: 'icon' }, {
-        bubbles: true,
-        composed: true
-      });
+      eventUtil.emit(this, 'linout', { type, way: 'icon' });
     },
 
     onCount() {
@@ -72,13 +73,7 @@ Component({
       setTimeout(() => {
         this.blurCount(Number(value), () => {
           this.data.count = this.data.result;
-          this.triggerEvent('lintap', {
-            count: this.data.result,
-            type: 'blur'
-          }, {
-            bubbles: true,
-            composed: true
-          });
+          eventUtil.emit(this, 'lintap', { count: this.data.result, type: 'blur' });
         });
       }, 50);
     },
@@ -99,19 +94,13 @@ Component({
         this.setData({
           result: this.properties.max
         }, () => {
-          this.triggerEvent('linout', { type: 'overflow_max', way }, {
-            bubbles: true,
-            composed: true
-          });
+          eventUtil.emit(this, 'linout', { type: 'overflow_max', way });
         });
       } else if (value < this.properties.min) {
         this.setData({
           result: this.properties.min
         }, () => {
-          this.triggerEvent('linout', { type: 'overflow_min', way }, {
-            bubbles: true,
-            composed: true
-          });
+          eventUtil.emit(this, 'linout', { type: 'overflow_min', way });
         });
       } else {
         this.setData({
@@ -158,4 +147,4 @@ Component({
       });
     },
   }
-});
\ No newline at end of file
+});
diff --git a/src/counter/index.wxml b/src/counter/index.wxml
index 47791290..1211eea4 100644
--- a/src/counter/index.wxml
+++ b/src/counter/index.wxml
@@ -1,22 +1,22 @@
 <view class="l-class container-count">
-  <view class="symbol {{result<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}" 
+  <view class="symbol {{result<=min|| disabled?'disabled  l-disabled-class':'abled l-symbol-class'}}"
         catchtap="{{result<=min|| disabled?'doNothing':'reduceTap'}}"
         data-type="overflow_min"
         hover-class="{{isHover?'count-hover':''}}">
     <view class="l-icon l-icon-reduce" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>
   <input  wx:if="{{focus}}"
-          class="l-count-class count" 
-          disabled="{{disabled}}" 
+          class="l-count-class count"
+          disabled="{{disabled}}"
           type="number"
-          focus="{{focus}}" 
+          focus="{{focus}}"
           value="{{result}}"
           bindblur="onBlur"/>
-  <view wx:else class="l-count-class count" bindtap="onCount">{{result}}</view>        
-  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" 
+  <view wx:else class="l-count-class count" mut-bind:tap="onCount">{{result}}</view>
+  <view class="l-symbol-class symbol {{result>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}"
         catchtap="{{result>=max|| disabled?'doNothing':'addTap'}}"
         data-type="overflow_max"
         hover-class="{{isHover?'count-hover':''}}">
        <view class="l-icon l-icon-add" style="font-size:{{iconSize}};color:{{iconColor}}"></view>
   </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/src/custom-tab-bar/index.wxml b/src/custom-tab-bar/index.wxml
index faf7d111..fef791a2 100644
--- a/src/custom-tab-bar/index.wxml
+++ b/src/custom-tab-bar/index.wxml
@@ -11,7 +11,7 @@
     class="tab-bar-item {{item.style === 'circle' ? 'circle': ''}}"
     data-path="{{item.pagePath}}"
     data-index="{{idx}}"
-    bindtap="switchTab">
+    mut-bind:tap="switchTab">
     <view  wx:if="{{item.style === 'circle'}}" class='item-circle'></view>
     <image
       class='tab-bar-item-image'
diff --git a/src/form/index.wxml b/src/form/index.wxml
index fb186479..6f055290 100644
--- a/src/form/index.wxml
+++ b/src/form/index.wxml
@@ -2,10 +2,10 @@
     <slot />
 </view>
 <view class="l-form-btn-class">
-    <view class="l-form-submit-class" bind:tap="submit">
+    <view class="l-form-submit-class" mut-bind:tap="submit">
         <slot name="submit"/>
     </view>
-    <view class="l-form-reset-class" bind:tap="reset">
+    <view class="l-form-reset-class" mut-bind:tap="reset">
         <slot name="reset"/>
     </view>
 </view>
diff --git a/src/grid-item/index.wxml b/src/grid-item/index.wxml
index 49a59ea4..265756ea 100644
--- a/src/grid-item/index.wxml
+++ b/src/grid-item/index.wxml
@@ -1,3 +1,3 @@
-<view class="l-grid-item l-grid-item-class grid-item" bindtap="tapGridItem">
+<view class="l-grid-item l-grid-item-class grid-item" mut-bind:tap="tapGridItem">
     <slot></slot>
-</view>
\ No newline at end of file
+</view>
diff --git a/src/grid/index.wxml b/src/grid/index.wxml
index ddd2ffed..936b3ef5 100644
--- a/src/grid/index.wxml
+++ b/src/grid/index.wxml
@@ -1,11 +1,11 @@
-<view class="l-grid l-class" bindtap="tapGrid">
-    <view bindtap="tapGridItem" 
-          hover-class="{{isHover?'l-gird-hover':''}}" 
+<view class="l-grid l-class" mut-bind:tap="tapGrid">
+    <view mut-bind:tap="tapGridItem"
+          hover-class="{{isHover?'l-gird-hover':''}}"
           hover-start-time="20"
-          hover-stay-time="50" 
-          data-grid-index="{{item.index}}" 
-          class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key" 
+          hover-stay-time="50"
+          data-grid-index="{{item.index}}"
+          class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key"
           style="min-width:{{100/rowNum}}%;">
         <slot name="{{item.key}}"></slot>
     </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/src/image-clipper-tools/index.js b/src/image-clipper-tools/index.js
new file mode 100644
index 00000000..3226d451
--- /dev/null
+++ b/src/image-clipper-tools/index.js
@@ -0,0 +1,80 @@
+Component({
+
+  relations: {
+    '../image-clipper/index': {
+      type: 'parent'
+    }
+  },
+  externalClasses: ['l-class'],
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 组件层级
+    zIndex: {
+      type: Number,
+      value: 999
+    },
+    // 是否显示锁定裁剪框宽度按钮
+    lockWidth: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示锁定裁剪框高度按钮
+    lockHeight: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示锁定裁剪框比例按钮
+    lockRatio: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示禁止缩放按钮
+    disableScale: {
+      type: Number,
+      value: false
+    },
+    // 是否显示禁止旋转按钮
+    disableRotate: {
+      type: Number,
+      value: false
+    },
+    // 是否显示限制移动范围按钮
+    limitMove: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    formColor: '#3963bc',
+    lockWidthValue: false,
+    lockHeightValue: false,
+    lockRatioValue: true,
+    disableScaleValue: false,
+    disableRotateValue: false,
+    limitMoveValue: false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * switch change事件
+     */
+    bindSwitchChange: async function(event) {
+      const value = event.detail.value;
+      const type = event.currentTarget.dataset.type;
+      let parent = this.getRelationNodes('../image-clipper/index')[0];
+      await parent.setData({
+        [type]: value
+      });
+    },
+  }
+});
diff --git a/src/image-clipper-tools/index.json b/src/image-clipper-tools/index.json
new file mode 100644
index 00000000..e8cfaaf8
--- /dev/null
+++ b/src/image-clipper-tools/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/src/image-clipper-tools/index.less b/src/image-clipper-tools/index.less
new file mode 100644
index 00000000..893bf57c
--- /dev/null
+++ b/src/image-clipper-tools/index.less
@@ -0,0 +1,19 @@
+.tools-container {
+    width: 100%;
+    padding: 20rpx 40rpx;
+    box-sizing: border-box;
+
+    .tools-form {
+        margin-top: 20rpx;
+        display: flex;
+        flex-wrap: wrap;
+        color: #ffffff;
+        .slider-wrapper {
+            display: flex;
+            align-items: center;
+        }
+        switch {
+            transform: scale(0.7);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/image-clipper-tools/index.wxml b/src/image-clipper-tools/index.wxml
new file mode 100644
index 00000000..35f37ef2
--- /dev/null
+++ b/src/image-clipper-tools/index.wxml
@@ -0,0 +1,28 @@
+<view class="tools-container l-class" catchtouchmove="{{true}}" style="z-index: {{zIndex}};">
+    <view class="tools-form">
+        <view wx:if="{{lockWidth}}">
+            锁定裁剪框宽
+            <switch model:checked="{{lockWidthValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockWidth" />
+        </view>
+        <view wx:if="{{lockHeight}}">
+            锁定裁剪框高
+            <switch model:checked="{{lockHeightValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockHeight" />
+        </view>
+        <view wx:if="{{lockRatio}}">
+            锁定裁剪框比例
+            <switch model:checked="{{lockRatioValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="lockRatio" />
+        </view>
+         <view wx:if="{{limitMove}}">
+            限制移动范围
+            <switch model:checked="{{limitMoveValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="limitMove" />
+        </view>
+        <view wx:if="{{disableScale}}">
+            禁止缩放
+            <switch model:checked="{{disableScaleValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="disableScale" />
+        </view>
+        <view wx:if="{{disableRotate}}">
+            禁止旋转
+            <switch model:checked="{{disableRotateValue}}" color="{{formColor}}" bindchange="bindSwitchChange" data-type="disableRotate" />
+        </view>
+    </view>
+</view>
\ No newline at end of file
diff --git a/src/image-clipper/calculate.js b/src/image-clipper/calculate.js
new file mode 100644
index 00000000..1dffc8e7
--- /dev/null
+++ b/src/image-clipper/calculate.js
@@ -0,0 +1,276 @@
+/**
+ * 判断手指触摸位置
+ *
+ * @param {*} cutX
+ * @param {*} cutY
+ * @param {*} clipWidth
+ * @param {*} clipHeight
+ * @param {*} currentX
+ * @param {*} currentY
+ * @returns
+ */
+export function determineDirection(cutX, cutY, clipWidth, clipHeight, currentX, currentY) {
+  /*
+   * (右下>>1 右上>>2 左上>>3 左下>>4)
+   * left_x：  裁剪框左边线距离视口最左侧两点位置 [3,4]
+   * right_x： 裁剪框右边线距离视口最右侧两点位置 [1,2]
+   * top_y：   裁剪框顶部线距离视口最顶部两点位置 [2,3]
+   * bottom_y：裁剪框底部线距离视口最底部两点位置 [1,4]
+   */
+  // 用户体验优化，增加裁剪框四角可触摸区域
+  const EXPAND_SIZE = 24;
+
+  let left_x1 = cutX - EXPAND_SIZE;
+  let left_x2 = cutX + EXPAND_SIZE;
+
+  let top_y1 = cutY - EXPAND_SIZE;
+  let top_y2 = cutY + EXPAND_SIZE;
+
+  let right_x1 = cutX + clipWidth - EXPAND_SIZE;
+  let right_x2 = cutX + clipWidth + EXPAND_SIZE;
+
+  let bottom_y1 = cutY + clipHeight - EXPAND_SIZE;
+  let bottom_y2 = cutY + clipHeight + EXPAND_SIZE;
+  /*
+   * 四角
+   * (右下>>1 右上>>2 左上>>3 左下>>4)
+   */
+  let corner;
+
+  const isRight = currentX > right_x1 && currentX < right_x2;
+  const isLeft = currentX > left_x1 && currentX < left_x2;
+  const isBottom = currentY > bottom_y1 && currentY < bottom_y2;
+  const isTop = currentY > top_y1 && currentY < top_y2;
+
+  if (isRight && isBottom) {
+    corner = 1;
+  } else if (isRight && isTop) {
+    corner = 2;
+  } else if (isLeft && isTop) {
+    corner = 3;
+  } else if (isLeft && isBottom) {
+    corner = 4;
+  }
+  return corner;
+}
+
+/**
+ * 图片边缘检测检测时，计算图片偏移量
+ *
+ * @param {*} data
+ * @param {*} scale
+ * @returns
+ */
+export function calcImageOffset(data, scale) {
+  let left = data.imageLeft;
+  let top = data.imageTop;
+  scale = scale || data.scale;
+  
+  let imageWidth = data.imageWidth;
+  let imageHeight = data.imageHeight;
+  if ((data.angle / 90) % 2) {
+    imageWidth = data.imageHeight;
+    imageHeight = data.imageWidth;
+  }
+  const {
+    cutX,
+    clipWidth,
+    cutY,
+    clipHeight
+  } = data;
+  // 当前图片宽度/高度
+  const currentImageSize = (size) => (size * scale) / 2;
+  const currentImageWidth = currentImageSize(imageWidth);
+  const currentImageHeight = currentImageSize(imageHeight);
+
+  left = cutX + currentImageWidth >= left ? left : cutX + currentImageWidth;
+  left = cutX + clipWidth - currentImageWidth <= left ? left : cutX + clipWidth - currentImageWidth;
+  top = cutY + currentImageHeight >= top ? top : cutY + currentImageHeight;
+  top = cutY + clipHeight - currentImageHeight <= top ? top : cutY + clipHeight - currentImageHeight;
+  return {
+    left,
+    top,
+    scale
+  };
+}
+
+/**
+ * 图片边缘检测时，计算图片缩放比例
+ *
+ * @param {*} data
+ * @param {*} scale
+ * @returns
+ */
+export function calcImageScale(data, scale) {
+  scale = scale || data.scale;
+  let imageWidth = data.imageWidth;
+  let imageHeight = data.imageHeight;
+  if ((data.angle / 90) % 2) {
+    imageWidth = data.imageHeight;
+    imageHeight = data.imageWidth;
+  }
+  if (imageWidth * scale < data.clipWidth) {
+    scale = data.clipWidth / imageWidth;
+  }
+  if (imageHeight * scale < data.clipHeight) {
+    scale = Math.max(scale, data.clipHeight / imageHeight);
+  }
+  return scale;
+}
+
+/**
+ * 计算图片尺寸
+ *
+ * @export
+ * @param {*} width
+ * @param {*} height
+ * @param {*} data
+ * @returns
+ */
+export function calcImageSize(width, height, data) {
+  // 默认按图片最小边 = 对应裁剪框尺寸
+  let imageWidth = width,
+    imageHeight = height;
+  if (imageWidth && imageHeight) {
+    if (imageWidth / imageHeight > (data.clipWidth || data.width) / (data.clipWidth || data.height)) {
+      imageHeight = data.clipHeight || data.height;
+      imageWidth = (width / height) * imageHeight;
+    } else {
+      imageWidth = data.clipWidth || data.width;
+      imageHeight = (height / width) * imageWidth;
+    }
+  } else {
+    let sys = data._SYS_INFO || wx.getSystemInfoSync();
+    imageWidth = sys.windowWidth;
+    imageHeight = 0;
+  }
+  return {
+    imageWidth,
+    imageHeight
+  };
+}
+
+/**
+ * 勾股定理求斜边
+ *
+ * @param {*} width
+ * @param {*} height
+ * @returns
+ */
+export function calcPythagoreanTheorem(width, height) {
+  return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+}
+
+/**
+ * 拖动裁剪框时计算
+ *
+ * @export
+ * @param {*} data
+ * @param {*} event
+ * @returns
+ */
+export function clipTouchMoveOfCalculate(data, event) {
+  const clientX = event.touches[0].clientX;
+  const clientY = event.touches[0].clientY;
+
+  const {
+    clipWidth,
+    clipHeight,
+    cutY: oldCutY,
+    cutX: oldCutX,
+    _CUT_START,
+    lockRatio
+  } = data;
+  let {
+    maxWidth,
+    minWidth,
+    maxHeight,
+    minHeight
+  } = data;
+  maxWidth = maxWidth / 2;
+  minWidth = minWidth / 2;
+  minHeight = minHeight / 2;
+  maxHeight = maxHeight / 2;
+
+  let width = clipWidth,
+    height = clipHeight,
+    cutY = oldCutY,
+    cutX = oldCutX,
+    // 获取裁剪框实际宽度/高度
+    // 如果大于最大值则使用最大值
+    // 如果小于最小值则使用最小值
+    size_correct = () => {
+      width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
+      height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
+    },
+    size_inspect = () => {
+      if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && lockRatio) {
+        size_correct();
+        return false;
+      } else {
+        size_correct();
+        return true;
+      }
+    };
+  height = _CUT_START.height + (_CUT_START.corner > 1 && _CUT_START.corner < 4 ? 1 : -1) * (_CUT_START.y - clientY);
+  switch (_CUT_START.corner) {
+  case 1:
+    width = _CUT_START.width - _CUT_START.x + clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    break;
+  case 2:
+    width = _CUT_START.width - _CUT_START.x + clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    cutY = _CUT_START.cutY - (height - _CUT_START.height);
+    break;
+  case 3:
+    width = _CUT_START.width + _CUT_START.x - clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    cutY = _CUT_START.cutY - (height - _CUT_START.height);
+    cutX = _CUT_START.cutX - (width - _CUT_START.width);
+    break;
+  case 4:
+    width = _CUT_START.width + _CUT_START.x - clientX;
+    if (lockRatio) {
+      height = width / (clipWidth / clipHeight);
+    }
+    if (!size_inspect()) return;
+    cutX = _CUT_START.cutX - (width - _CUT_START.width);
+    break;
+  default:
+    break;
+  }
+  return {
+    width,
+    height,
+    cutX,
+    cutY
+  };
+}
+
+/**
+ * 单指拖动图片计算偏移
+ *
+ * @export
+ * @param {*} data
+ * @param {*} clientXForLeft
+ * @param {*} clientYForLeft
+ * @returns
+ */
+export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
+  let left = clientXForLeft - data._touchRelative[0].x,
+    top = clientYForLeft - data._touchRelative[0].y;
+  return {
+    left,
+    top
+  };
+}
diff --git a/src/image-clipper/images/close.png b/src/image-clipper/images/close.png
new file mode 100755
index 00000000..a1c6c99c
Binary files /dev/null and b/src/image-clipper/images/close.png differ
diff --git a/src/image-clipper/images/photo.png b/src/image-clipper/images/photo.png
new file mode 100755
index 00000000..80928c3b
Binary files /dev/null and b/src/image-clipper/images/photo.png differ
diff --git a/src/image-clipper/images/rotate-along.png b/src/image-clipper/images/rotate-along.png
new file mode 100755
index 00000000..7c51905d
Binary files /dev/null and b/src/image-clipper/images/rotate-along.png differ
diff --git a/src/image-clipper/images/rotate-inverse.png b/src/image-clipper/images/rotate-inverse.png
new file mode 100755
index 00000000..ec77b6b5
Binary files /dev/null and b/src/image-clipper/images/rotate-inverse.png differ
diff --git a/src/image-clipper/images/sure.png b/src/image-clipper/images/sure.png
new file mode 100755
index 00000000..05f59556
Binary files /dev/null and b/src/image-clipper/images/sure.png differ
diff --git a/src/image-clipper/index.js b/src/image-clipper/index.js
new file mode 100644
index 00000000..55fa2629
--- /dev/null
+++ b/src/image-clipper/index.js
@@ -0,0 +1,802 @@
+import dataUtil from '../core/utils/data-util';
+import eventUtil from '../core/utils/event-util';
+import {
+  determineDirection,
+  calcImageOffset,
+  calcImageScale,
+  calcImageSize,
+  calcPythagoreanTheorem,
+  clipTouchMoveOfCalculate,
+  imageTouchMoveOfCalcOffset
+} from './calculate';
+const detail = true;
+// 模拟enum
+const IMAGE_TYPE = {
+  base64: 'base64',
+  url: 'url'
+};
+Component({
+  externalClasses: ['l-class'],
+  relations: {
+    '../image-clipper-tools/index': {
+      type: 'child'
+    }
+  },
+  options: {
+    pureDataPattern: /^_/
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 组件显示隐藏
+    show: {
+      type: Boolean,
+      value: false
+    },
+    // 组件层级
+    zIndex: {
+      type: Number,
+      value: 99
+    },
+    // 图片url
+    imageUrl: {
+      type: String
+    },
+    // 生成的图片类型
+    type: {
+      type: String,
+      options: ['url', 'base64'],
+      value: 'url'
+    },
+    // 生成的图片质量
+    quality: {
+      type: Number,
+      value: 1
+    },
+    // 裁剪框宽度
+    width: {
+      type: Number,
+      value: 400
+    },
+    // 裁剪框高度
+    height: {
+      type: Number,
+      value: 400
+    },
+    // 裁剪框最小宽度
+    minWidth: {
+      type: Number,
+      value: 200
+    },
+    // 裁剪框最大宽度
+    maxWidth: {
+      type: Number,
+      value: 600
+    },
+    // 裁剪框最小高度
+    minHeight: {
+      type: Number,
+      value: 200
+    },
+    // 裁剪框最大高度
+    maxHeight: {
+      type: Number,
+      value: 600
+    },
+    // 是否锁定裁剪框宽度	
+    lockWidth: {
+      type: Boolean,
+      value: false
+    },
+    // 是否锁定裁剪框高度	
+    lockHeight: {
+      type: Boolean,
+      value: false
+    },
+    // 是否锁定裁剪框比例	
+    lockRatio: {
+      type: Boolean,
+      value: true
+    },
+    // 生成图片相对于裁剪框的比例
+    scaleRatio: {
+      type: Number,
+      value: 1
+    },
+    // 图片最小缩放比
+    minRatio: {
+      type: Number,
+      value: 0.5
+    },
+    // 图片最大缩放比
+    maxRatio: {
+      type: Number,
+      value: 2
+    },
+    // 是否禁止缩放
+    disableScale: {
+      type: Number,
+      value: false
+    },
+    // 是否禁止旋转
+    disableRotate: {
+      type: Number,
+      value: false
+    },
+    // 是否限制移动范围	
+    limitMove: {
+      type: Boolean,
+      value: false
+    },
+    // 是否显示选择图片按钮
+    checkImage: {
+      type: Boolean,
+      value: true
+    },
+    checkImageIcon: {
+      type: String,
+      value: './images/photo.png'
+    },
+    // 是否显示顺时针旋转按钮
+    rotateAlong: {
+      type: Boolean,
+      value: true
+    },
+    rotateAlongIcon: {
+      type: String,
+      value: './images/rotate-along.png'
+    },
+    // 是否显示逆时针旋转按钮
+    rotateInverse: {
+      type: Boolean,
+      value: true
+    },
+    rotateInverseIcon: {
+      type: String,
+      value: './images/rotate-inverse.png'
+    },
+    // 是否显示确定按钮
+    sure: {
+      type: Boolean,
+      value: true
+    },
+    sureIcon: {
+      type: String,
+      value: './images/sure.png'
+    },
+    // 是否显示关闭按钮
+    close: {
+      type: Boolean,
+      value: true
+    },
+    closeIcon: {
+      type: String,
+      value: './images/close.png'
+    },
+    // 旋转按钮每次旋转的角度
+    rotateAngle: {
+      type: Number,
+      value: 90
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    CANVAS_WIDTH: 0,
+    CANVAS_HEIGHT: 0,
+    cutX: 0, // 裁剪框x轴起点，可用于裁剪框left区域宽度
+    cutY: 0, // 裁剪框y轴起点，可用于裁剪框top区域高度
+    clipWidth: 0, // 裁剪框宽度
+    clipHeight: 0, // 裁剪框高度
+    cutAnimation: false, //是否开启图片和裁剪框过渡
+    imageWidth: 0, // 图片宽度
+    imageHeight: 0, // 图片高度
+    imageTop: 0, // 图片上边距
+    imageLeft: 0, // 图片左边距
+    scale: 1, // 图片缩放比
+    angle: 0, // 图片旋转角度
+    _SYS_INFO: {},
+    _MOVE_THROTTLE: null, // 触摸移动节流setTimeout
+    _MOVE_THROTTLE_FLAG: true, // 节流标识
+    _TIME_CUT_CENTER: null, // 自动居中节流函数
+    _flagCutTouch: false, // 是否开始拖动裁剪框
+    _flagEndTouch: false, // 是否结束拖动裁剪框
+    _CUT_START: {}, // 拖动裁剪框所需数据
+    _cutAnimationTime: null,
+    _touchRelative: [{
+      x: 0,
+      y: 0
+    }], // 手指或鼠标和图片中心的相对位置
+    _hypotenuseLength: 0, // 双指触摸时斜边长度
+    _ctx: null, // canvas上下文
+  },
+  /**
+   * 组件监听器
+   */
+  observers: {
+    // 监听图片url改变，获取图片信息
+    'imageUrl'(url) {
+      if (!url) return;
+      this.imageReset();
+      wx.showLoading({
+        title: '请稍候...',
+        mask: true
+      });
+      wx.getImageInfo({
+        src: url,
+        success: res => {
+          // 计算图片尺寸
+          this.imgComputeSize(res.width, res.height);
+          if (this.properties.limitMove) {
+            // 限制移动，不留空白处理
+            this.imgMarginDetectionScale();
+            eventUtil.emit(this, 'linimageready', res);
+          }
+        },
+        fail: () => {
+          this.imgComputeSize();
+          if (this.properties.limitMove) {
+            this.imgMarginDetectionScale();
+          }
+        }
+      });
+    },
+    'clipWidth, clipHeight'(widthVal, heightVal) {
+      let { minWidth, minHeight } = this.data;
+      minWidth = minWidth / 2;
+      minHeight = minHeight / 2;
+      if (widthVal < minWidth) {
+        dataUtil.setDiffData(this, { clipWidth: minWidth });
+      }
+      if (heightVal < minHeight) {
+        dataUtil.setDiffData(this, { clipHeight: minHeight });
+      }
+      this.computeCutSize();
+    },
+    'rotateAngle'(val) {
+      dataUtil.setDiffData(this, { cutAnimation: true, angle: val });
+    },
+    'angle'(val) {
+      this.moveStop();
+      const {
+        limitMove
+      } = this.properties;
+      if (limitMove && val % 90) {
+        dataUtil.setDiffData(this, { angle: Math.round(val / 90) * 90 });
+      }
+      this.imgMarginDetectionScale();
+    },
+    'cutAnimation'(val) {
+      // 开启过渡260毫秒之后自动关闭
+      clearTimeout(this.data._cutAnimationTime);
+      if (val) {
+        let _cutAnimationTime = setTimeout(() => {
+          dataUtil.setDiffData(this, { cutAnimation: false });
+        }, 260);
+        dataUtil.setDiffData(this, { _cutAnimationTime });
+      }
+    },
+    'limitMove'(val) {
+      if (val) {
+        if (this.data.angle % 90) {
+          dataUtil.setDiffData(this, { angle: Math.round(this.data.angle / 90) * 90 });
+        }
+        this.imgMarginDetectionScale();
+      }
+    },
+    'cutY, cutX'() {
+      this.cutDetectionPosition();
+    },
+    'width, height'(width, height) {
+      if(width !== this.width) {
+        dataUtil.setDiffData(this, {clipWidth: width / 2});
+      }
+      if(height !== this.height) {
+        dataUtil.setDiffData(this, {clipHeight: height / 2});
+      }
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * 设置裁剪框的一些信息
+     */
+    setCutInfo() {
+      const {
+        width,
+        height
+      } = this.properties;
+      const {
+        _SYS_INFO
+      } = this.data;
+      // 本组件动态style默认单位为px，需将用户传入值/2
+      const clipWidth = width / 2;
+      const clipHeight = height / 2;
+      const cutY = (_SYS_INFO.windowHeight - clipHeight) / 2;
+      const cutX = (_SYS_INFO.windowWidth - clipWidth) / 2;
+      const imageLeft = _SYS_INFO.windowWidth / 2;
+      const imageTop = _SYS_INFO.windowHeight / 2;
+      const _ctx = wx.createCanvasContext('image-clipper', this);
+      this.setData({
+        clipWidth,
+        clipHeight,
+        cutX,
+        cutY,
+        CANVAS_HEIGHT: clipHeight,
+        CANVAS_WIDTH: clipWidth,
+        _ctx,
+        imageLeft,
+        imageTop
+      });
+    },
+    /**
+     * 裁剪框居中
+     */
+    setCutCenter() {
+      const { sysInfo, clipHeight, clipWidth, imageTop, imageLeft } = this.data;
+      let sys = sysInfo || wx.getSystemInfoSync();
+      let cutY = (sys.windowHeight - clipHeight) * 0.5;
+      let cutX = (sys.windowWidth - clipWidth) * 0.5;
+      this.setData({ 
+        imageTop: imageTop - this.data.cutY + cutY, 
+        imageLeft: imageLeft - this.data.cutX + cutX, 
+        cutY, 
+        cutX 
+      });
+    },
+    /**
+     * 开始拖动裁剪框
+     * 需在此处查找到是否拖动的裁剪框四角
+     */
+    clipTouchStart(event) {
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+      const currentX = event.touches[0].clientX;
+      const currentY = event.touches[0].clientY;
+      const { cutX, cutY, clipWidth, clipHeight } = this.data;
+      const corner = determineDirection(cutX, cutY, clipWidth, clipHeight, currentX, currentY);
+      this.moveDuring();
+      const _CUT_START = {
+        width: clipWidth,
+        height: clipHeight,
+        x: currentX,
+        y: currentY,
+        cutY,
+        cutX,
+        corner
+      };
+      this.setData({ _flagCutTouch: true, _flagEndTouch: true, _CUT_START });
+    },
+    /**
+     * 拖动裁剪框
+     * 当拖动的裁剪框区域时处理数据
+     */
+    clipTouchMove(event) {
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+
+      const { _flagCutTouch, _MOVE_THROTTLE_FLAG } = this.data;
+      if (_flagCutTouch && _MOVE_THROTTLE_FLAG) {
+        const { lockRatio, lockHeight, lockWidth } = this.properties;
+        if (lockRatio && (lockWidth || lockHeight)) return;
+        dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: false });
+        this.moveThrottle();
+        const { width, height, cutX, cutY } = clipTouchMoveOfCalculate(this.data, event);
+        if (!lockWidth && !lockHeight) {
+          dataUtil.setDiffData(this, { clipWidth: width, clipHeight: height, cutX, cutY });
+        } else if (!lockWidth) {
+          dataUtil.setDiffData(this, { clipWidth: width, cutX });
+        } else if (!lockHeight) {
+          dataUtil.setDiffData(this, { clipHeight: height, cutY });
+        }
+        this.imgMarginDetectionScale();
+      }
+    },
+    /**
+     * 拖动裁剪框结束
+     * 当拖动的裁剪框区域时处理数据
+     */
+    clipTouchEnd() {
+      this.moveStop();
+      this.setData({ _flagCutTouch: false });
+    },
+    /**
+     * 清空之前的自动居中延迟函数
+     */
+    moveDuring() {
+      clearTimeout(this.data._TIME_CUT_CENTER);
+    },
+    /**
+     * 停止移动时需要做的操作
+     * 清空之前的自动居中延迟函数并添加最新的
+     */
+    moveStop() {
+      clearTimeout(this.data._TIME_CUT_CENTER);
+      const _TIME_CUT_CENTER = setTimeout(() => {
+        //动画启动
+        if (!this.data.cutAnimation) {
+          dataUtil.setDiffData(this, { cutAnimation: true });
+        }
+        this.setCutCenter();
+      }, 800);
+      dataUtil.setDiffData(this, { _TIME_CUT_CENTER });
+    },
+    /**
+     * 重置延迟函数
+     */
+    moveThrottle() {
+      if (this.data._SYS_INFO.platform === 'android') {
+        clearTimeout(this.data._MOVE_THROTTLE);
+        const _MOVE_THROTTLE = setTimeout(() => {
+          dataUtil.setDiffData(this, {  _MOVE_THROTTLE_FLAG: true });
+        }, 800 / 40);
+        dataUtil.setDiffData(this, { _MOVE_THROTTLE });
+      } else {
+        dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: true });
+      }
+    },
+    /**
+     * 图片初始化
+     */
+    imageReset() {
+      const sys = this.data._SYS_INFO || wx.getSystemInfoSync();
+      this.setData({ scale: 1, angle: 0, imageTop: sys.windowHeight / 2, imageLeft: sys.windowWidth / 2 });
+    },
+    /**
+     * 图片加载完成
+     */
+    imageLoad() {
+      this.imageReset();
+      wx.hideLoading();
+      eventUtil.emit(this, 'linimageload', detail);
+    },
+    /**
+     * 计算图片尺寸
+     */
+    imgComputeSize(width, height) {
+      const { imageWidth, imageHeight } = calcImageSize(width, height, this.data);
+      this.setData({ imageWidth, imageHeight });
+    },
+    /**
+     * 图片边缘检测-缩放
+     */
+    imgMarginDetectionScale(scale) {
+      if (!this.properties.limitMove) return;
+      const currentScale = calcImageScale(this.data, scale);
+      this.imgMarginDetectionPosition(currentScale);
+    },
+    /**
+     * 图片边缘检测-位置
+     */
+    imgMarginDetectionPosition(scale) {
+      if (!this.properties.limitMove) return;
+      const { scale: currentScale, left, top } = calcImageOffset(this.data, scale);
+      dataUtil.setDiffData(this, { imageLeft: left, imageTop: top, scale: currentScale });
+    },
+    /**
+     * 开始图片触摸
+     */
+    imageTouchStart(e) {
+      this.setData({ _flagEndTouch: false });
+      const { imageLeft, imageTop } = this.data;
+      // 双指左指坐标
+      const clientXForLeft = e.touches[0].clientX;
+      const clientYForLeft = e.touches[0].clientY;
+
+      let _touchRelative = [];
+      if (e.touches.length === 1) {
+        // 单指拖动
+        _touchRelative[0] = {
+          x: clientXForLeft - imageLeft,
+          y: clientYForLeft - imageTop
+        };
+        this.setData({ _touchRelative });
+      } else {
+        // 双指右指坐标
+        const clientXForRight = e.touches[1].clientX;
+        const clientYForRight = e.touches[1].clientY;
+        // 双指放大
+        let width = Math.abs(clientXForLeft - clientXForRight);
+        let height = Math.abs(clientYForLeft - clientYForRight);
+        // 勾股定理求出斜边长度
+        const _hypotenuseLength = calcPythagoreanTheorem(width, height);
+
+        _touchRelative = [{
+          x: clientXForLeft - imageLeft,
+          y: clientYForLeft - imageTop
+        },
+        {
+          x: clientXForRight - imageLeft,
+          y: clientYForRight - imageTop
+        }
+        ];
+        this.setData({_touchRelative, _hypotenuseLength});
+      }
+    },
+    /**
+     * 图片放大旋转等操作
+     */
+    imageTouchMove(e) {
+      const {
+        _flagEndTouch,
+        _MOVE_THROTTLE_FLAG
+      } = this.data;
+      if (_flagEndTouch || !_MOVE_THROTTLE_FLAG) return;
+      // 双指左指坐标
+      const clientXForLeft = e.touches[0].clientX;
+      const clientYForLeft = e.touches[0].clientY;
+
+      dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: false });
+      this.moveThrottle();
+      this.moveDuring();
+      if (e.touches.length === 1) {
+        //单指拖动
+        const { left, top } = imageTouchMoveOfCalcOffset(this.data, clientXForLeft, clientYForLeft);
+        dataUtil.setDiffData(this, { imageLeft: left, imageTop: top});
+        // 图像边缘检测,防止截取到空白
+        this.imgMarginDetectionPosition();
+      } else {
+        // 双指右指坐标
+        const clientXForRight = e.touches[1].clientX;
+        const clientYForRight = e.touches[1].clientY;
+        // 双指放大
+        let width = Math.abs(clientXForLeft - clientXForRight),
+          height = Math.abs(clientYForLeft - clientYForRight),
+          // 勾股定理求出斜边长度
+          hypotenuse = calcPythagoreanTheorem(width, height), // 斜边
+          scale = this.data.scale * (hypotenuse / this.data._hypotenuseLength);
+        // 计算出真实缩放倍率
+        // 如果禁止缩放则倍率一直为1
+        if (this.properties.disableScale) {
+          scale = 1;
+        } else {
+          scale = scale <= this.properties.minRatio ? this.properties.minRatio : scale;
+          scale = scale >= this.properties.maxRatio ? this.properties.maxRatio : scale;
+          eventUtil.emit(this, 'linsizechange', {
+            imageWidth: this.data.imageWidth * scale,
+            imageHeight: this.data.imageHeight * scale
+          });
+        }
+
+        this.imgMarginDetectionScale(scale);
+        dataUtil.setDiffData(this, {
+          _hypotenuseLength: Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+          scale
+        });
+      }
+    },
+    /**
+     * 图片手指触摸结束
+     */
+    imageTouchEnd() {
+      dataUtil.setDiffData(this, { _flagEndTouch: true });
+      this.moveStop();
+    },
+
+    /**
+     * 检测剪裁框位置是否在允许的范围内(屏幕内)
+     */
+    cutDetectionPosition() {
+      const { cutX, cutY, _SYS_INFO, clipHeight, clipWidth } = this.data;
+      let cutDetectionPositionTop = () => {
+          //检测上边距是否在范围内
+          if (cutY < 0) {
+            dataUtil.setDiffData(this, { cutY: 0 });
+          }
+          if (cutY > _SYS_INFO.windowHeight - clipHeight) {
+            dataUtil.setDiffData(this, { cutY: _SYS_INFO.windowHeight - clipHeight });
+          }
+        },
+        cutDetectionPositionLeft = () => {
+          //检测左边距是否在范围内
+          if (cutX < 0) {
+            dataUtil.setDiffData(this, { cutX: 0 });
+          }
+          if (cutX > _SYS_INFO.windowWidth - clipWidth) {
+            dataUtil.setDiffData(this, { cutX: _SYS_INFO.windowWidth - clipWidth });
+          }
+        };
+      //裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+      if (cutY === null && cutX === null) {
+        let newCutY = (_SYS_INFO.windowHeight - clipHeight) * 0.5;
+        let newCutX = (_SYS_INFO.windowWidth - clipWidth) * 0.5;
+        dataUtil.setDiffData(this, {
+          cutX: newCutX, // 截取的框上边距
+          cutY: newCutY // 截取的框左边距
+        });
+      } else if (cutY !== null && cutX !== null) {
+        cutDetectionPositionTop();
+        cutDetectionPositionLeft();
+      } else if (cutY !== null && cutX === null) {
+        cutDetectionPositionTop();
+        dataUtil.setDiffData(this, { cutX: (_SYS_INFO.windowWidth - clipWidth) / 2 });
+      } else if (cutY === null && cutX !== null) {
+        cutDetectionPositionLeft();
+        dataUtil.setDiffData(this, { cutY: (_SYS_INFO.windowHeight - clipHeight) / 2 });
+      }
+    },
+    /**
+     * 改变截取框大小
+     */
+    computeCutSize() {
+      const { clipHeight, clipWidth, _SYS_INFO, cutX, cutY } = this.data;
+      if (clipWidth > _SYS_INFO.windowWidth) {
+        // 设置裁剪框宽度
+        dataUtil.setDiffData(this, { clipWidth: _SYS_INFO.windowWidth });
+      } else if (clipWidth + cutX > _SYS_INFO.windowWidth) {
+        dataUtil.setDiffData(this, { cutX: _SYS_INFO.windowWidth - cutX });
+      }
+      if (clipHeight > _SYS_INFO.windowHeight) {
+        // 设置裁剪框高度
+        dataUtil.setDiffData(this, { clipHeight: _SYS_INFO.windowHeight });
+      } else if (clipHeight + cutY > _SYS_INFO.windowHeight) {
+        dataUtil.setDiffData(this, { cutY: _SYS_INFO.windowHeight - cutY });
+      }
+    },
+    /**
+     * 获取图片数据
+     */
+    getImageData() {
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+      wx.showLoading({
+        title: '加载中'
+      });
+
+      const { clipHeight, clipWidth, _ctx, scale, imageLeft, imageTop, cutX, cutY, angle } = this.data;
+      let { CANVAS_HEIGHT, CANVAS_WIDTH } = this.data;
+      const { scaleRatio, imageUrl, quality, type: imageType } = this.properties;
+      // 绘制函数
+      const draw = () => {
+        // 图片真实大小
+        const imageWidth = this.data.imageWidth * scale * scaleRatio;
+        const imageHeight = this.data.imageHeight * scale * scaleRatio;
+        // canvas和图片的相对距离
+        const xpos = imageLeft - cutX;
+        const ypos = imageTop - cutY;
+        // 旋转画布
+        _ctx.translate(xpos * scaleRatio, ypos * scaleRatio);
+        _ctx.rotate((angle * Math.PI) / 180);
+        _ctx.drawImage(imageUrl, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
+        _ctx.draw(false, () => {
+          let params = {
+            width: clipWidth * scaleRatio,
+            height: Math.round(clipHeight * scaleRatio),
+            destWidth: clipWidth * scaleRatio,
+            destHeight: Math.round(clipHeight) * scaleRatio,
+            fileType: 'png',
+            quality
+          };
+
+          let data = {
+            url: '',
+            base64: '',
+            width: clipWidth * scaleRatio,
+            height: clipHeight * scaleRatio
+          };
+
+          if (IMAGE_TYPE.base64 === imageType) {
+            wx.canvasGetImageData({
+              canvasId: 'image-clipper',
+              x: 0,
+              y: 0,
+              width: clipWidth * scaleRatio,
+              height: Math.round(clipHeight * scaleRatio),
+              success: res => {
+                const arrayBuffer = new Uint8Array(res.data);
+                const base64 = wx.arrayBufferToBase64(arrayBuffer);
+                data.url = base64;
+                data.base64 = base64;
+                wx.hideLoading();
+                eventUtil.emit(this, 'linclip', data);
+              }
+            });
+          } else {
+            wx.canvasToTempFilePath({
+              ...params,
+              canvasId: 'image-clipper',
+              success: res => {
+                data.url = res.tempFilePath;
+                data.base64 = res.tempFilePath;
+                wx.hideLoading();
+                eventUtil.emit(this, 'linclip', data);
+              },
+              fail(res) {
+                throw res;
+              }
+            },
+            this
+            );
+          }
+        });
+      };
+
+      if (CANVAS_WIDTH !== clipWidth || CANVAS_HEIGHT !== clipHeight) {
+        CANVAS_WIDTH = clipWidth;
+        CANVAS_HEIGHT = clipHeight;
+        _ctx.draw();
+        setTimeout(() => {
+          draw();
+        }, 100);
+      } else {
+        draw();
+      }
+    },
+    /**
+     * 上传图片
+     */
+    uploadImage() {
+      wx.chooseImage({
+        count: 1,
+        sizeType: ['original', 'compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          const tempFilePaths = res.tempFilePaths;
+          this.setData({ imageUrl: tempFilePaths });
+        }
+      });
+    },
+    /**
+     * 工具栏旋转
+     */
+    rotate(event) {
+      if (this.properties.disableRotate) return;
+      if (!this.properties.imageUrl) {
+        wx.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+      const { rotateAngle } = this.properties;
+      const originAngle = this.data.angle;
+      const type = event.currentTarget.dataset.type;
+      if (type === 'along') {
+        this.setData({  angle: originAngle + rotateAngle });
+      } else {
+        this.setData({ angle: originAngle - rotateAngle});
+      }
+      eventUtil.emit(this, 'linrotate', { currentDeg: this.data.angle });
+    },
+    /**
+     * 关闭
+     */
+    close() {
+      this.setData({ show: false });
+    },
+  },
+
+  /**
+   * 组件的生命周期
+   */
+  lifetimes: {
+    ready() {
+      const _SYS_INFO = wx.getSystemInfoSync();
+      this.setData({ _SYS_INFO });
+      this.setCutInfo();
+      this.setCutCenter();
+      this.computeCutSize();
+      this.cutDetectionPosition();
+    }
+  }
+});
diff --git a/src/image-clipper/index.json b/src/image-clipper/index.json
new file mode 100644
index 00000000..e8cfaaf8
--- /dev/null
+++ b/src/image-clipper/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/src/image-clipper/index.less b/src/image-clipper/index.less
new file mode 100644
index 00000000..ac8fa2ad
--- /dev/null
+++ b/src/image-clipper/index.less
@@ -0,0 +1,131 @@
+.container {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    .clip-wrapper {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+
+        .clip-content {
+            width: 100vw;
+            height: 100vh;
+            position: absolute;
+            z-index: 99;
+            display: flex;
+            flex-direction: column;
+            pointer-events: none;
+
+            .flex-auto {
+                flex: auto;
+            }
+
+            .clip-content-top,
+            .clip-content-footer {
+                width: 100%;
+                pointer-events: none;
+            }
+
+            .clip-content-middle {
+                width: 100%;
+                height: 400rpx;
+                display: flex;
+                box-sizing: border-box;
+
+                .clip-content-middle-left,
+                .clip-content-middle-right {
+                    height: 100%;
+                }
+
+                .clip-content-middle-center {
+                    position: relative;
+                    border: 1px solid;
+                    box-sizing: border-box;
+
+                    .clip-edge {
+                        position: absolute;
+                        left: 6rpx;
+                        width: 34rpx;
+                        height: 34rpx;
+                        border: 2rpx solid #ffffff;
+                        pointer-events: auto;
+                        box-sizing: border-box;
+
+                        &.clip-edge-top-left {
+                            border-bottom-width: 0 !important;
+                            border-right-width: 0 !important;
+                        }
+
+                        &.clip-edge-top-right {
+                            border-bottom-width: 0 !important;
+                            border-left-width: 0 !important;
+                        }
+
+                        &.clip-edge-bottom-left {
+                            border-top-width: 0 !important;
+                            border-right-width: 0 !important;
+                        }
+
+                        &.clip-edge-bottom-right {
+                            border-top-width: 0 !important;
+                            border-left-width: 0 !important;
+                        }
+                    }
+                }
+            }
+        }
+
+        .bg-transparent {
+            background-color: rgba(0, 0, 0, 0.6);
+            transition-duration: 0.35s;
+        }
+    }
+
+    .cropper-image {
+        width: 100%;
+        border-style: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform-origin: center;
+    }
+
+    .clipper-canvas {
+        position: fixed;
+        z-index: 10;
+        left: -2000px;
+        top: -2000px;
+        pointer-events: none;
+    }
+
+    .footer-tools {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        z-index: 99;
+        .tools-icon {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            padding: 20rpx 40rpx;
+            box-sizing: border-box;
+            
+            image {
+                display: block;
+                width: 50rpx;
+                height: 50rpx;
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/image-clipper/index.wxml b/src/image-clipper/index.wxml
new file mode 100644
index 00000000..7bc12fd6
--- /dev/null
+++ b/src/image-clipper/index.wxml
@@ -0,0 +1,68 @@
+<view wx:if="{{show}}">
+    <view class="container l-class" catchtouchmove="{{true}}" style="z-index: {{zIndex}};">
+        <!-- 图片裁剪容器 -->
+        <view class="clip-wrapper" bind:touchstart="clipTouchStart" bind:touchmove="clipTouchMove" bind:touchend="clipTouchEnd">
+            <!-- 裁剪区域容器 -->
+            <!-- 分为三部分top、middle、footer，采用flex布局 -->
+            <!-- top：裁剪容器顶部占位区域 -->
+            <!-- middle：裁剪框所在区域 -->
+            <!-- footer：裁剪容器底部占位区域 -->
+            <!-- top、middle区域高度需计算，footer区域自适应 -->
+            <view class="clip-content">
+                <view class="clip-content-top bg-transparent" style="height: {{cutY}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                <view class="clip-content-middle" style="height: {{clipHeight}}px;">
+                    <!-- 此容器为裁剪框所在容器 -->
+                    <!-- 分为三部分left、center、right，采用flex布局 -->
+                    <!-- left：裁剪框左侧占位区域 -->
+                    <!-- center：裁剪框所在区域 -->
+                    <!-- right：裁剪框右侧占位区域 -->
+                    <!-- left、right需根据center区域的宽度而改变宽度 -->
+                    <view class="clip-content-middle-left bg-transparent" style="width: {{cutX}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                    <view class="clip-content-middle-center" style="width: {{clipWidth}}px;height: {{clipHeight}}px;transition-property: {{cutAnimation ? '' : 'background'}}">
+                        <view 
+                            class="clip-edge clip-edge-{{index < 2 ? 'top' : 'bottom'}}-{{index === 0 || index === 2 ? 'left' : 'right'}}" 
+                            wx:for="{{4}}" 
+                            wx:for-index="index" 
+                            wx:key="index" 
+                            style="left: {{index === 0 || index === 2 ? 0 : 'auto'}};right: {{index === 1 || index === 3 ? 0 : 'auto'}};top: {{index < 2 ? 0 : 'auto'}};bottom: {{index > 1 ? 0 : 'auto'}}"
+                        ></view>
+                    </view>
+                    <view class="clip-content-middle-right flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+                </view>
+                <view class="clip-content-footer flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
+            </view>
+        </view>
+        <!-- 图片容器 -->
+        <image 
+            class="cropper-image" 
+            binderror="imageLoad" 
+            bindload="imageLoad"
+            bind:touchstart="imageTouchStart"
+            bind:touchmove="imageTouchMove"
+            bind:touchend="imageTouchEnd"
+            src="{{imageUrl}}" 
+            mode="widthFix" 
+            wx:if="{{imageUrl}}" 
+            style="width: {{imageWidth ? imageWidth + 'px' : 'auto'}};height: {{imageHeight ? imageHeight + 'px' : 'auto'}};transform: translate3d({{imageLeft - imageWidth / 2}}px, {{imageTop - imageHeight / 2}}px,0) scale({{scale}}) rotate({{angle}}deg); transition-duration: {{cutAnimation ? 0.35 : 0}}s;" 
+        />
+        <!-- 图片绘制容器 -->
+        <canvas
+            canvas-id="image-clipper"
+            id="image-clipper"
+            :disable-scroll="true"
+            style="width: {{CANVAS_WIDTH * scaleRatio}}px; height:{{CANVAS_HEIGHT * scaleRatio}}px;"
+            class="clipper-canvas"
+        ></canvas>
+        <!-- 底部工具栏容器 -->
+        <view class="footer-tools">
+            <view class="tools-icon">
+                <image src="{{checkImageIcon}}" mut-bind:tap="uploadImage" wx:if="{{checkImage}}" />
+                <image src="{{rotateAlongIcon}}" mut-bind:tap="rotate" data-type="along" wx:if="{{rotateAlong}}" />
+                <image src="{{rotateInverseIcon}}" mut-bind:tap="rotate" data-type="inverse" wx:if="{{rotateInverse}}" />
+                <image src="{{sureIcon}}" mut-bind:tap="getImageData" wx:if="{{sure}}" />
+                <image src="{{closeIcon}}" mut-bind:tap="close" wx:if="{{close}}" />
+            </view>
+            <slot></slot>
+        </view>
+    </view>
+</view>
\ No newline at end of file
diff --git a/src/input/index.wxml b/src/input/index.wxml
index 0e1070d8..e29a7053 100644
--- a/src/input/index.wxml
+++ b/src/input/index.wxml
@@ -28,7 +28,7 @@
     bindblur="handleInputBlur"
     bindconfirm="handleInputConfirm" />
   <l-icon wx:if="{{showEye&&value}}" name="eye" catch:tap="onTapEyeIcon" size="40" l-class="l-eye l-eye-{{type}}"/>
-  <view class="close" wx:if="{{clear&&value}}" bindtap="onClearTap">
+  <view class="close" wx:if="{{clear&&value}}" mut-bind:tap="onClearTap">
     <view  class="close-icon">
       <l-icon  name="close" color="#fff" size="16" />
     </view>
diff --git a/src/list/index.wxml b/src/list/index.wxml
index 47600180..d4127b71 100644
--- a/src/list/index.wxml
+++ b/src/list/index.wxml
@@ -1,4 +1,4 @@
-<view class="l-list l-class" hover-class="{{isHover?'l-list-hover':''}}" hover-start-time="20" hover-stay-time="50"  style="{{gap?'padding:0 '+gap+'rpx;':''}} {{leftGap?'padding-left:'+leftGap+'rpx':''}} {{rightGap?'padding-right:'+rightGap+'rpx':''}}" bind:tap="tapcell" data-url="{{url}}" data-link-type="{{linkType}}">
+<view class="l-list l-class" hover-class="{{isHover?'l-list-hover':''}}" hover-start-time="20" hover-stay-time="50"  style="{{gap?'padding:0 '+gap+'rpx;':''}} {{leftGap?'padding-left:'+leftGap+'rpx':''}} {{rightGap?'padding-right:'+rightGap+'rpx':''}}" mut-bind:tap="tapcell" data-url="{{url}}" data-link-type="{{linkType}}">
     <!-- left -->
     <l-badge wx:if="{{(badgeCount > 0 || dotBadge ) && badgePosition ==='left'}}" value="{{badgeCount}}" dot="{{dotBadge}}" max-count="{{badgeMaxCount}}" number-type="{{badgeCountType}}">
         <template is="cell-left-main" data="{{image,icon,title,desc,tagContent,tagPosition,tagColor,tagShape,tagPlain,iconSize,iconColor}}" />
diff --git a/src/loadmore/index.wxml b/src/loadmore/index.wxml
index a2c99c1f..05137d68 100644
--- a/src/loadmore/index.wxml
+++ b/src/loadmore/index.wxml
@@ -1,6 +1,6 @@
 <!-- 内容插槽 -->
 <slot name="content" />
-<view bindtap="onLoadmore" wx:if="{{show}}">
+<view mut-bind:tap="onLoadmore" wx:if="{{show}}">
   <view wx:if="{{custom && type==='end'}}">
     <slot name="end" />
   </view>
diff --git a/src/notice-bar/index.wxml b/src/notice-bar/index.wxml
index 667a2a28..107e6d20 100644
--- a/src/notice-bar/index.wxml
+++ b/src/notice-bar/index.wxml
@@ -2,16 +2,16 @@
   <l-icon wx:if="{{ frontIconName }}" size="{{frontIconSize}}" color="{{frontIconColor}}" name="{{ frontIconName }}" class="l-noticebar-icon" l-class="l-icon-class" />
   <swiper autoplay vertical interval="{{4*speed}}" class="l-noticebar-content-wrap" wx:if="{{type=='swip'}}">
     <block wx:for="{{swipArr}}" wx:key="swip">
-      <swiper-item data-index="{{index}}" bindtap="onSwip">
+      <swiper-item data-index="{{index}}" mut-bind:tap="onSwip">
         {{item}}
       </swiper-item>
     </block>
   </swiper>
   <view class="l-noticebar-content-wrap l-noticebar-content-wrap-view" wx:else>
-    <view class="l-noticebar-content"  bindtap="handleTap" animation="{{ animationData }}">
+    <view class="l-noticebar-content"  mut-bind:tap="handleTap" animation="{{ animationData }}">
       <slot></slot>
     </view>
   </view>
-  <l-icon wx:if="{{ endIconName && !close }}" size="{{endIconSize}}" color="{{endIconColor}}" class="l-noticebar-operation" name="{{ endIconName }}" bindtap="onIconTap"  />
-  <l-icon wx:if="{{close}}" class="l-noticebar-operation" name="close" size="{{endIconSize}}" color="{{endIconColor}}" bindtap="onClose"/>
+  <l-icon wx:if="{{ endIconName && !close }}" size="{{endIconSize}}" color="{{endIconColor}}" class="l-noticebar-operation" name="{{ endIconName }}" mut-bind:tap="onIconTap"  />
+  <l-icon wx:if="{{close}}" class="l-noticebar-operation" name="close" size="{{endIconSize}}" color="{{endIconColor}}" mut-bind:tap="onClose"/>
 </view>
diff --git a/src/radio/index.wxml b/src/radio/index.wxml
index d3d60156..0deb03e4 100644
--- a/src/radio/index.wxml
+++ b/src/radio/index.wxml
@@ -1,4 +1,4 @@
-<view bind:tap="onRadioChangeTap" 
+<view mut-bind:tap="onRadioChangeTap"
       class="label label-{{placement}} {{disabled?'label-disabled l-disabled-class':'l-class'}}">
         <view class="radio"
               style="color:{{checked?selectColor:(disabled?disabledColor:color)}};font-size:{{size}}">
@@ -6,4 +6,4 @@
             <view wx:else class="iconfont {{checked?'icon-select':'icon-unselect'}}"></view>
         </view>
         <slot/>
-</view>
\ No newline at end of file
+</view>
diff --git a/src/rate/index.wxml b/src/rate/index.wxml
index 0edcb153..a80300d9 100644
--- a/src/rate/index.wxml
+++ b/src/rate/index.wxml
@@ -1,5 +1,5 @@
 <view class="l-rate l-class">
-    <view wx:for="{{count}}" wx:key="item" class="l-rate-star" data-index="{{index}}" bindtap="handleClick">
+    <view wx:for="{{count}}" wx:key="item" class="l-rate-star" data-index="{{index}}" mut-bind:tap="handleClick">
         <view class="icon-checked" wx:if="{{score > index}}" hover-class="none" hover-stop-propagation="false" data-rate="{{score-index}}" style="width:{{score-index<1?(score-index)*100:100}}%">
             <image wx:if="{{activeImage &&  inActiveImage}}" class="image-item l-class-image l-image-class" src="{{activeImage}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
             <l-icon wx:else name="{{name}}" l-class="l-class-icon l-icon-class" size="{{size}}" color="{{activeColor}}" />
@@ -7,4 +7,4 @@
         <image wx:if="{{activeImage &&  inActiveImage}}" class="image-item l-class-image l-image-class" src="{{inActiveImage}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
         <l-icon wx:else name="{{name}}" l-class="l-class-icon l-icon-class" size="{{size}}" color="{{inActiveColor}}"></l-icon>
     </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/src/search-bar/index.wxml b/src/search-bar/index.wxml
index 2828862b..74b1155c 100644
--- a/src/search-bar/index.wxml
+++ b/src/search-bar/index.wxml
@@ -1,6 +1,6 @@
 <view class="search-bar l-container-class">
   <slot name="before"/>
-  <view wx:if="{{frontText}}" class="icon-container" bind:tap="handleTapFrontText">
+  <view wx:if="{{frontText}}" class="icon-container" mut-bind:tap="handleTapFrontText">
     <text class="city">{{frontText}}</text>
     <l-icon name="down" color="#333" size="22" />
   </view>
@@ -23,7 +23,7 @@
         bindfocus="handleInputFocus"
         bindblur="handleInputBlur"
         bindconfirm="handleInputConfirm"/>
-    <view class="close-wrap" wx:if="{{clear&&value}}" bindtap="onClearTap">
+    <view class="close-wrap" wx:if="{{clear&&value}}" mut-bind:tap="onClearTap">
         <view class="close">
             <l-icon  name="close" color="#fff" size="15" />
         </view>
@@ -31,7 +31,7 @@
   </view>
   <view wx:if="{{showCancel}}"
         class="cancel l-cancel-class"
-        bindtap="onCancel">
+        mut-bind:tap="onCancel">
         {{cancelText}}
   </view>
   <slot name="after"/>
diff --git a/src/segment/index.wxml b/src/segment/index.wxml
index 74240e79..6c03fef3 100644
--- a/src/segment/index.wxml
+++ b/src/segment/index.wxml
@@ -5,14 +5,14 @@
         <view class="l-tabs-header {{( even && equalWidth)?'l-tabs-equal-header':'l-tabs-unequal-header'}}">
             <block wx:for="{{tabList}}" wx:key="key">
                 <view wx:if="{{item.tab}}" class="l-tabs-item {{( even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}"
-                    style="color:{{item.key===activeKey?activeColor:inactiveColor}};{{itemWidth?'width:'+ itemWidth +'rpx':'' }};{{itemHeight?'height:'+itemHeight+'rpx':''}}" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
+                    style="color:{{item.key===activeKey?activeColor:inactiveColor}};{{itemWidth?'width:'+ itemWidth +'rpx':'' }};{{itemHeight?'height:'+itemHeight+'rpx':''}}" data-key="{{item.key}}" data-index="{{index}}" mut-bind:tap="handleChange">
                     <l-badge l-self-class="badge-view" l-class="l-class-badge l-badge-class" wx:if="{{(item.badgeCount > 0 || item.dotBadge )}}" value="{{item.badgeCount}}" dot="{{item.dotBadge}}" max-count="{{item.badgeMaxCount}}" number-type="{{item.badgeCountType}}">
                         <template is="tab-item" data="{{item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine}}" />
                     </l-badge>
                     <template is="tab-item" data="{{item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine}}" wx:else />
                     <view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
                 </view>
-                <view wx:else class="l-tabs-item {{(even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
+                <view wx:else class="l-tabs-item {{(even && equalWidth)?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" data-key="{{item.key}}" data-index="{{index}}" mut-bind:tap="handleChange">
                     <slot name="{{item.key}}"></slot>
                     <view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
                 </view>
diff --git a/src/slide-view/index.wxml b/src/slide-view/index.wxml
index c0bc342f..ec640abf 100644
--- a/src/slide-view/index.wxml
+++ b/src/slide-view/index.wxml
@@ -17,8 +17,8 @@
     <view class="left"  style="width: {{width}}rpx; height: {{height}}rpx;">
       <slot name="left"></slot>
     </view>
-    <view class="right" bindtap="onRightTap" style="width: {{slideWidth}}rpx; height: {{height}}rpx;">
+    <view class="right" mut-bind:tap="onRightTap" style="width: {{slideWidth}}rpx; height: {{height}}rpx;">
       <slot name="right"></slot>
     </view>
   </movable-view>
-</movable-area>
\ No newline at end of file
+</movable-area>
diff --git a/src/status-show/index.wxml b/src/status-show/index.wxml
index 90fabf57..deecf395 100644
--- a/src/status-show/index.wxml
+++ b/src/status-show/index.wxml
@@ -1,4 +1,4 @@
-<view wx:if="{{show}}" class="l-status-container l-class {{fullScreen ? 'content': ''}}" style="{{'background:'+bgColor}};{{fullScreen ?'align-items:center;':''}}" bind:tap="tapStatusShow">
+<view wx:if="{{show}}" class="l-status-container l-class {{fullScreen ? 'content': ''}}" style="{{'background:'+bgColor}};{{fullScreen ?'align-items:center;':''}}" mut-bind:tap="tapStatusShow">
   <block wx:if="{{custom}}">
     <slot />
   </block>
@@ -17,4 +17,4 @@
       <view>去逛逛</view>
     </l-button>
   </block>
-</view>
\ No newline at end of file
+</view>
diff --git a/src/tabs/index.wxml b/src/tabs/index.wxml
index 44fce1f5..5f290b23 100644
--- a/src/tabs/index.wxml
+++ b/src/tabs/index.wxml
@@ -16,11 +16,11 @@
         wx:key="key"
         data-key="{{item.key}}"
         data-index="{{index}}"
-        bind:tap="handleChange">
+        mut-bind:tap="handleChange">
         <image wx:if="{{ item.image.activeImage || item.image.defaultImage }}"
                src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}"
                class="l-tab-image l-class-tabimage l-tabimage-class"/>
-        <l-icon wx:if="{{item.icon}}" 
+        <l-icon wx:if="{{item.icon}}"
                 l-class="l-class-icon l-icon-class {{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}"
                 name="{{item.icon}}"
                 color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
diff --git a/src/tag/index.wxml b/src/tag/index.wxml
index 1f9d79af..011c7b68 100644
--- a/src/tag/index.wxml
+++ b/src/tag/index.wxml
@@ -1,6 +1,6 @@
 <view style="display:flex">
   <view class="l-tag {{type==='touch'?'l-tag-touch':''}} {{plain?'l-tag-plain-'+ size:'l-tag-'+size}} {{disable?'l-tag-disable':''}} {{select?'select l-select-class':'l-class'}} {{plain?'l-tag-plain':''}}  {{'l-tag-'+size+'-'+ shape}}" style="{{height?'line-height:'+height+'rpx;height:'+height+'rpx;':''}}{{plain?'color:'+fontColor+';border-color:'+fontColor:'background-color:'+bgColor+';color:'+fontColor}}"
-    bindtap="handleTap">
+    mut-bind:tap="handleTap">
     <view class="{{location==='left'?'content':'content-l'}}" style="{{iconName?'line-height:0':''}}">
       <l-icon wx:if="{{icon}}" style="{{location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" name="{{icon}}" size="{{iconSize}}" color="{{iconColor}}" />
       <image style="{{location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" wx:if="{{image}}" src="{{image}}" class="{{'tag-image-'+size}} l-image-class"></image>