话不多说先上图

具体代码如下：

<template>

  <div v-viewer="{'toolbar': true,'navbar': false, 'title': false}"

       class="images clearfix"

       @ready="readys"

       @shown="shown">

    <slot></slot>

  </div>

</template>

<script>

export default {

  name: "Preview",

  data() {

    return {};

  },

  mounted() {

    this.$nextTick(() => {

    });

  },

  methods: {

    readys() {

      var toolbar = this.jquery(this.$el.viewer.viewer).find(".viewer-toolbar");

      var downLoadEle = this.jquery('<li role="button" class="downLoadImg" data-viewer-action="downLoadImg" style="display: flex;align-items: center;justify-content: center;"><i style="color: white;font-size: 14px;" class="iconfont icontupiandanchuang-xiazaitubiao1"></i></li>');

      if (toolbar.find("downLoadImg").length != 0) {

        return;

      }

      toolbar.find("ul").append(downLoadEle);

    },

    shown() {

      var self = this;

      this.jquery(".downLoadImg").off().on("click", function() {

        location.href = self.jquery(".viewer-canvas img").attr("src");

      });

    }

  }

};

</script>

<style scoped>

</style>