fix: 处理文字预览不更新的问题

This commit is contained in:
奔跑的面条 2022-09-27 10:01:43 +08:00
parent c0e38e64db
commit d8fcf4e7d3

View File

@ -1,27 +1,12 @@
<template>
<div class="go-text-box">
<div
:style="`
color: ${fontColor};
padding: ${paddingY}px ${paddingX}px;
font-size: ${fontSize}px;
letter-spacing: ${letterSpacing}px;
writing-mode: ${writingMode};
border-style: solid;
border-width: ${borderWidth}px;
border-radius: ${borderRadius}px;
border-color: ${borderColor};
background-color:${backgroundColor}`"
>
<n-button v-if="link" @click="click" text>
{{ dataset }}
</n-button>
<span v-else>{{ dataset }}</span>
<div class="content">
<span style="cursor: pointer" v-show="link" @click="click">{{ option.dataset }}</span>
<span v-show="!link">{{ option.dataset }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
@ -31,21 +16,20 @@ import { option as configOption } from './config'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
type: Object as PropType<CreateComponentType & typeof option>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const {
linkHead,
link,
dataset,
fontColor,
fontSize,
letterSpacing,
paddingY,
paddingX,
textAlign,
borderWidth,
borderColor,
borderRadius,
@ -76,7 +60,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
//
const click = () => {
window.open(linkHead.value+link.value)
window.open(linkHead.value + link.value)
}
</script>
@ -84,6 +68,21 @@ const click = () => {
@include go('text-box') {
display: flex;
align-items: center;
justify-content: center;
justify-content: v-bind('textAlign');
.content {
color: v-bind('fontColor');
padding: v-bind('`${paddingY}px ${paddingX}px`');
font-size: v-bind('fontSize + "px"');
letter-spacing: v-bind('letterSpacing + "px"');
writing-mode: v-bind('writingMode');
border-style: solid;
border-width: v-bind('borderWidth + "px"');
border-radius: v-bind('borderRadius + "px"');
border-color: v-bind('borderColor');
background-color: v-bind('backgroundColor');
}
}
</style>