zhangwei 3 lat temu
rodzic
commit
788158cfab
1 zmienionych plików z 15 dodań i 8 usunięć
  1. 15 8
      src/view/components/font-amount.vue

+ 15 - 8
src/view/components/font-amount.vue

@@ -2,10 +2,13 @@
     <span :style="{ fontSize: amount_font_size + 'px' }">{{ amount }}</span>
 </template>
 <script setup>
-import { ref, defineProps, onMounted } from 'vue'
+import { ref, defineProps, onMounted, watch } from 'vue'
 
 let props = defineProps({
-    amount: String,
+    amount: {
+        type: String,
+        default: ''
+    },
     width: {
         type: Number,
         default: 360
@@ -14,21 +17,25 @@ let props = defineProps({
         type: Number,
         default: 56
     },
-    
+
 })
 
 let amount_font_size = ref(60);
-
-onMounted(() => {
-    console.log(props.amount.length)
+watch(props, () => {
+    setFontSize()
+})
+function setFontSize(){
     let _num = parseInt(props.width / props.amount.length);
-    console.log(_num)
     amount_font_size.value = _num < props.fontSize ? _num : props.fontSize;
+}
+
+onMounted(() => {
+    setFontSize()
 })
 
 </script>
 <style lang="scss" scoped>
-span{
+span {
     word-break: break-all;
 }
 </style>