|
@@ -10,7 +10,7 @@
|
|
|
<div class='pic-left'>
|
|
|
<ul v-for='(item,index) in imgUrl' :key='index'>
|
|
|
<li @click='getIndex(item)'>
|
|
|
- <img :src='item.url' v-if='item.type=="png"' />
|
|
|
+ <img :src='item.url' v-if='typeArr.includes(item.type)' />
|
|
|
<span v-else></span>
|
|
|
</li>
|
|
|
<span>{{item.name}}</span>
|
|
@@ -18,8 +18,8 @@
|
|
|
</div>
|
|
|
<div class='pic-right'>
|
|
|
<div class='pic-right-img'>
|
|
|
- <img :src='ImgUrl' v-if='this.type=="png"' />
|
|
|
- <span v-else style='line-height:540px'>{{`此文件类型为${this.type}类型,无法展示`}}</span>
|
|
|
+ <img :src='ImgUrl' v-if='typeArr.includes(type)' />
|
|
|
+ <p v-else class='no-image'>{{`此文件类型为${this.type}类型,无法展示`}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -29,21 +29,58 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'PicLarge',
|
|
|
- props: ['imgUrl'],
|
|
|
+ // props: ['imgUrl'],
|
|
|
data() {
|
|
|
return {
|
|
|
dialogVisible: false,
|
|
|
ImgUrl: '',
|
|
|
- type: ''
|
|
|
+ type: '',
|
|
|
+ imgUrl: [],
|
|
|
+ typeArr: ['png', 'jpg', 'jpeg'] //typeArr 图片类型
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- open() {
|
|
|
+ /**
|
|
|
+ * @description 打开弹窗事件,传入展示的图片信息
|
|
|
+ * @param {object} data 图片信息
|
|
|
+ {
|
|
|
+ name: '供电系统原理图.png',
|
|
|
+ url: 'http://gcgl.wanda.cn/%E7%BB%B4%E4%BF%AE%E5%B7%A5%E5%8D%95%E4%B8%80/WORKORDER_846049_2019-11-19T15-37-42-716.jpg'
|
|
|
+ }
|
|
|
+ */
|
|
|
+ open(data) {
|
|
|
this.dialogVisible = true
|
|
|
+ // 处理传入进来的数据
|
|
|
+ this.handleData(data)
|
|
|
+ // this.imgUrl = data
|
|
|
},
|
|
|
getIndex(imgUrl) {
|
|
|
this.ImgUrl = imgUrl.url
|
|
|
this.type = imgUrl.type
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 处理数据 --> 返回 name,url,type格式的json数据
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: 'xxx.png',
|
|
|
+ url: '---',
|
|
|
+ type: 'png'
|
|
|
+ },
|
|
|
+ ...
|
|
|
+ ]
|
|
|
+ */
|
|
|
+ handleData(data) {
|
|
|
+ let patternFileExtension = /\.([0-9a-z]+)(?:[\?#]|$)/i
|
|
|
+ data = data.map(item => {
|
|
|
+ let type = item.name.match(patternFileExtension)[1]
|
|
|
+ let obj = {
|
|
|
+ name: item.name,
|
|
|
+ url: item.url,
|
|
|
+ type
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ })
|
|
|
+ this.imgUrl = data
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -59,7 +96,10 @@ export default {
|
|
|
watch: {
|
|
|
__imgUrl: {
|
|
|
handler(newV, oldV) {
|
|
|
- newV.length && (this.ImgUrl = this.imgUrl[0].url)
|
|
|
+ if (newV.length) {
|
|
|
+ this.ImgUrl = newV[0].url
|
|
|
+ this.type = newV[0].type
|
|
|
+ }
|
|
|
},
|
|
|
deep: true
|
|
|
}
|
|
@@ -69,6 +109,7 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.pic-list {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
// height: 700px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
@@ -110,22 +151,37 @@ export default {
|
|
|
}
|
|
|
.pic-right {
|
|
|
flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
background: rgba(245, 246, 247, 1);
|
|
|
border-radius: 0px 0px 4px 0px;
|
|
|
- padding: 60px 50px;
|
|
|
- margin: auto auto;
|
|
|
+ // padding: 60px 50px;
|
|
|
+ // margin: auto auto;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.pic-right-img {
|
|
|
- width: 720px;
|
|
|
- height: 540px;
|
|
|
+ // width: 720px;
|
|
|
+ // height: 540px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
text-align: center;
|
|
|
img {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
display: block;
|
|
|
- margin: auto;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ // 无图片样式
|
|
|
+ .no-image {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -139,6 +195,8 @@ export default {
|
|
|
margin-top: 5vh !important;
|
|
|
.el-dialog__body {
|
|
|
padding: 10px;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|