|
@@ -124,7 +124,8 @@
|
|
|
长按图片可下载、收藏、转发
|
|
长按图片可下载、收藏、转发
|
|
|
<!-- <img :src="require('@/assets/shareTips.png')" alt="" /> -->
|
|
<!-- <img :src="require('@/assets/shareTips.png')" alt="" /> -->
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="closeShare" @click="closeShare"><van-icon name="close" /></div>
|
|
|
|
|
|
|
+ <!-- <div class="closeShare" @click="closeShare"><van-icon name="close" /></div> -->
|
|
|
|
|
+ <div class="closeShare" @click="closeShare">【返回】</div>
|
|
|
</div>
|
|
</div>
|
|
|
<img :src="canvasImageUrl" width="100%" class="canvasImage" />
|
|
<img :src="canvasImageUrl" width="100%" class="canvasImage" />
|
|
|
</div>
|
|
</div>
|
|
@@ -254,20 +255,17 @@ export default {
|
|
|
// // 确保克隆的DOM保持原始样式
|
|
// // 确保克隆的DOM保持原始样式
|
|
|
// clonedDoc.getElementById('html2canvas').style.overflow = 'auto';
|
|
// clonedDoc.getElementById('html2canvas').style.overflow = 'auto';
|
|
|
// },
|
|
// },
|
|
|
- // ignoreElements: (element) => {
|
|
|
|
|
- // // 保留目标元素及其祖先/后代节点(维持层级结构)
|
|
|
|
|
- // if (targetElement.contains(element) || element.contains(targetElement)) {
|
|
|
|
|
|
|
+ // ignoreElements: (e) => {
|
|
|
|
|
+ // if (
|
|
|
|
|
+ // e.contains(element) ||
|
|
|
|
|
+ // element.contains(e) ||
|
|
|
|
|
+ // e.tagName === 'STYLE' ||
|
|
|
|
|
+ // e.tagName === 'LINK' ||
|
|
|
|
|
+ // e.getAttribute('data-html2canvas') != null // header里面的样式不能筛掉
|
|
|
|
|
+ // ) {
|
|
|
|
|
+ // console.log(e);
|
|
|
// return false;
|
|
// return false;
|
|
|
// }
|
|
// }
|
|
|
- // // 保留样式标签(避免截图样式丢失)
|
|
|
|
|
- // if (element.tagName === 'STYLE' || element.tagName === 'LINK') {
|
|
|
|
|
- // return false;
|
|
|
|
|
- // }
|
|
|
|
|
- // // 保留标记 data-html2canvas 的节点(如头部样式)
|
|
|
|
|
- // if (element.getAttribute('data-html2canvas') !== null) {
|
|
|
|
|
- // return false;
|
|
|
|
|
- // }
|
|
|
|
|
- // // 其余节点全部忽略
|
|
|
|
|
// return true;
|
|
// return true;
|
|
|
// },
|
|
// },
|
|
|
})
|
|
})
|
|
@@ -281,11 +279,14 @@ export default {
|
|
|
img.onload = () => {
|
|
img.onload = () => {
|
|
|
const canvasImage = this.$refs.html2canvas.querySelector('.canvasImage');
|
|
const canvasImage = this.$refs.html2canvas.querySelector('.canvasImage');
|
|
|
const scrollContainer = this.$refs.html2canvas.querySelector('.scroll-container');
|
|
const scrollContainer = this.$refs.html2canvas.querySelector('.scroll-container');
|
|
|
|
|
+ const shareHeader = this.$refs.html2canvas.querySelector('.shareHeader');
|
|
|
console.log(scrollContainer.style);
|
|
console.log(scrollContainer.style);
|
|
|
if (canvasImage.height < window.innerHeight) {
|
|
if (canvasImage.height < window.innerHeight) {
|
|
|
scrollContainer.style.alignItems = 'center';
|
|
scrollContainer.style.alignItems = 'center';
|
|
|
|
|
+ shareHeader.style.position = 'absolute';
|
|
|
} else {
|
|
} else {
|
|
|
scrollContainer.style.alignItems = 'start';
|
|
scrollContainer.style.alignItems = 'start';
|
|
|
|
|
+ shareHeader.style.position = 'fixed';
|
|
|
}
|
|
}
|
|
|
this.$forceUpdate();
|
|
this.$forceUpdate();
|
|
|
// // 根据图片实际高度设置容器高度(增加20px缓冲)
|
|
// // 根据图片实际高度设置容器高度(增加20px缓冲)
|
|
@@ -565,6 +566,7 @@ export default {
|
|
|
// right: 10px;
|
|
// right: 10px;
|
|
|
// top: 10px;
|
|
// top: 10px;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
|
|
+ font-size: vw(30);
|
|
|
.van-icon {
|
|
.van-icon {
|
|
|
font-size: vw(40);
|
|
font-size: vw(40);
|
|
|
}
|
|
}
|
|
@@ -574,7 +576,7 @@ export default {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
color: #f8f8fa;
|
|
color: #f8f8fa;
|
|
|
- width: 90%;
|
|
|
|
|
|
|
+ width: 78%;
|
|
|
// flex: 1;
|
|
// flex: 1;
|
|
|
margin-right: 10px;
|
|
margin-right: 10px;
|
|
|
background: rgba(157, 157, 188, 0.8);
|
|
background: rgba(157, 157, 188, 0.8);
|