基于 viewerjs 封装的vue 图片预览指令
Demo 预览
umd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-viewer</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.js"></script>
<link href="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.css" rel="stylesheet">
<script src="../dist/index.js"></script>
</head>
<style>
img {
width: 200px;
}
</style>
<body>
<div id="app" v-img='options'>
<img :src="src" v-for='src in imgList' alt="" srcset="">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
imgList: [],
options: {
zIndex: 22
}
},
mounted() {
this.imgList = [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526576170596&di=f8268d1ee572f19db014473949299965&imgtype=0&src=http%3A%2F%2Fimg3.xiazaizhijia.com%2Fwalls%2F20150417%2Fmid_84422024ff063d3.jpg',
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526576170805&di=165c9328f11c449fc398a5af968c9fbd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dc9d9632d69d0f703f2bf9d9c61823451%2Feaf81a4c510fd9f994e060532e2dd42a2834a410.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526576170805&di=0c00dd682aaa8cb09a573f354490ac70&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F57d7cda31de02.jpg"
]
}
})
</script>
</html>Installation
npm install @hanyk/rc-viewerUsage
import Vue from 'vue'
import vImg from '@hanyk/v-img'
Vue.use(vImg)<template>
<div v-img >
<img src='xxxxxx'>
<div>
<img src='xxxxxx'>
</div>
</div>
or
<div v-img='options' ref='viewer'>
<img src='xxxxxx'>
<div>
<img src='xxxxxx'>
</div>
</div> data(){
options:{
zIndex: 100000000
}
}当前viewer实例 原生dom可用 this.$refs.viewer.viewer vue组件 可用this.$refs.viewer.$el.viewer 来获取
Options
参考 viewerjs