♻️ 复用方法提出来,暂时砍掉数值渲染

This commit is contained in:
BTMuli
2023-12-19 21:07:28 +08:00
parent bc50acb813
commit 7a36ab6665
6 changed files with 62 additions and 38 deletions

View File

@@ -21,7 +21,7 @@
:key="item.Id"
class="twc-constellation-desc"
>
<span v-html="parseDesc(item.Description)"></span>
<span v-html="parseHtmlText(item.Description)"></span>
</v-window-item>
</v-window>
</div>
@@ -29,28 +29,14 @@
<script setup lang="ts">
import { ref } from "vue";
import { parseHtmlText } from "../../utils/toolFunc";
interface TwcConstellationProps {
data: TGApp.Plugins.Hutao.Character.RhisdTalent[];
}
const props = defineProps<TwcConstellationProps>();
const tab = ref<string>();
function parseDesc(desc: string): string {
const reg = /<color=(.*?)>(.*?)<\/color>/g;
let match = reg.exec(desc);
while (match !== null) {
const color = match[1];
const text = match[2];
desc = desc.replace(
match[0],
`<span title="${text}" style="color: ${color};font-weight: bold;">${text}</span>`,
);
match = reg.exec(desc);
}
desc = desc.replace(/\\n/g, "<br />");
return desc;
}
</script>
<style lang="css" scoped>
.twc-constellations-box {

View File

@@ -16,7 +16,9 @@
</v-tabs>
<v-window v-model="tab">
<v-window-item :value="item.name" v-for="(item, index) in tabValues" :key="index">
{{ data[index] }}
<div class="twc-skill-special">
<span v-html="parseHtmlText(data[index].Description)"></span>
</div>
</v-window-item>
</v-window>
</div>
@@ -24,8 +26,10 @@
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { parseHtmlText } from "../../utils/toolFunc";
interface TwcSkillsProps {
data: TGApp.Plugins.Hutao.Character.RhisdSkill[];
data: TGApp.App.Character.WikiSkill[];
}
const props = defineProps<TwcSkillsProps>();
@@ -62,4 +66,13 @@ onMounted(() => {
.dark .twc-skill-tab img {
filter: brightness(0.75);
}
.twc-skill-normal {
display: flex;
}
.twc-skill-special {
padding-left: 10px;
white-space: pre-wrap;
}
</style>