手势转盘

• http://alloyteam.github.io/PhyTouch/example/rotate.html

手势

• http://alloyteam.github.io/AlloyFinger/

JS Zip (JS 打包)

<!-- 添加script -->
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip-utils/0.1.0/jszip-utils.min.js"></script>

<template>
  <div class="comp-zip-download">
    <div class="panel">
      <div @click="download">
        <slot v-if="!loading"></slot>
      </div>
      <div class="tip">{{ tipText }}</div>
      <el-progress
        style="width: 100%"
        :percentage="parseInt((progress / list.length) * 100)"
        v-if="loading"
      ></el-progress>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      require: true,
    },
    url: {
      type: String,
      default: "src",
    },
    path: {
      type: String,
      default: "path",
    },
    fileName: {
      type: String,
      default: "fileName",
    },
    name: {
      type: String,
      default: "data",
    },
  },
  data() {
    return {
      loading: false,
      progress: 0,
      tipText: "",
    };
  },
  methods: {
    download() {
      let that = this;
      that.tipText = "下载中...";
      let total = this.list.length;
      this.progress = 0;
      this.loading = true;
      let zip = new JSZip();
      // map 存储 folder 对象
      let folderMap = {};
      let promiseArr = this.list.map(async (data) => {
        return new Promise((resolve, reject) => {
          JSZipUtils.getBinaryContent(data[that.url], function(err, binData) {
            ++that.progress;
            if (err && that.progress < total) {
              console.log(err);
              // throw new Error('资源请求失败')
              reject();
            } else {
              // 第一次实例化 folder 对象
              let path = data[that.path];
              if (!folderMap[path]) {
                folderMap[path] = zip.folder(path);
              }
              let pf = folderMap[path];
              // 第三个参数必须设置，否则下载的文件将产生错误
              pf.file(data[that.fileName], binData, { binary: true });
              resolve();
            }
          });
        });
      });
      Promise.all(promiseArr)
        .then(() => {
          if (that.progress === total) {
            console.log("请稍等，数据打包中");
            that.tipText = "请稍等，数据打包中";
            zip.generateAsync({ type: "blob" }).then(function(content) {
              // 下载文件
              const link = document.createElement("a");
              link.href = window.URL.createObjectURL(content);
              link.download = `${that.name}.zip`;
              link.click();
              // document.body.removeChild(link)

              that.loading = false;
              that.progress = 0;
              that.tipText = "";
            });
          }
        })
        .catch((err) => {
          console.log(err);
          // that.tipText = '下载失败，请检查图片资源'
          that.tipText = "";
          that.loading = false;
          that.$message({
            type: "error",
            message: "下载失败，请检查图片资源",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.comp-zip-download {
  .tip {
    text-decoration: none !important;
    margin-top: 10px;
    font-size: 12px;
    &:hover {
      color: #333;
    }
  }
  .panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>

给 node_modules 包源码打补丁 patch-package

npm postinstall script 是 cnpm i 或者 yarn add 以后执行的预处理脚本