起因：因公司业务需求，需要用到一个图片预览功能，先在网上找了好多，发现都不是太满足要求所以，先贴出来有哪些
1.针对PC端的vue.js图片预览组件
安装
npm install enlargeimg --save-dev
import enlargeimg from 'enlargeimg';
基础用法
<enlargeImg :data="files"></enlargeImg>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App',
files:[
{
path:'http://img4q.duitang.com/uploads/item/201311/01/20131101141757_tunaj.png'
},
{
path:'http://img5.duitang.com/uploads/item/201503/22/20150322122457_EQ3NP.thumb.700_0.jpeg'
},
{
path:'http://tupian.enterdesk.com/uploadfile/2013/1219/20131219053302481.jpg'
},
]
}
},
}
注意事项
图片地址为path
此组件主要针对PC端，手机端未测试。
2.移动端Vue.js图片预览插件
vue-picture-preview
移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
安装
npm
npm install --save vue-picture-preview
使用
首先在项目的入口文件中引入, 调用 Vue.use 安装。
import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)
在根组件添加 lg-preview 组件的位置
<!-- Vue root compoment template -->
<div id="app">
<router-view></router-view>
<lg-preview></lg-preview>
</div>
对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能
<img v-for="img in imgs" v-preview="img" :src="img">
export default {
data () {
return {
imgs: ['http://covteam.u.qiniudn.com/ka2.jpg', 'http://covteam.u.qiniudn.com/poster.png']
}
}
}
API
isTitleEnable: (boolean, optional) 设置 isTitleEnable="false" 将禁用水平导航. 默认值: true.
isHorizontalNavEnable: (boolean, optional) 设置 isHorizontalNavEnable="false" 将禁用底部标题. 默认值: true.
3.Overview
Demo
Github
安装
npm install vue-fancybox --save
import fancyBox from 'vue-fancybox';
基础用法
<div class="list" v-for="(n, index) in imageList" :data-index="index">
<img @click="open($event)" :src="n.url">
</div>
export default {
data () {
return {
imageList: [
{ width: 900, height: 675, url: 'http://ocm0knkb1.bkt.clouddn.com/1-1.jpg' },
{ width: 601, height: 1024, url: 'http://ocm0knkb1.bkt.clouddn.com/1-2.jpg' },
{ width: 1024, height: 700, url: 'http://ocm0knkb1.bkt.clouddn.com/1-3.jpg' }
]
}
},
methods: {
open (e) {
fancyBox(e.target, this.imageList);
}
}
}
选项
fancyBox Parameter:
| Parameter | Description |
|---|---|
| e.target | 当前点击的图片 |
| this.imageList | 所有的图片列表 |
this.imageList Options:
| Option | Description | Type |
|---|---|---|
| width | 图片的宽度 | Number |
| height | 图片的高度 | Number |
| url | 图片的的地址 | String |
例子
$ cd example
$ npm install
$ npm run dev
注意
需要postcss-salad配合
4.基于Vue.js, iview的全屏图片、视频浏览组件
先上效果图
image.png
再上源代码
<template>
<transition name="fade">
<div class="media-wrapper" v-if="seeMedia">
<Button type="text" class="media-close" shape="circle" icon="close" @click="close"></Button>
<div class="media-controller">
<Button-group shape='circle'>
<Button size="large" type="ghost" icon="ios-skipbackward" @click.prevent="prev"></Button>
<Button size="large" type="ghost" icon="ios-skipforward" @click.prevent="next"></Button>
</Button-group>
</div>
<div class="media-content">
<div v-for="(item,index) in data" :key="index" :class="type(index)">
<img :src='item' v-if="isImg(item)" @click="toggle(index)">
<video :src="item" v-else controls="controls" @click="toggle(index)">
</video>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'cjMedia',
data: function () {
return {
nowIndex: 0,
data: [
'/src/test/media/movie.ogg', '/src/test/media/1.jpg', '/src/test/media/2.jpg'
]
}
},
props: {
// data:{
// type:Array
// }
},
methods: {
next() {
if (this.nowIndex == this.data.length - 1) {
this.$Message.warning('已到达最后一张');
} else {
this.nowIndex++;
}
},
prev() {
if (this.nowIndex == 0) {
this.$Message.warning('已到达第一张');
} else {
this.nowIndex--;
}
},
type(index) {
if (index == this.nowIndex) {
return 'media-center'
} else if (index - this.nowIndex == 1) {
return 'media-right'
} else if (index - this.nowIndex == -1) {
return 'media-left'
} else {
return 'media-hide'
}
},
isImg(item) {
var ext = item.substr(item.length - 3, 3);
var flag = ext == ('jpg' || 'png' || 'gif') ? true : false;
return flag;
},
toggle(index) {
if (index - this.nowIndex == 1) {
this.nowIndex++;
} else if (index - this.nowIndex == -1) {
this.nowIndex--;
}
},
close() {
this.$store.commit('SET_MEDIA', false);
this.nowIndex = 0;
}
},
computed: {
seeMedia() {
return this.$store.state.seeMedia;
}
}
}
</script>
<style lang="scss">
.media-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.52);
z-index: 1010;
i {
color: #fff
}
.media-controller {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%)
}
.media-close {
position: absolute;
right: 5px;
top: 5px;
i {
font-size: 30px;
}
}
.media-content {
div {
position: absolute;
top: 50%; // background: green;
color: #fff;
text-align: center;
font-size: 30px;
transition: all .56s ease;
img {
max-width: 100%;
max-height: 100%
}
video {
width: 100%;
}
}
.media-center {
height: 50%;
width: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1011;
}
.media-left,
.media-right {
width: 25%;
height: 35%;
filter: grayscale(90%);
}
.media-right {
left: 100%;
transform: translate(-105%, -50%);
}
.media-left {
left: 0;
transform: translate(5%, -50%);
}
.media-hide {
height: 0;
width: 0;
left: 50%;
z-index: 1010;
opacity: 0;
}
}
}
</style>
data传入媒体路径即可。
总结
发现有的需要手动设置图片的大小，并不是自适应的，这是一个硬伤。
如果有好的图片预览作品欢迎贡献。
青团社招聘：
招聘岗位：高级前端开发工程师P5及以上
简历投递到：hr@qtshe.com || haochen@qtshe.com
职位描述：
1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量
2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案
3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界
