vue v-view图片预览插件 如何给其加入下载按钮

Posted 2023-05-04

参考技术A <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>

vue-preview vue图片预览插件+缩略图样式

一、安装

npm i vue-preview -S

二、main.js中  导入组件

//vue-preview 开始
import VuePreview from ‘vue-preview‘;

// defalut install
Vue.use(VuePreview)

//vue-preview 结束

三、代码

1、要为缩略图设定样式 ，要在全局样式中设定，如下：

/*图片预览 缩略图*/
.preview figure 
  float: left;
  width: 30%;
  height:calc(30vw - 0px);
  margin: 1.5%;


.preview figure img 
  width: 100%;

2、组件代码：

<template>
  <div>

      <!--预览-->
      <vue-preview :slides="setPreview()" class="preview"></vue-preview>

  </div>
</template>

<script>

  export default 
      created () 
        let  pid = this.$route.params.id;
        //发送请求
        this.$axios.get(‘https://www.apiopen.top/satinGodApi?type=3&page=‘ + pid)
          .then(res=>
              this.details = res.data.data;
          )
          .catch(console.log)
      ,
      data () 
          return 
              details:[],
          
      ,
      methods:
        setPreview:function () 
          //给预览图设置参数
          this.details.forEach( img => 
            img.src = img.header;
            img.msrc = img.header;
            img.alt = img.top_commentsName;
            img.title = img.top_commentsName;
            img.w = 200;//这是大图的宽
            img.h = 200;
           )
          return this.details;
        
      
  

</script>

<style scoped>
/*这里的样式无法控制缩略图*/
</style>

四、效果
1、缩略图

2、预览图