105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<!-- -->
|
||
|
|
<image :mode="node.attr.mode" :lazy-load="node.attr.lazyLoad" :style="newStyleStr || node.styleStr"
|
||
|
|
:class="node.classStr" :data-src="node.attr.src" :src="node.attr.src" @tap="wxParseImgTap"
|
||
|
|
@load="wxParseImgLoad" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'wxParseImg',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
newStyleStr: '',
|
||
|
|
preview: true,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
node: {
|
||
|
|
type: Object,
|
||
|
|
default () {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
wxParseImgTap(e) {
|
||
|
|
if (!this.preview) return;
|
||
|
|
const {
|
||
|
|
src
|
||
|
|
} = e.currentTarget.dataset;
|
||
|
|
if (!src) return;
|
||
|
|
let parent = this.$parent;
|
||
|
|
while (!parent.preview || typeof parent.preview !== 'function') { // TODO 遍历获取父节点执行方法
|
||
|
|
parent = parent.$parent;
|
||
|
|
}
|
||
|
|
parent.preview(src, e);
|
||
|
|
},
|
||
|
|
// 图片视觉宽高计算函数区
|
||
|
|
wxParseImgLoad(e) {
|
||
|
|
console.log('wxParseImgLoad', e)
|
||
|
|
const {
|
||
|
|
src
|
||
|
|
} = e.currentTarget.dataset;
|
||
|
|
if (!src) return;
|
||
|
|
const {
|
||
|
|
width,
|
||
|
|
height
|
||
|
|
} = e.detail;
|
||
|
|
const recal = this.wxAutoImageCal(width, height);
|
||
|
|
const {
|
||
|
|
imageheight,
|
||
|
|
imageWidth
|
||
|
|
} = recal;
|
||
|
|
const {
|
||
|
|
padding,
|
||
|
|
mode
|
||
|
|
} = this.node.attr;
|
||
|
|
const {
|
||
|
|
styleStr
|
||
|
|
} = this.node;
|
||
|
|
console.log('node.classStr', this.node.classStr)
|
||
|
|
// const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
|
||
|
|
// this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding || 0}px;`;
|
||
|
|
// console.log('this.newStyleStr', this.newStyleStr, this.node)
|
||
|
|
},
|
||
|
|
// 计算视觉优先的图片宽高
|
||
|
|
wxAutoImageCal(originalWidth, originalHeight) {
|
||
|
|
// 获取图片的原始长宽
|
||
|
|
const {
|
||
|
|
padding
|
||
|
|
} = this.node.attr;
|
||
|
|
const windowWidth = this.node.$screen.width - (2 * padding);
|
||
|
|
const results = {};
|
||
|
|
|
||
|
|
if (originalWidth < 60 || originalHeight < 60) {
|
||
|
|
const {
|
||
|
|
src
|
||
|
|
} = this.node.attr;
|
||
|
|
let parent = this.$parent;
|
||
|
|
while (!parent.preview || typeof parent.preview !== 'function') {
|
||
|
|
parent = parent.$parent;
|
||
|
|
}
|
||
|
|
parent.removeImageUrl(src);
|
||
|
|
this.preview = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 判断按照那种方式进行缩放
|
||
|
|
if (originalWidth > windowWidth) {
|
||
|
|
// 在图片width大于手机屏幕width时候
|
||
|
|
results.imageWidth = windowWidth;
|
||
|
|
results.imageheight = windowWidth * (originalHeight / originalWidth);
|
||
|
|
} else {
|
||
|
|
// 否则展示原来的数据
|
||
|
|
results.imageWidth = originalWidth;
|
||
|
|
results.imageheight = originalHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
return results;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|