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

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

小图的缩略

大图的样式

使用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-600',

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

  　　　　　　　　w: 600,

  　　　　　　　　h: 400

  　　　　　　
},

　　　　　　 {

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

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

  　　　　　　　　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组件使用方法介绍的详细内容，更多请关注0133技术站其它相关文章！