介绍
本文档主要用于描述 ShadcnLoadingBar 组件的一些特性和使用方法。
用法
查看代码
vue
<template>
<ShadcnLoadingBar v-model="progress"/>
</template>
<script setup lang="ts">
import {ref} from "vue"
const progress = ref(50)
</script>状态 (status)
查看代码
vue
<template>
<ShadcnLoadingBar v-model="progress" :duration="500" status="error"/>
<ShadcnLoadingBar v-model="progress" :duration="500" status="success"/>
</template>
<script setup lang="ts">
import {ref} from "vue"
const progress = ref(50)
</script>服务调用 (service)
查看代码
vue
<template>
<div class="space-x-4">
<ShadcnButton @click="LoadingBar.start">Start</ShadcnButton>
<ShadcnButton @click="LoadingBar.done">Done</ShadcnButton>
<ShadcnButton type="success" @click="LoadingBar.success()">Success</ShadcnButton>
<ShadcnButton type="error" @click="LoadingBar.error()">Error</ShadcnButton>
</div>
</template>
<script setup lang="ts">
import { LoadingBar } from 'view-shadcn-ui'
</script>