介绍

本文档主要用于描述 ShadcnLoadingBar 组件的一些特性和使用方法。

用法

查看代码

<template>
    <ShadcnLoadingBar v-model="progress" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import {ref} from "vue"

const progress = ref(50)
</script>

状态 (status)

查看代码

<template>
    <ShadcnLoadingBar v-model="progress" :duration="500" status="error" :dark="darkMode" />
    <ShadcnLoadingBar v-model="progress" :duration="500" status="success" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import {ref} from "vue"

const progress = ref(50)
</script>

服务调用 (service)

查看代码

<template>
  <div class="space-x-4">
    <ShadcnButton @click="LoadingBar.start" :dark="darkMode">Start</ShadcnButton>
    <ShadcnButton @click="LoadingBar.done" :dark="darkMode">Done</ShadcnButton>
    <ShadcnButton type="success" @click="LoadingBar.success()" :dark="darkMode">Success</ShadcnButton>
    <ShadcnButton type="error" @click="LoadingBar.error()" :dark="darkMode">Error</ShadcnButton>
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

  import { LoadingBar } from 'view-shadcn-ui'
</script>

加载条 (Loading Bar) 属性

加载条 (Loading Bar) 事件

加载条服务 (Loading Bar Service)