Vue3设置函数

Question

我很难理解如何构造我的Vue3应用程序。

我将一个名为“天”的道具传递到我的组件中，并希望以百分比计算我的计算函数中的时间量。根据这个值，我想调整进度条的宽度。我该怎么做？

我试过手表挂钩，但它没有找到进度条参考。

<template>
    <div class="progress-bar" ref="progressbar">  {{ percentages}}   </div> 
</template>

<script>
import { computed, ref } from "@vue/reactivity";
import { watch} from 'vue'
export default {
    name: 'Progress',
    props:{
        day: Number,
    },
    setup(props){

        const progressbar = ref(null);

        const percentages = computed (() =>{
            return  ( props.day / 14 * 100) .toFixed();
        })
        watch(percentages, () => {
            progressbar.style.width = `${percentages.value}%`;
        })

        return { percentages, progressbar }

    }    

}

Answer 1

你可以试试内联样式绑定

<template>
  <div 
    class="progress-bar"
    ref="progressbar"
    :style="{ 'width': percentages + '%' }"
  >{{ percentages }}</div> 
</template>

<script>
import { computed, ref } from "@vue/reactivity";
export default {
    name: 'Progress',
    props: {
        day: Number,
    },
    setup(props) {

        const progressbar = ref(null);

        const percentages = computed(() =>{
            return (props.day / 14 * 100).toFixed();
        })

        return { percentages, progressbar }
    }    
}

使用script setup时，相同的代码会更短一些

<template>
  <div 
   class="progress-bar"
   ref="progressbar"  
   :style="{ 'width': percentages + '%' }">{{ percentages }}
  </div> 
</template>

<script setup>
import { computed, ref } from 'vue';
const props = defineProps({
  day: Number
})

const progressbar = ref(null);

const percentages = computed(() => props.day / 14 * 100).toFixed())
</script>