Vue3设置函数

Question

我无法理解构建我的 Vue3 应用程序的正确方法。

我正在将一个名为 day 的道具传递到我的组件中，并希望以百分比形式计算已传递到我的计算函数中的时间量。基于该值，我想调整进度条的宽度。我该怎么做？

我尝试了 watch hook 但它没有找到进度条参考。

<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

你可以试试 inline style binding:

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

Vue3设置函数

Vue3 setup function

vuejs3