fix: 处理文字预览不更新的问题
This commit is contained in:
parent
c0e38e64db
commit
d8fcf4e7d3
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user