vue-AlloyFinger-手势缩放全文内容字体大小

安装

yarn install alloyfinger

main.js

import AlloyFinger from 'alloyfinger'
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue'
Vue.use(AlloyFingerPlugin,{
  AlloyFinger
})

使用方式

 <!-- 文章信息 -->
<template>
  <div v-finger:pinch="pinchHandler">
  ......
  </div>
</template>

先用querySelectorAll选中所有的字体元素，遍历这个数组，获取该数组元素样式的fontSize，
再乘以缩放的倍数赋值回去

    //手势缩放
    pinchHandler(evt) {
      var span = document.querySelectorAll('span');
      console.log(span);
      span.forEach(element => {
        if (!this.$utils.isBlank(element.style.fontSize)) {
          var size = element.style.fontSize;
          size = size.substr(0, size.length - 2);
          element.style.fontSize = size * evt.scale + "pt";
        } else if (element.style.fontSize == "") {
          var size = "18";
          element.style.fontSize = size * evt.scale + "pt";
        }
      });
      var p = document.querySelectorAll('p');
      p.forEach(element => {
        if (!this.$utils.isBlank(element.style.fontSize)) {
          var size = element.style.fontSize;
          size = size.substr(0, size.length - 2);
          element.style.fontSize = size * evt.scale + "pt";
          element.style.lineHeight = size * evt.scale + 8 + "pt";
        }
      });
    },

参考

vue手势AlloyFinger用法