60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<docs>
|
|
---
|
|
order: 5
|
|
title:
|
|
zh-CN: 进度圈动态展示
|
|
en-US: Dynamic circular progress bar
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
会动的进度条才是好进度条。
|
|
|
|
## en-US
|
|
|
|
A dynamic progress bar is better.
|
|
|
|
</docs>
|
|
|
|
<template>
|
|
<div>
|
|
<a-progress type="circle" :percent="defaultPercent" />
|
|
<a-button-group>
|
|
<a-button @click="decline">
|
|
<template #icon><minus-outlined /></template>
|
|
</a-button>
|
|
<a-button @click="increase">
|
|
<template #icon><plus-outlined /></template>
|
|
</a-button>
|
|
</a-button-group>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
|
import { defineComponent, ref } from 'vue';
|
|
export default defineComponent({
|
|
components: {
|
|
MinusOutlined,
|
|
PlusOutlined,
|
|
},
|
|
setup() {
|
|
const defaultPercent = ref<number>(0);
|
|
|
|
const increase = () => {
|
|
const percent = defaultPercent.value + 10;
|
|
defaultPercent.value = percent > 100 ? 100 : percent;
|
|
};
|
|
|
|
const decline = () => {
|
|
const percent = defaultPercent.value - 10;
|
|
defaultPercent.value = percent < 0 ? 0 : percent;
|
|
};
|
|
return {
|
|
defaultPercent,
|
|
increase,
|
|
decline,
|
|
};
|
|
},
|
|
});
|
|
</script>
|