【技术实战】Vue功能样式实战【一】

合集 - 【实战积累】前端功能实战(7)

1.【技术实战】Vue功能样式实战【一】07-24

2.【技术实战】Vue功能样式实战【二】07-253.【技术实战】Vue功能样式实战【三】07-264.【技术实战】Vue功能样式实战【四】07-285.【技术实战】Vue功能样式实战【五】07-296.【技术实战】Vue功能样式实战【六】08-127.【技术实战】Vue功能样式实战【七】08-13

收起

需求实战一

组件来源

• ant-design-vue
• Button 按钮
• Progress 进度条

效果展示

代码展示

<template>
    <ARow>
        <ACol>
            <div style="padding:30px">    <a-progress type="circle" :percent="number" />
            div>
            <div style="padding:30px 0 30px 50px">    <a-button type="primary" @click="addNumber">增加数值a-button>
            div>
                <div style="padding:30px 0 30px 50px">
                <a-button type="primary" @click="minNumber">增加数值a-button>
                div>
        ACol>
    ARow>



template>
<script setup lang="ts">
const number=ref(80);

const addNumber = () => {
number.value=number.value+10;
};
const minNumber = () => {
number.value=number.value-10;
};
script>

代码解读

这段代码是一个Vue组件的模板和脚本部分。它包含一个进度条和两个按钮，点击按钮可以增加或减少进度条的数值。

 

在模板部分，使用了Ant Design Vue库中的ARow和ACol组件来创建一个行列布局。进度条使用了a-progress组件，并通过:percent属性绑定了一个名为number的变量，表示进度条的数值。

 

在脚本部分，使用了Vue 3的