2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

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

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、预览图

 

本文来源于网络:查看 >
« 上一篇:<strong>标签--格式化标签
» 下一篇:深入V8引擎-AST(1)
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-03-07中奖名单(每日10名)
×添加代码片段