Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2025-07-08 05:11:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

预览样式调整

Browse Source
This commit is contained in:
rookie4show
2025-03-06 19:00:55 +08:00
parent 37c45ef3b6
commit 8ebf9b5390
1 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Yys.vue
View File

@ -12,6 +12,11 @@
@closeProperty="closeProperty" @closeProperty="closeProperty"
@updateProperty="updateProperty" @updateProperty="updateProperty"
/> />
<!-- 现有的代码 -->
<div style="margin: 20px" data-html2canvas-ignore="true">
<!-- 触发截图的按钮 -->
<el-button type="primary" @click="prepareCapture">{{ t('prepareCapture') }}</el-button>
</div>
<draggable :list="state.groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;" <draggable :list="state.groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;"
handle=".drag-handle"> handle=".drag-handle">
@ -49,7 +54,8 @@
<template #item="{element : position, index:positionIndex}"> <template #item="{element : position, index:positionIndex}">
<div> <div>
<el-col> <el-col>
<el-card :body-style="{ padding: '0px', display: 'flex', 'flex-direction': 'column', 'justify-content': 'center', 'align-items': 'center' }"> <el-card shadow="never"
:body-style="{ display: 'flex', 'flex-direction': 'column', 'justify-content': 'center', 'align-items': 'center' }">
<div> <div>
<!-- Add delete button here --> <!-- Add delete button here -->
@ -117,11 +123,7 @@
</draggable> </draggable>
<div style="margin: 20px"> <div style="margin: 20px">
<!-- 现有的代码 -->
<div style="margin: 20px" data-html2canvas-ignore="true">
<!-- 触发截图的按钮 -->
<el-button type="primary" @click="prepareCapture">{{ t('prepareCapture') }}</el-button>
</div>
<!-- 预览弹窗 --> <!-- 预览弹窗 -->
<el-dialog id="preview-container" v-model="state.previewVisible" width="80%" :before-close="handleClose"> <el-dialog id="preview-container" v-model="state.previewVisible" width="80%" :before-close="handleClose">
@ -279,6 +281,15 @@ const ignoreElements = (element) => {
const prepareCapture = async () => { const prepareCapture = async () => {
state.previewVisible = true; // 显示预览弹窗 state.previewVisible = true; // 显示预览弹窗
// 创建临时样式
const style = document.createElement('style')
style.id = 'capture-style'
style.textContent = `
.ql-container.ql-snow {
border: none !important;
}
`
document.head.appendChild(style)
// 捕获页面元素并生成图片 // 捕获页面元素并生成图片
try { try {
const element = document.querySelector('#main-container'); // 替换为要捕获的元素选择器 const element = document.querySelector('#main-container'); // 替换为要捕获的元素选择器
@ -290,17 +301,21 @@ const prepareCapture = async () => {
const canvas = await html2canvas(element, { const canvas = await html2canvas(element, {
ignoreElements: ignoreElements, ignoreElements: ignoreElements,
height: element.scrollHeight height: element.scrollHeight,
} }
); );
state.previewImage = canvas.toDataURL(); state.previewImage = canvas.toDataURL();
if (!state.previewImage) { if (!state.previewImage) {
console.error('Failed to generate image data URL.'); console.error('Failed to generate image data URL.');
state.previewVisible = false; state.previewVisible = false;
state.previewVisible = false;
} }
} catch (error) { } catch (error) {
console.error('Failed to capture screenshot', error); console.error('Failed to capture screenshot', error);
state.previewVisible = false; state.previewVisible = false;
}finally {
// 清除临时样式
document.getElementById('capture-style')?.remove()
} }
}; };
@ -340,8 +355,7 @@ const handleClose = (done) => {
position: relative; position: relative;
overflow: hidden; /* 隐藏超出部分 */ overflow: hidden; /* 隐藏超出部分 */
border-radius: 50%; /* 圆形裁剪 */ border-radius: 50%; /* 圆形裁剪 */
//border: 2px solid #fff; /* 可选：添加边框 */ //border: 2px solid #fff; /* 可选：添加边框 */ //box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 可选：添加阴影 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 可选：添加阴影 */
} }
/* 图片样式 */ /* 图片样式 */
@ -355,4 +369,11 @@ const handleClose = (done) => {
} }
.el-card {
border: 0;
}
</style> </style>