html preview安装如何使用,vue Vue-preview组件使用方法介绍

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

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

小图的缩略

大图的样式

使用vue-preview的方法：

下 载：npm i vue-preview

使用方法： 在 src 目录中的 main.js 中使用import VuePreview from 'vue-preview'

Vue.use(VuePreview)

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

template 中写入

备注：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中文网