vue Vue-preview组件使用方法介绍

Vue-preview是一个非常好用的移动端图片预览组件,简单易用是它的一大特点,支持滑动换图,支持手势缩放,显示当前时第几张和总共多少张。

如果我们在 vue 中想使用缩略图的话,可以使用 vue-preview 的插件

小图的缩略

1.jpg

大图的样式

2.jpg

使用vue-preview的方法:

下 载:

npm i vue-preview

使用方法: 在 src 目录中的 main.js 中使用

import VuePreview from 'vue-preview'
Vue.use(VuePreview) 

在需要缩略图的组件中,使用

template 中写入

<div>
 <vue-preview :slides="list" @close="handleClose"></vue-preview>
</div>

备注:list 就是我们的图片的循环

在 script 中使用 的 exprot default {} 中的 data 中使用的 list 的数据格式

list: [

       {

          src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',

          msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',

          w: 600,

          h: 400

        
},

       {

          src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',

          msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',

          w: 1200,

          h: 900

        
}

    ]

备注:这个 msrc , w , h 这三个属性是必填的,少一个都不行

vue-preview 的样式只能是全局样式,在局部均无法使用

这样的话,我们的效果就可以在页面中,能看出来,但是我们的排版需要注意,我们只能在 全局环境下进行排版,最好把下面的样式变为公共样式 

  .my-gallery:after {
	    content: "";
	    display: block;
	    visibility: hidden;
	    clear: both;
	    height: 0
}

.my-gallery figure {
	    width: 100px;
	    height: 100px;
	    float: left;
	    margin: .100px;
	    padding: 0;
	    box-shadow: 0 0 .100px #ccc;
}

前端开发学习请关注HTML中文网

以上就是vue Vue-preview组件使用方法介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏