vue-gallery是一款支援圖片預覽的前端外掛,測試後是可以使用的,我們來介紹一下如何使用vue-gallery
參考網址:vue-gallery - npm
第1步:安裝vue-gallery
npm install vue-gallery --save
第2步:在vue檔案中的匯入
<script>
import VueGallery from 'vue-gallery';
export default {
components: {VueGallery}
}
</script>
第3步:測試案例,在單獨的vue檔案中應用
<template>
<div>
<gallery :images="images" :index="index" @close="index = null"></gallery>
<div
class="image"
v-for="(image, imageIndex) in images"
:key="imageIndex"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
></div>
</div>
</template>
<script>
import VueGallery from 'vue-gallery';
export default {
data: function () {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff',
],
index: null
};
},
components: {
'gallery': VueGallery
},
}
</script>
<style scoped>
.image {
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #ebebeb;
margin: 5px;
}
</style>
下面程式碼是結合element-ui和el-image來使用vue-gallery。大家可以直接拿下面的程式碼測試,先截圖,然後附上程式碼
<template>
<div class="about">
<div>
<el-row>
<el-col :span="24">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="名稱">
<el-input v-model="formInline.user" placeholder="請輸入電影名稱"></el-input>
</el-form-item>
<el-form-item label="狀態">
<el-select v-model="formInline.region" placeholder="請選擇電影狀態">
<el-option label="待放映" value="0"></el-option>
<el-option label="已上映" value="1"></el-option>
<el-option label="停止上映" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
<el-button type="warning">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div style="height: 10px;"></div>
<div>
<el-row>
<el-col :span="24">
<el-button type="danger" @click="onSubmit">新增</el-button>
<el-button type="primary" @click="onSubmit">批次刪除</el-button>
</el-col>
</el-row>
</div>
<div style="height: 10px;"></div>
<el-row>
<el-col :span="24">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="中文名稱" width="180"></el-table-column>
<el-table-column prop="english" label="英文名稱" width="180" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="date" label="上映時間" width="180"></el-table-column>
<el-table-column prop="times" label="電影時長" width="180"></el-table-column>
<el-table-column prop="category" label="電影型別" width="180">
<template slot-scope="scope">
<el-tag type="danger" v-for="(item,index) in scope.row.category" :key="index" style="margin-right:5px;">{{ item }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="language" label="語言型別" width="180"></el-table-column>
<el-table-column prop="desc" label="電影簡介" width="180" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="img" label="電影圖片" width="180">
<template slot-scope="scope">
<el-image style="width: 40px; height: 40px; border-radius: 5px;" fit="cover" :src="scope.row.img" @click="openGallery(0, scope.row.img)"></el-image>
</template>
</el-table-column>
<el-table-column prop="area" label="製作區域" width="180"></el-table-column>
<el-table-column prop="status" label="電影狀態" width="180">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === '待放映'">{{ scope.row.status }}</el-tag>
<el-tag v-else-if="scope.row.status === '已上映'" type="success">{{ scope.row.status }}</el-tag>
<el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="100">
<template>
<el-button size="small" type="text">編輯</el-button>
<el-button size="small" type="text">刪除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div style="height:10px;"></div>
<el-row>
<el-col :span="24" style="text-align: right;">
<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
</el-col>
</el-row>
</div>
<!-- 圖片預覽畫廊 -->
<vue-gallery :images="imageList" @close="currentImageIndex = null" :index="currentImageIndex" />
</div>
</template>
<script>
import VueGallery from 'vue-gallery';
export default {
name: 'about',
components: {
VueGallery
},
data() {
return {
formInline: {
user: '',
region: ''
},
tableData: [{
date: '2016-05-02',
name: '最後里程',
english: 'Last mile',
address: '上海市普陀區金沙江路 1518 弄',
desc: '11月,即將到來的全球最大購物活動之一“黑色星期五”前夜,發生了一起紙箱爆炸事件。很快,這起事件演變成了讓整個日本陷入恐慌的連續爆炸事件。物流倉庫的新任主管·舟渡艾蕾娜(滿島光 飾)和團隊經理·梨本孔(岡田將生 飾)一同應對這場前所未有的危機! 是誰?為什麼安放炸彈? 剩下的炸彈還有多少?現在在哪裡? 物流是現代社會的生命線,如何才能阻止這個連續爆破事件?當謎題被解開時,這個世界所隱藏真面目將浮出水面。',
status: '待放映',
times: '120',
category: ['驚恐', '劇情'],
language: '中文',
area: '日本',
img: require('@/imgs/1730963678636.jpg')
}, {
date: '2016-05-04',
name: '愛情神話',
english: 'B for Busy',
address: '上海市普陀區金沙江路 1517 弄',
desc: '老白是一位來自上海的離異退休繪畫教師,他愛上了一位同樣離異的李小姐。他的前妻蓓蓓和他的一個學生的介入讓整個事情變得複雜起來。在上海的弄堂裡,一個男人和三個女人的故事徐徐拉開序幕。',
status: '已上映',
times: '110',
category: ['驚恐', '劇情', '科幻'],
language: '英文',
area: '中國大陸',
img: require('@/imgs/1730356252740.jpg')
}, {
date: '2016-05-01',
name: '偉大征程',
english: 'THE GREAT JOURNEY',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄',
desc: '國內首部4K全景聲大型情景史詩舞臺藝術電影。',
status: '待放映',
times: '90',
category: ['戲劇', '劇情'],
language: '法語',
area: '法國',
img: require('@/imgs/1730356090428.jpg')
}, {
date: '2016-05-03',
name: '紅色一號:冬日行動',
english: 'RED ONE',
address: '上海市普陀區金沙江路 1516 弄',
desc: '聖誕老人(J·K·西蒙斯 飾)被神秘綁架,北極安保主管(道恩·強森 飾)不得已與全世界最臭名昭著的賞金獵人(克里斯·埃文斯 飾)展開合作,他們尋遍全球、打遍天下,力求拯救聖誕節。',
status: '待放映',
times: '100',
category: ['驚恐', '劇情', '懸疑'],
language: '德語',
area: '德國',
img: require('@/imgs/1730355957307.jpg')
}],
imageList: [],
currentImageIndex: null, // 圖片預覽索引
}
},
methods: {
onSubmit() {
console.log('submit!');
},
openGallery(index, imgUrl) {
this.imageList = [] // 清空
this.imageList = [imgUrl]
this.currentImageIndex = index
}
}
}
</script>
<style>
.about {
text-align: left;
width: 90%;
margin: 0 auto;
}
.el-tooltip__popper {
max-width: 30%;
}
</style>