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> <template>
<div class="go-text-box"> <div class="go-text-box">
<div <div class="content">
:style="` <span style="cursor: pointer" v-show="link" @click="click">{{ option.dataset }}</span>
color: ${fontColor}; <span v-show="!link">{{ option.dataset }}</span>
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> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue' import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
@ -31,21 +16,20 @@ import { option as configOption } from './config'
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType>, type: Object as PropType<CreateComponentType & typeof option>,
required: true required: true
} }
}) })
const { w, h } = toRefs(props.chartConfig.attr)
const { const {
linkHead, linkHead,
link, link,
dataset,
fontColor, fontColor,
fontSize, fontSize,
letterSpacing, letterSpacing,
paddingY, paddingY,
paddingX, paddingX,
textAlign,
borderWidth, borderWidth,
borderColor, borderColor,
borderRadius, borderRadius,
@ -76,7 +60,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
// //
const click = () => { const click = () => {
window.open(linkHead.value+link.value) window.open(linkHead.value + link.value)
} }
</script> </script>
@ -84,6 +68,21 @@ const click = () => {
@include go('text-box') { @include go('text-box') {
display: flex; display: flex;
align-items: center; 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> </style>