介绍

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

用法

查看代码

<template>
    <ShadcnSpin v-model="value"  :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 value = ref(false);
</script>

类型 (type)

查看代码

<template>
    <ShadcnSpin type="primary" :dark="darkMode" />
    <ShadcnSpin type="success" :dark="darkMode" />
    <ShadcnSpin type="error" :dark="darkMode" />
    <ShadcnSpin type="warning" :dark="darkMode" />
</template>

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

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

</script>

尺寸 (size)

查看代码

<template>
    <ShadcnSpin type="primary" size="small" :dark="darkMode" />
    <ShadcnSpin type="success" size="default" :dark="darkMode" />
    <ShadcnSpin type="error" size="large" :dark="darkMode" />
</template>

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

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

</script>

固定 (fixed)

查看代码

<template>
    <ShadcnCard title="Spin" :dark="darkMode">
      <div class="relative min-h-[200px]">
        <ShadcnSpin fixed :dark="darkMode" />
      </div>
    </ShadcnCard>
</template>

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

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

</script>

服务 ($Spin)

查看代码

<template>
    <ShadcnButton @click="showSpin" :dark="darkMode">Show Spin</ShadcnButton>
</template>

<script lang="ts">
export default {
    methods: {
          showSpin()
          {
                this.$Spin.show()
                setTimeout(() => {
                    this.$Spin.hide()
                }, 3000)
          }
    }
}
</script>

旋转加载 (Spin) 属性

旋转加载 (Spin) 插槽

旋转加载 (Spin) 事件