feat(pinch): alloy finger实现图片的pinch放大缩小

.eslintcache

@@ -1 +1 @@
-[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js":"1","/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js":"2"},{"size":335,"mtime":1624344979998,"results":"3","hashOfConfig":"4"},{"size":1742,"mtime":1624344980012,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"178d5hk",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js",[],"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js",[]]
+[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/mock/rich-text.js":"1","/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js":"2"},{"size":1166,"mtime":1624412295740,"results":"3","hashOfConfig":"4"},{"size":1734,"mtime":1624404795201,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"178d5hk",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/mock/rich-text.js",[],"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js",[]]

CHANGELOG.md

@@ -1,4 +1,10 @@
-# [0.1.0](https://gitee.com/mongos/uni-cli-template/compare/v1.0.1...v0.1.0) (2021-06-23)
+# [0.1.0](https://gitee.com/mongos/uni-cli-template/compare/v1.0.1...v0.1.0) (2021-06-24)
+
+### 🌟 新功能
+范围|描述|commitId
+--|--|--
+ 富文本插件 | 富文本插件demo测试 | [ed3d644](https://gitee.com/mongos/uni-cli-template/commits/ed3d644)
+
 
 ### chore
 范围|描述|commitId

package.json

@@ -62,6 +62,7 @@
     "@dcloudio/uni-stat": "^2.0.0-31920210609001",
     "@tailwindcss/postcss7-compat": "^2.2.0",
     "@vue/shared": "^3.0.0",
+    "alloyfinger": "^0.1.16",
     "autoprefixer": "^9",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.5",
@@ -92,7 +93,6 @@
     "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "vue-cli-plugin-mock": "^1.0.3",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.11.0",
@@ -114,6 +114,7 @@
     "sass": "^1.35.1",
     "sass-loader": "10",
     "vue-cli-plugin-commitlint": "~1.0.12",
+    "vue-cli-plugin-mock": "^1.0.3",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

public/index.html

@@ -23,7 +23,11 @@
         </noscript>
         <div id="app"></div>
         <!-- built files will be auto injected -->
-
+        <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
+        <script>
+  // VConsole 默认会挂载到 `window.VConsole` 上
+  var vConsole = new window.VConsole();
+</script>
     </body>
 
 </html>

src/main.js

@@ -3,9 +3,12 @@ import App from './App';
 import './registerServiceWorker';
 import uView from 'uview-ui';
 import './common/styles/index.css';
+import AlloyFinger from 'alloyfinger';
+import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue';
 
 Vue.config.productionTip = false;
 Vue.use(uView);
+Vue.use(AlloyFingerPlugin, { AlloyFinger });
 
 App.mpType = 'app';
 

src/pages.json

@@ -17,6 +17,12 @@
       "style": {
         "navigationBarTitleText": "rich-text 测试"
       }
+    },
+    {
+      "path": "pages/pinch/pinch",
+      "style": {
+        "navigationBarTitleText": "pinch 测试"
+      }
     }
   ],
   "globalStyle": {

src/pages/index/index.vue

@@ -3,6 +3,7 @@
     <view>
       <u-button type="primary" size="default" @tap="$u.route('/pages/plugin-test/plugin-test')">iframe 验证</u-button>
       <u-button type="error" size="default" class="my-3" @tap="$u.route('/pages/rich-text/rich-text')">rich-text 验证</u-button>
+      <u-button type="warning" size="default" class="my-3" @tap="$u.route('/pages/pinch/pinch')">pinch 事件验证</u-button>
     </view>
   </view>
 </template>

src/pages/pinch/pinch.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="container flex flex-row items-center justify-center">
+    <image
+      class="w-1/2"
+      mode="aspectFit"
+      src="https://lupic.cdn.bcebos.com/20200412/3026529107_14_800_566.jpg"
+      v-finger:pinch="handlePinch"
+      v-finger:multipoint-start="handlePinchStart"
+      :style="{ transform: `scale(${scale})` }"
+      id="image"
+    ></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      initScale: 1,
+      scale: 1,
+      element: null,
+    };
+  },
+
+  mounted() {
+    this.element = document.getElementById('image');
+  },
+
+  methods: {
+    handlePinchStart() {
+      console.log(this.element.style.transform);
+      // eslint-disable-next-line no-useless-escape
+      const reg = /scale\(([0-9]*[\.]?[0-9]*)\)/gi;
+      const scale = this.element.style.transform;
+      if (reg.test(scale)) {
+        this.initScale = RegExp.$1;
+        console.log(this.initScale);
+      }
+      // this.scale = this.element.scaleX;
+    },
+
+    handlePinch(event) {
+      console.log(typeof event.zoom, typeof this.initScale, this.initScale);
+      this.scale = this.initScale * event.zoom;
+      console.log('this.scale:', this.scale);
+    },
+  },
+};
+</script>

yarn.lock

@@ -2613,6 +2613,11 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+alloyfinger@^0.1.16:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/alloyfinger/-/alloyfinger-0.1.16.tgz#8d5d46073cf1fedba5f446e666bc4b3925b8b8b5"
+  integrity sha512-AfsLALs929WQsjSk1pbysoiVU3bgm/4k1wdZDtMQ7uI7b8XweqCCnUiBYqqdp8uPZ1fBq/+LCJhgUlhd90FssQ==
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/alphanum-sort/download/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"