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>
|
|
|