wview组件库Appearance
progress 进度条
用于展示任务处理的速度或工作完成的进度
progress的使用
基本使用
使用type来选择进度条
展开代码
vue
<template>
<h3>loading</h3>
<Progress type="loading" />
<h3>error</h3>
<Progress type="error" />
<h3>step</h3>
<Progress type="step" />
</template>
<script lang="ts" setup>
import { Progress } from 'wviewui'
</script>
进度条长度
通过val属性控制进度条百分比
展开代码
vue
<template>
<Progress type="step" :val="0" />
<Progress type="step" :val="20" />
<Progress type="step" :val="40" />
<Progress type="step" :val="60" />
<Progress type="step" :val="80" />
<Progress type="step" :val="100" />
</template>
<script lang="ts" setup>
import { Progress } from 'wviewui'
</script>
文字显示
通过show-text属性选择是否显示数值
展开代码
vue
<template>
<Progress type="step" :val="0" :show-text="true" />
<Progress type="step" :val="5" :show-text="true" />
<Progress type="step" :val="20" :show-text="true" />
<Progress type="step" :val="50" :show-text="true" />
<Progress type="step" :val="80" :show-text="true" />
<Progress type="step" :val="100" :show-text="true" />
</template>
<script lang="ts" setup>
import { Progress } from 'wviewui'
</script>
进度条长度
通过width属性控制进度条长度
展开代码
vue
<template>
<Progress type="loading" :val="state.val" width="30%" />
<Progress type="error" :val="state.val" width="50%" />
<Progress type="step" :val="state.val" width="100%" />
</template>
<script lang="ts" setup>
import { Progress } from 'wviewui'
import { reactive } from 'vue'
const state = reactive({
val: 0
})
setInterval(() => {
if (state.val < 100) state.val += 10
}, 2000)
</script>
<style lang="scss" scoped></style>
动画进度条
可以使用定时器来实现
展开代码
vue
<template>
<Progress type="loading" :val="state.val" :show-text="true" />
<Progress type="error" :val="state.val" :show-text="true" />
<Progress type="step" :val="state.val" :show-text="true" />
</template>
<script lang="ts" setup>
import { Progress } from 'wviewui'
import { reactive } from 'vue'
const state = reactive({
val: 0
})
setInterval(() => {
if (state.val < 100) state.val += 10
}, 2000)
</script>
<style lang="scss" scoped></style>