Quellcode durchsuchen

fix: 修复自定义属性异常

tnt group vor 3 Jahren
Ursprung
Commit
97e81d8d99
1 geänderte Dateien mit 13 neuen und 16 gelöschten Zeilen
  1. 13 16
      src/packages/components/Informations/Mores/WordCloud/config.vue

+ 13 - 16
src/packages/components/Informations/Mores/WordCloud/config.vue

@@ -14,7 +14,7 @@
     <setting-item-box name="布局">
       <setting-item name="宽度">
         <n-slider
-          v-model:value="customProps.width"
+          v-model:value="series.width"
           :min="0"
           :max="100"
           :format-tooltip="sliderFormatTooltip"
@@ -23,7 +23,7 @@
       </setting-item>
       <setting-item name="高度">
         <n-slider
-          v-model:value="customProps.height"
+          v-model:value="series.height"
           :min="0"
           :max="100"
           :format-tooltip="sliderFormatTooltip"
@@ -37,20 +37,14 @@
         <n-slider v-model:value="optionData.series[0].sizeRange" range :step="1" :min="6" :max="100" />
       </setting-item>
       <setting-item name="旋转角度">
-        <n-slider
-          v-model:value="customProps.rotationStep"
-          :step="15"
-          :min="0"
-          :max="45"
-          @update:value="updateRotation"
-        />
+        <n-slider v-model:value="series.rotationStep" :step="15" :min="0" :max="45" @update:value="updateRotation" />
       </setting-item>
     </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType, reactive } from 'vue'
+import { PropType, computed } from 'vue'
 import { option, ShapeEnumList } from './config'
 // eslint-disable-next-line no-unused-vars
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
@@ -62,16 +56,19 @@ const props = defineProps({
   }
 })
 
+const series = computed(() => {
+  const { width, height, rotationStep } = props.optionData.series[0]
+  return {
+    width: +width.replace('%', ''),
+    height: +height.replace('%', ''),
+    rotationStep
+  }
+})
+
 const sliderFormatTooltip = (v: number) => {
   return `${v}%`
 }
 
-const customProps = reactive({
-  width: 70,
-  height: 80,
-  rotationStep: 0 // 旋转步长
-})
-
 const updateWidth = (value: number) => {
   // eslint-disable-next-line vue/no-mutating-props
   props.optionData.series[0].width = `${value}%`