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

i18你，重构代码，细节优化

Browse Source
This commit is contained in:
rookie4show
2025-03-04 23:46:42 +08:00
parent d4b452d234
commit a935369927
10 changed files with 995 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

366
src/components/ShikigamiProperty.vue
View File

@ -46,12 +46,20 @@
<!-- <el-input v-model="shikigami.speed"/>-->
</el-form-item>
<el-form-item label="御魂套装">
<img style="width: 50px;height: 50px" v-if="this.shikigami.yuhun.yuhunSetEffect.length>0"
:src="this.shikigami.yuhun.yuhunSetEffect[0].avatar" class="image"/>
<img style="width: 50px;height: 50px" v-if="this.shikigami.yuhun.yuhunSetEffect.length>1"
:src="this.shikigami.yuhun.yuhunSetEffect[1].avatar" class="image"/>
<img
v-for="(effect, index) in shikigami.yuhun.yuhunSetEffect"
:key="index"
style="width: 50px; height: 50px;"
:src="effect.avatar"
class="image"
@click="openYuhunSelect(index)"
/>
<!-- <img style="width: 50px;height: 50px" v-if="shikigami.yuhun.yuhunSetEffect.length>0"-->
<!-- :src="shikigami.yuhun.yuhunSetEffect[0].avatar" class="image"/>-->
<!-- <img style="width: 50px;height: 50px" v-if="shikigami.yuhun.yuhunSetEffect.length>1"-->
<!-- :src="shikigami.yuhun.yuhunSetEffect[1].avatar" class="image"/>-->
<el-button type="primary" @click="editShikigami()">
<el-button type="primary" @click="openYuhunSelect(-1)">
<el-icon :size="20">
<CirclePlus/>
</el-icon>
@ -60,7 +68,7 @@
</el-form-item>
<el-form-item label="效果指标">
<el-select placeholder="伤害输出" v-model="shikigami.yuhun.target">
<el-select placeholder="1" v-model="shikigami.yuhun.target">
<el-option label="伤害输出" value="1"/>
<el-option label="效果命中" value="2"/>
<el-option label="效果抵抗" value="3"/>
@ -125,189 +133,187 @@
</el-dialog>
</template>
<script>
<script setup>
import propertyData from "../data/property.json";
import {ref} from "vue";
import {ref, watch, computed} from 'vue'
import ShikigamiSelect from "@/components/ShikigamiSelect.vue";
import YuhunSelect from "@/components/YuhunSelect.vue";
// import YuhunSelect from "./YuhunSelect.vue";
export default {
components: {YuhunSelect, ShikigamiSelect},
props: {
currentShikigami: {
type: Object,
default: {},
},
showProperty: {
type: Boolean,
},
const props = defineProps({
currentShikigami: {
type: Object,
default: {},
},
showProperty: {
type: Boolean,
},
});
data() {
return {
showYuhunSelect: false,
propertyData: propertyData,
shikigami: {
edit: false,
yuhun: {
yuhunSetEffect: [],
target: "伤害输出",
property2: ["Attack"],
property4: ["Attack"],
property6: ["Crit", "CritDamage"],
},
levelRequired: "40",
speed: "",
skillRequiredMode: "all",
skillRequired: ["技能一", "技能二", "技能三"]
},
current: {},
show: false,
};
const emit = defineEmits(['closeProperty', 'updateProperty'])
let showYuhunSelect = ref(false)
let shikigami = ref({
edit: false,
yuhun: {
yuhunSetEffect: [],
target: "伤害输出",
property2: ["Attack"],
property4: ["Attack"],
property6: ["Crit", "CritDamage"],
},
watch: {
showProperty(newVal, oldVal) {
// this.shikigami = this.currentShikigami;
console.log("currentShikigami", JSON.stringify(this.currentShikigami));
this.show = newVal;
},
currentShikigami(newVal, oldVal) {
if (newVal.properties != undefined && newVal.properties.edit == true) {
this.shikigami = newVal.properties;
}
this.current = newVal;
},
'shikigami.yuhun.target': {
handler(newVal, oldVal) {
switch (newVal) {
//<el-option label="伤害输出" value="1"/>
case "1": {
this.shikigami.yuhun.property2 = ["Attack"];
this.shikigami.yuhun.property4 = ["Attack"];
this.shikigami.yuhun.property6 = ["Crit", "CritDamage"];
break;
}
//<el-option label="效果命中" value="2"/>
case "2": {
this.shikigami.yuhun.property2 = ["Speed"];
this.shikigami.yuhun.property4 = ["ControlHit"];
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="效果抵抗" value="3"/>
case "3": {
this.shikigami.yuhun.property2 = ["Speed"];
this.shikigami.yuhun.property4 = ["ControlMiss"];
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="生命" value="4"/>
case "4": {
this.shikigami.yuhun.property2 = ["Health"];
this.shikigami.yuhun.property4 = ["Health"];
this.shikigami.yuhun.property6 = ["Health"];
break;
}
//<el-option label="攻击" value="5"/>
case "5": {
this.shikigami.yuhun.property2 = ["Attack"];
this.shikigami.yuhun.property4 = ["Attack"];
this.shikigami.yuhun.property6 = ["Attack"];
break;
}
//<el-option label="防御" value="6"/>
case "6": {
this.shikigami.yuhun.property2 = ["Defense"];
this.shikigami.yuhun.property4 = ["Defense"];
this.shikigami.yuhun.property6 = ["Defense"];
break;
}
//<el-option label="速度" value="7"/>
case "7": {
this.shikigami.yuhun.property2 = ["Speed"];
this.shikigami.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="暴击" value="8"/>
case "8": {
this.shikigami.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
this.shikigami.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
this.shikigami.yuhun.property6 = ["Crit"];
break;
}
//<el-option label="暴击伤害" value="9"/>
case "9": {
this.shikigami.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
this.shikigami.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
this.shikigami.yuhun.property6 = ["CritDamage"];
break;
}
//<el-option label="治疗量" value="10"/>
case "10": {
this.shikigami.yuhun.property2 = ["Speed"];
this.shikigami.yuhun.property4 = ["Health"];
this.shikigami.yuhun.property6 = ["Crit","CritDamage"];
break;
}
//<el-option label="命抗双修" value="11"/>
case "11": {
this.shikigami.yuhun.property2 = ["Speed"];
this.shikigami.yuhun.property4 = ["ControlHit", "ControlMiss"];
this.shikigami.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="防御输出" value="12"/>
case "12": {
this.shikigami.yuhun.property2 = ["Defense"];
this.shikigami.yuhun.property4 = ["Defense"];
this.shikigami.yuhun.property6 = ["Crit", "CritDamage"];
break;
}
levelRequired: "40",
speed: "",
skillRequiredMode: "all",
skillRequired: ["技能一", "技能二", "技能三"]
})
let yuhunIndex = ref(-1)
let current = ref({})
let show = ref(props.showProperty)
watch(() => props.currentShikigami, (newVal) => {
if (newVal.properties != undefined && newVal.properties.edit == true) {
shikigami.value = newVal.properties
}
current.value = newVal
}, {deep: true})
watch(() => props.showProperty, (newVal) => {
show.value = newVal;
})
watch(() => shikigami.value.yuhun.target, (newVal) => {
switch (newVal) {
//<el-option label="伤害输出" value="1"/>
case "1": {
shikigami.value.yuhun.property2 = ["Attack"];
shikigami.value.yuhun.property4 = ["Attack"];
shikigami.value.yuhun.property6 = ["Crit", "CritDamage"];
break;
}
},
deep: true //为true，表示深度监听，这时候就能监测到a值变化
/**
* <el-option label="治疗量" value="10"/>
* <el-option label="命抗双修" value="11"/>
* <el-option label="防御输出" value="12"/>
*/
}
},
methods: {
editShikigami() {
// this.currentShikigami = item;
this.showYuhunSelect = true;
// this.index = index;
},
closeYuhunSelect() {
// this.currentShikigami = item;
this.showYuhunSelect = false;
// this.index = index;
},
updateYuhunSelect(yuhun) {
this.showYuhunSelect = false;
let length = this.shikigami.yuhun.yuhunSetEffect.length;
this.shikigami.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
//<el-option label="效果命中" value="2"/>
case "2": {
shikigami.value.yuhun.property2 = ["Speed"];
shikigami.value.yuhun.property4 = ["ControlHit"];
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="效果抵抗" value="3"/>
case "3": {
shikigami.value.yuhun.property2 = ["Speed"];
shikigami.value.yuhun.property4 = ["ControlMiss"];
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="生命" value="4"/>
case "4": {
shikigami.value.yuhun.property2 = ["Health"];
shikigami.value.yuhun.property4 = ["Health"];
shikigami.value.yuhun.property6 = ["Health"];
break;
}
//<el-option label="攻击" value="5"/>
case "5": {
shikigami.value.yuhun.property2 = ["Attack"];
shikigami.value.yuhun.property4 = ["Attack"];
shikigami.value.yuhun.property6 = ["Attack"];
break;
}
//<el-option label="防御" value="6"/>
case "6": {
shikigami.value.yuhun.property2 = ["Defense"];
shikigami.value.yuhun.property4 = ["Defense"];
shikigami.value.yuhun.property6 = ["Defense"];
break;
}
//<el-option label="速度" value="7"/>
case "7": {
shikigami.value.yuhun.property2 = ["Speed"];
shikigami.value.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="暴击" value="8"/>
case "8": {
shikigami.value.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
shikigami.value.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
shikigami.value.yuhun.property6 = ["Crit"];
break;
}
//<el-option label="暴击伤害" value="9"/>
case "9": {
shikigami.value.yuhun.property2 = ["Attack", "Defense", "Health", "Speed"];
shikigami.value.yuhun.property4 = ["Attack", "Defense", "Health", "ControlHit", "ControlMiss"];
shikigami.value.yuhun.property6 = ["CritDamage"];
break;
}
//<el-option label="治疗量" value="10"/>
case "10": {
shikigami.value.yuhun.property2 = ["Speed"];
shikigami.value.yuhun.property4 = ["Health"];
shikigami.value.yuhun.property6 = ["Crit", "CritDamage"];
break;
}
//<el-option label="命抗双修" value="11"/>
case "11": {
shikigami.value.yuhun.property2 = ["Speed"];
shikigami.value.yuhun.property4 = ["ControlHit", "ControlMiss"];
shikigami.value.yuhun.property6 = ["Attack", "Defense", "Health", "Crit", "CritDamage"];
break;
}
//<el-option label="防御输出" value="12"/>
case "12": {
shikigami.value.yuhun.property2 = ["Defense"];
shikigami.value.yuhun.property4 = ["Defense"];
shikigami.value.yuhun.property6 = ["Crit", "CritDamage"];
break;
}
}
}, {deep: true}
)
},
cancel() {
this.$emit("closeProperty");
Object.assign(this.$data, this.$options.data())
},
confirm() {
// if (null == this.shikigami[this.index].properties) {
this.shikigami.edit = true
this.$emit("updateProperty", JSON.parse(JSON.stringify(this.shikigami)));
Object.assign(this.$data, this.$options.data())
// }
},
updateSkillRequired(index, value) {
this.shikigami.skillRequired[index] = value;
},
},
};
</script>
const openYuhunSelect = (index) => {
yuhunIndex.value = index
showYuhunSelect.value = true
}
const closeYuhunSelect = () => showYuhunSelect.value = false
const updateYuhunSelect = (yuhun) => {
showYuhunSelect.value = false
if(yuhunIndex.value >=0)
shikigami.value.yuhun.yuhunSetEffect[yuhunIndex.value] = (JSON.parse(JSON.stringify(yuhun)))
else
shikigami.value.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
}
const cancel = () => {
emit('closeProperty')
resetData()
}
const confirm = () => {
shikigami.value.edit = true
emit('updateProperty', JSON.parse(JSON.stringify(shikigami.value)))
resetData()
}
const resetData = () => {
shikigami.value = {
edit: false,
yuhun: {
yuhunSetEffect: [],
target: "伤害输出",
property2: ["Attack"],
property4: ["Attack"],
property6: ["Crit", "CritDamage"],
},
levelRequired: "40",
speed: "",
skillRequiredMode: "all",
skillRequired: ["技能一", "技能二", "技能三"]
}
}
</script>

93
src/components/Watermark.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div ref="watermarkContainer" class="watermark-container"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
text: {
type: String,
default: '默认水印'
},
font: {
type: String,
default: '20px Arial'
},
color: {
type: String,
default: 'rgba(184, 184, 184, 0.3)' // 半透明灰色
},
angle: {
type: Number,
default: -20 // 水印倾斜角度
}
});
const watermarkContainer = ref(null);
onMounted(() => {
createWatermark();
});
const createWatermark = () => {
const container = watermarkContainer.value;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = 200;
canvas.height = 100;
// 设置字体和颜色
ctx.font = props.font;
ctx.fillStyle = props.color;
// 计算文本宽度
const metrics = ctx.measureText(props.text);
const textWidth = metrics.width;
// 填充背景色为透明
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 旋转画布
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((props.angle * Math.PI) / 180);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
// 绘制水印文本
ctx.fillText(props.text, (canvas.width - textWidth) / 2, canvas.height / 2);
// 恢复画布状态
ctx.restore();
// 将 canvas 转换为 base64 图像
const watermarkUrl = canvas.toDataURL('image/png');
// 创建一个 div 并设置背景图
const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'absolute';
watermarkDiv.style.top = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.backgroundImage = `url(${watermarkUrl})`;
watermarkDiv.style.backgroundRepeat = 'repeat';
watermarkDiv.style.pointerEvents = 'none'; // 确保水印不会干扰用户交互
// 将水印 div 添加到容器中
container.appendChild(watermarkDiv);
};
</script>
<style scoped>
.watermark-container {
position: absolute; /* 使用绝对定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 确保水印不会干扰用户交互 */
}
</style>

191
src/components/YuhunSelect.vue
View File

@ -1,140 +1,75 @@
<template>
<el-dialog v-model="show" :visable.sync="show" title="请选择式神" @cancel="cancel" :before-close="cancel">
<span>当前选择：{{current.name}}</span>
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane
v-for="(yuhunType, index) in yuhunTypes"
:key="index"
:label="yuhunType.label"
:name="yuhunType.name"
>
<div v-if="yuhunTypes.includes(yuhunType)"> <!-- 只在这些级别中显示内容 -->
<el-space wrap size="large">
<div v-for="i in filterShikigamiByRarity(yuhunType.name)" :key="i.name">
<el-button style="width: 100px; height: 100px;" @click.stop="confirm(i)">
<img :src="i.avatar" style="width: 99px; height: 99px;">
</el-button>
</div>
</el-space>
</div>
<el-dialog v-model="show" :title="t('yuhunSelect')" @close="cancel">
<span>当前选择：{{ current.name }}</span>
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleTabClick">
<el-tab-pane v-for="type in yuhunTypes" :key="type.name" :label="type.label" :name="type.name">
<el-space wrap size="large">
<div v-for="shikigami in filterShikigamiByType(activeName)" :key="shikigami.name">
<el-button style="width: 100px; height: 100px;" @click="confirm(shikigami)">
<img :src="shikigami.avatar" style="width: 99px; height: 99px;">
</el-button>
</div>
</el-space>
</el-tab-pane>
</el-tabs>
<!-- <template #footer>-->
<!-- <span class="dialog-footer">-->
<!-- <el-button @click.stop="cancel">Cancel</el-button>-->
<!-- <el-button type="primary" @click.stop="confirm"> Confirm </el-button>-->
<!-- </span>-->
<!-- </template>-->
</el-dialog>
</template>
<script lang="ts">
import shikigamiData from "../data/Shikigami.json";
import yuhunData from "../data/Yuhun.json";
import { ref } from "vue";
import type { TabsPaneContext } from 'element-plus'
<script setup>
import { ref, watch, computed } from 'vue';
import shikigamiData from '../data/Shikigami.json';
import yuhunData from '../data/Yuhun.json';
import { useI18n } from 'vue-i18n'
// 获取当前的 i18n 实例
const { t } = useI18n()
const activeName = ref('ALL')
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
export default {
props: {
currentShikigami: {
type: Object,
default: {},
},
showYuhunSelect: {
type: Boolean,
},
const props = defineProps({
currentShikigami: {
type: Object,
default: () => ({})
},
showYuhunSelect: Boolean
});
data() {
return {
activeName:activeName,
yuhunData: yuhunData,
selected: null,
current: {},
show: false,
yuhunTypes: [
{
"label":"全部",
"name":"ALL"
},
{
"label":"攻击加成",
"name":"Attack"
},
{
"label":"暴击",
"name":"Crit"
},
{
"label":"生命加成",
"name":"Health"
},
{
"label":"防御加成",
"name":"Defense"
},
{
"label":"效果命中",
"name":"ControlHit"
},
{
"label":"效果抵抗",
"name":"ControlMiss"
},
{
"label":"首领御魂",
"name":"PVE"
},
],
};
},
watch: {
showYuhunSelect(newVal, oldVal) {
console.log("=======aaaaaaa>>>> ", newVal, oldVal);
this.show = newVal;
},
currentShikigami(newVal, oldVal) {
console.log("===item====>>>> ", newVal, oldVal);
this.current = newVal;
},
const emit = defineEmits(['updateYuhunSelect', 'closeYuhunSelect']);
},
methods: {
select(item) {
this.current = item;
},
cancel() {
console.log("cancel====");
this.$emit("closeYuhunSelect");
},
confirm(i) {
console.log("confirm====");
this.$emit("updateYuhunSelect", JSON.parse(JSON.stringify(i)))
// this.current = {};
},
filterShikigamiByRarity(yuhunType) {
if(yuhunType.toLowerCase() == "all")
return this.yuhunData
// 将传入的rarity参数转换为小写
const lowerCaseYuhunType = yuhunType.toLowerCase();
return this.yuhunData.filter(yuhun =>
// 将shikigami对象的rarity属性也转换为小写进行比较
yuhun.type.toLowerCase() === lowerCaseYuhunType
);
},
},
const show = ref(false);
const activeName = ref('ALL');
const current = ref(props.currentShikigami);
const yuhunTypes = [
{ label: '全部', name: 'ALL' },
{ label: '攻击加成', name: 'Attack' },
{ label: '暴击', name: 'Crit' },
{ label: '生命加成', name: 'Health' },
{ label: '防御加成', name: 'Defense' },
{ label: '效果命中', name: 'ControlHit' },
{ label: '效果抵抗', name: 'ControlMiss' },
{ label: '首领御魂', name: 'PVE' }
];
watch(() => props.showYuhunSelect, (newVal) => {
show.value = newVal;
});
watch(() => props.currentShikigami, (newVal) => {
current.value = newVal;
});
const handleTabClick = (tab) => {
console.log(tab.paneName);
};
</script>
const filterShikigamiByType = (type) => {
if (type.toLowerCase() === 'all') return yuhunData;
return yuhunData.filter(yuhun => yuhun.type.toLowerCase() === type.toLowerCase());
};
const cancel = () => {
emit('closeYuhunSelect');
};
const confirm = (item) => {
emit('updateYuhunSelect', JSON.parse(JSON.stringify(item)));
};
</script>

73
src/components/Yys.vue
View File

@ -12,14 +12,15 @@
@closeProperty="closeProperty"
@updateProperty="updateProperty"
/>
<draggable :list="state.groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;"
handle=".drag-handle">
<template #item="{ element: group, index: groupIndex }">
<template #item="{ element: group, index: groupIndex }">
<el-row :span="24">
<div>
<div style="display: flex; justify-content: flex-end;">
<div style="display: flex; justify-content: flex-end;" data-html2canvas-ignore="true">
<el-button class="drag-handle" type="primary" icon="Rank" circle></el-button>
<el-button type="danger" icon="Delete" circle @click="removeGroup(groupIndex)"></el-button>
<el-button type="primary" icon="Plus" circle @click="addGroup"></el-button>
@ -33,15 +34,14 @@
<!-- Add delete button here -->
<el-button type="danger" icon="Delete" circle
@click="removeGroupElement(groupIndex, positionIndex)"></el-button>
<el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"></el-button>
<el-button type="danger" icon="Delete" circle @click="removeGroupElement(groupIndex, positionIndex)" data-html2canvas-ignore="true"></el-button>
<el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)" data-html2canvas-ignore="true"></el-button>
<img :src="position.avatar || '/assets/Shikigami/default.png'" class="image"
@click="editShikigami(groupIndex,positionIndex)"/>
<div style="padding: 14px; width: 95px">
<span>{{ position.name || "" }}</span>
<div class="bottom">
<div class="bottom" data-html2canvas-ignore="true">
<el-button @click="editProperties(groupIndex,positionIndex)">配置属性</el-button>
</div>
<!-- properties-->
@ -52,7 +52,7 @@
{{ position.properties.yuhun.yuhunSetEffect.map(item => item.name).join(' ') }}
</span>
<span style="display: inline-block; width: 100px; height: 25px; background-color: #666; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-right: 5px; color: white; text-align: center; white-space: pre-wrap ">
{{ position.properties.yuhun.target}}·
{{ t('yuhun_target.' + position.properties.yuhun.target)}}·
</span>
</div>
<div v-for="(value, key, index) in position.properties">
@ -67,6 +67,10 @@
</draggable>
</div>
<div>
<QuillEditor v-model:content="content" contentType="html" theme="snow" :toolbar="toolbarOptions"/>
</div>
</div>
</el-row>
@ -78,15 +82,17 @@
<div style="margin: 20px">
<!-- 现有的代码 -->
<div style="margin: 20px">
<span>配置结果</span>
<div style="margin: 20px" data-html2canvas-ignore="true">
<!-- 触发截图的按钮 -->
<button @click="prepareCapture">生成截图</button>
</div>
<!-- 预览弹窗 -->
<el-dialog id="preview-container" v-model="state.previewVisible" width="50%" :before-close="handleClose">
<img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; height: auto;" />
<el-dialog id="preview-container" v-model="state.previewVisible" width="80%" :before-close="handleClose">
<div style="max-height: 500px; overflow-y: auto;">
<img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; display: block;" />
</div>
<!-- <img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; height: auto;" />-->
<span slot="footer" class="dialog-footer">
<el-button @click="state.previewVisible = false">取 消</el-button>
<el-button type="primary" @click="downloadImage">下 载</el-button>
@ -102,8 +108,12 @@ import draggable from 'vuedraggable';
import ShikigamiSelect from './ShikigamiSelect.vue';
import ShikigamiProperty from './ShikigamiProperty.vue';
import html2canvas from 'html2canvas';
import { useI18n } from 'vue-i18n'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css' // 引入样式文件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import shikigamiData from '../data/Shikigami.json';
const dialogTableVisible = ref(false)
// 定义响应式数据
const state = reactive({
@ -120,6 +130,33 @@ const state = reactive({
previewVisible: false, // 控制预览弹窗的显示状态
});
// 获取当前的 i18n 实例
const { t } = useI18n()
// 初始化内容
const content = ref('<p>初始内容</p>')
const content1 = ref('<p>初始内容1</p>')
// 定义工具栏选项
const toolbarOptions = [
[{ 'color': [] }, { 'background': [] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
['link', 'image', 'video', 'formula'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
];
// 定义方法
const closeSelectShikigami = () => {
console.log("close select ====");
@ -178,6 +215,10 @@ const addGroupElement = (groupIndex) => {
state.groups[groupIndex].push({});
};
const ignoreElements = (element) => {
return element.classList.contains('ql-toolbar');
}
const prepareCapture = async () => {
state.previewVisible = true; // 显示预览弹窗
@ -190,7 +231,11 @@ const prepareCapture = async () => {
return;
}
const canvas = await html2canvas(element);
const canvas = await html2canvas(element,{
ignoreElements:ignoreElements,
height:element.scrollHeight
}
);
state.previewImage = canvas.toDataURL();
if (!state.previewImage) {
console.error('Failed to generate image data URL.');
@ -226,4 +271,8 @@ const handleClose = (done) => {
.position-drag-handle {
cursor: move;
}
.ql-toolbar {
display: none;
}
</style>