|
@@ -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>
|