起因：因公司業(yè)務(wù)需求彪置，需要用到一個(gè)圖片預(yù)覽功能，先在網(wǎng)上找了好多蝇恶，發(fā)現(xiàn)都不是太滿足要求所以拳魁，先貼出來(lái)有哪些
1.針對(duì)PC端的vue.js圖片預(yù)覽組件
安裝
npm install enlargeimg --save-dev
import enlargeimg from 'enlargeimg';
基礎(chǔ)用法
<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'
},
]
}
},
}
注意事項(xiàng)
圖片地址為path
此組件主要針對(duì)PC端，手機(jī)端未測(cè)試撮弧。
2.移動(dòng)端Vue.js圖片預(yù)覽插件
vue-picture-preview
移動(dòng)端Vue.js圖片預(yù)覽插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
安裝
npm
npm install --save vue-picture-preview
使用
首先在項(xiàng)目的入口文件中引入, 調(diào)用 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>
對(duì)于所有圖片都可以使用 v-preview 指令來(lái)綁定他們的預(yù)覽功能
<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) 設(shè)置 isTitleEnable="false" 將禁用水平導(dǎo)航. 默認(rèn)值: true.
isHorizontalNavEnable: (boolean, optional) 設(shè)置 isHorizontalNavEnable="false" 將禁用底部標(biāo)題. 默認(rèn)值: true.
3.Overview
Demo
Github
安裝
npm install vue-fancybox --save
import fancyBox from 'vue-fancybox';
基礎(chǔ)用法
<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);
}
}
}
選項(xiàng)
fancyBox Parameter:
| Parameter | Description |
|---|---|
| e.target | 當(dāng)前點(diǎn)擊的圖片 |
| 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('已到達(dá)最后一張');
} else {
this.nowIndex++;
}
},
prev() {
if (this.nowIndex == 0) {
this.$Message.warning('已到達(dá)第一張');
} 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傳入媒體路徑即可贿衍。
總結(jié)
發(fā)現(xiàn)有的需要手動(dòng)設(shè)置圖片的大小授舟，并不是自適應(yīng)的，這是一個(gè)硬傷贸辈。
如果有好的圖片預(yù)覽作品歡迎貢獻(xiàn)释树。
青團(tuán)社招聘：
招聘崗位：高級(jí)前端開發(fā)工程師P5及以上
簡(jiǎn)歷投遞到：hr@qtshe.com || haochen@qtshe.com
職位描述：
1、建設(shè)工具擎淤、提煉組件奢啥、抽象框架，促進(jìn)前端工程化嘴拢、服務(wù)化桩盲，持續(xù)提升研發(fā)效率，保障線上產(chǎn)品質(zhì)量
2席吴、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施赌结，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺(tái)，指導(dǎo)落實(shí)解決方案
3孝冒、持續(xù)優(yōu)化前端頁(yè)面性能姑曙，維護(hù)前端代碼規(guī)范，鉆研各種前沿技術(shù)和創(chuàng)新交互迈倍，增強(qiáng)用戶體驗(yàn)伤靠、開拓前端能力邊界
