话不多说先上图
具体代码如下：
<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>
