显示效果：
中间显示照片名称，右侧显示照片属性。
图片名称是保存与数据库里的，照片属性是相机或手机拍照时就存储于照片格式中的。
手机照片甚至保存了经纬度等详细信息（这也是QQ能实现旅游相册的原因）。
ADO.net MVC 部分视图 ViewPhotoWithAttr，也就是功能模块化。
<link href="~/Scripts/viewer/viewer.min.css?v=20190612" rel="stylesheet" />
<script src="~/Scripts/viewer/viewer.min.js?v=20190612"></script>
<style type="text/css">
.photo-with-attr-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 999999;
background-color: rgba(0, 0, 0, 0.7);
}
.photo-with-attr-container .photo-container
{
float: left;
height: 100%;
width: calc(100% - 300px);
}
.photo-with-attr-container .attr-container {
float: right;
height: 100%;
width: 300px;
background: white;
}
.photo-with-attr-container .attr-container .image-attr-title span
{
margin: 10px;
}
.photo-with-attr-container .attr-container .image-attr-title {
padding:16px;
border-bottom: 1px solid #ebeef5;
}
.photo-with-attr-container .attr-container .image-attr-content {
padding: 10px;
height: calc(100% - 50px);
width: 300px;
position: absolute;
}
.photo-with-attr-container .attr-container .el-scrollbar__wrap {
overflow-x: hidden;
}
.image-attr-content .ivu-form-item{
margin-bottom: 0px;
}
</style>
<script type="text/x-template" id="viewerTemplate">
<div style="visibility:hidden">
<div ref="left">
<div role="button" class="viewer-button viewer-close" data-viewer-action="mix" @@click="hide" />
<div class="image-attr-title">
<label>照片属性</label>
</div>
<div class="image-attr-content">
<div style="height:100%;">
<card v-for="item in currentAttr" v-bind:key="item.Name" style="margin-bottom:8px;width:100%;">
<div slot="title" class="clearfix">
<span>{{ item.Name }}</span>
</div>
<div>
<i-form label-width="90" size="mini">
<form-item v-for="imageAttr in item.AttrList" v-bind:key="imageAttr.Name" v-bind:label="imageAttr.Name">
<label> {{ imageAttr.Value }}</label>
</form-item>
</i-form>
</div>
</card>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript">
Vue.component("ViewPhotoWithAttr",{
template: "#viewerTemplate",
name: ‘ViewPhotoWithAttr‘,
props: {
imageList: {
type: Array,
default: null
}
},
data() {
return {
viewer: null,
containerEl: null,
visible: false,
currentImage: {},
currentAttr: []
}
},
watch: {
imageList() {
},
‘currentImage.id‘(id) {
var that = this
var srcPart = ‘@Url.Action("ImageAttr", "Image")‘ + ‘/‘;
this.$http({
url: srcPart + id,
method: ‘get‘
}).then(function (response) {
if (response.data.success) {
that.currentAttr = response.data.data
}
})
},
visible(val) {
var el = this.containerEl
if (el) {
el.style.visibility = val ? ‘visible‘ : ‘hidden‘
}
}
},
mounted() {
// ‘viewer-title‘
},
destroyed() {
this.destroy()
},
methods: {
init() {
var body = document.body
this.destroy()
var container = document.createElement(‘div‘)
container.className = ‘photo-with-attr-container‘
container.style.visibility = ‘hidden‘
var imageContainer = document.createElement(‘div‘)
imageContainer.className = ‘photo-container‘
var imagesEl = document.createElement(‘div‘)
imagesEl.style.display = ‘none‘
for (var item of this.imageList) {
var image = document.createElement(‘img‘)
image.src = item.imageUrlSmall
image.alt = item.picName;
imagesEl.appendChild(image)
}
imageContainer.appendChild(imagesEl)
container.appendChild(imageContainer)
var attrContainer = document.createElement(‘div‘)
attrContainer.className = ‘attr-container‘
attrContainer.appendChild(this.$refs.left)
container.appendChild(attrContainer)
body.appendChild(container)
// var el = this.$refs.images
var that = this
var viewer = new Viewer(imagesEl, {
fullscreen: true,
inline: true,
title: function (img, obj) {
return img.getAttribute("alt");
},
container: imageContainer,
url(image) {
var src = image.getAttribute("src");
var item = that.imageList.filter(d => d.imageUrlSmall === src)[0]
return item.imageUrl
},
hide() {
that.visible = false
},
hidden() {
that.visible = false
},
view(image) {
var src = image.detail.image.getAttribute("src");
var item = that.imageList.filter(d => d.imageUrl === src)[0]
that.currentImage = item
console.log(that.currentImage)
}
})
this.viewer = viewer
this.containerEl = container
},
destroy() {
if (this.viewer) {
this.viewer.destroy()
}
var body = document.body
var container = document.getElementsByClassName(‘photo-with-attr-container‘)
if (container && container.length > 0) {
for (var item of container) {
body.removeChild(item)
}
}
this.containerEl = null
this.viewer = null
},
hide() {
// this.viewer.exit()
this.destroy()
var that = this
this.$nextTick(function() {
that.visible = false
})
},
view(index) {
this.visible = true
if (!this.viewer) {
this.init()
}
var that = this
this.$nextTick(function(){
that.viewer.view(index)
})
}
}
})
</script>
图片名称显示部分代码
imageList: {
type: Array,
default: null
}
for (var item of this.imageList) {
var image = document.createElement(‘img‘)
image.src = item.imageUrlSmall
image.alt = item.picName; //对alt属性赋值
imagesEl.appendChild(image)
}
title: function (img, obj) { // 这里实现显示图片名称
return img.getAttribute("alt");
},
在另一个页面中使用，仅用于示意，并非完整代码，实现了iview轮播图上点击后出现viewer大图轮播图。感觉有点重复，但确实有这个需求。
<style>
.carousel-text{
position: relative;
bottom: 25px;
width: 100%;
font-size:13px;
/*width: auto;*/ /*也可以*/
text-align: center;
color: white;
background-color: rgba(0,0,0,0.3);
}
</style>
<div class="container">
<div id="dowebok_qm">
<Carousel v-bind:radius-dot="carouselDot_qm" dots="outside" v-bind:height="imgHeight2+‘px‘" v-model="carouselValue_qm" style="text-align:center;">
<div v-for="item in imgData_qm" v-on:click="handleView_qm(item)">
<Carousel-Item>
<img v-bind:src="item.src" style="height:inherit;width:auto;cursor:pointer;" />
<div><span class="carousel-text"> {{item.textName}}</span></div>
</Carousel-Item>
</div>
</Carousel>
</div>
</div>
<ViewPhotoWithAttr ref="viewerYd_qm" v-bind:image-list="imgData_qm" />
var vm = new Vue({
template: "#viewTemplate",
el: ‘#app‘,
data: {
imgHeight2:600,
carouselDot_qm: false,
carouselValue_qm: 0,
imgData_qm: [],
}
methods: {
handleView_qm: function (info) { //用于点击时定位
console.log(‘handleViewYd‘, info.id);
var index = 0
for (var i = 0; i < this.imgData_qm.length; i++) {
if (this.imgData_qm[i].id === info.id) {
index = i
break
}
}
console.log(‘index‘, index);
this.$refs.viewerYd_qm.view(index)
},
getImageListByID: function (dataID) {
var that=this; //由于ajax中的this不等于vue的this，所以赋值为that；
that.imgData_qm = [];
$.ajax({
url: url,
type: ‘POST‘,
data: { dataID: dataID.toString() },
success: function (result) {
let imageList = result.rows;
var srcPart=“url前缀”；
that.imgData_qm.push({ id: imageList[i].ImageID, src: srcPart + imageList[i].ImageID + part, name: imageList[i].FileName, textName: picName, imageUrlSmall: srcPart + imageList[i].ImageID + part, imageUrl: srcPart + imageList[i].ImageID })
}}）
}
}
}）
相关文章：
1 官方文档： https://github.com/fengyuanchen/viewerjs
2 简单用法：
viewer 图片点击放大 用法汇总
https://www.cnblogs.com/hao-1234-1234/p/11011249.html
viewer与 iview Carousel（走马灯） 结合使用，图片无法显示
https://www.cnblogs.com/hao-1234-1234/p/11252183.html
原文地址：https://www.cnblogs.com/hao-1234-1234/p/12169853.html
时间： 2024-10-01 00:22:31