You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.4 KiB
86 lines
2.4 KiB
<template>
|
|
<image
|
|
:mode="node.attr.mode"
|
|
:lazy-load="node.attr.lazyLoad"
|
|
:class="node.classStr"
|
|
:style="newStyleStr || node.styleStr"
|
|
: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) {
|
|
const { src } = e.currentTarget.dataset;
|
|
if (!src) return;
|
|
const { width, height } = e.mp.detail;
|
|
const recal = this.wxAutoImageCal(width, height);
|
|
const { imageheight, imageWidth } = recal;
|
|
const { padding, mode } = this.node.attr;
|
|
const { styleStr } = this.node;
|
|
const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
|
|
this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;
|
|
},
|
|
// 计算视觉优先的图片宽高
|
|
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>
|