介绍
本文档主要用于描述 ShadcnSpin 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnSpin v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(false);
</script>类型 (type)
查看代码
vue
<template>
<ShadcnSpin type="primary"/>
<ShadcnSpin type="success"/>
<ShadcnSpin type="error"/>
<ShadcnSpin type="warning"/>
</template>
<script setup lang="ts">
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnSpin type="primary" size="small"/>
<ShadcnSpin type="success" size="default"/>
<ShadcnSpin type="error" size="large"/>
</template>
<script setup lang="ts">
</script>固定 (fixed)
查看代码
vue
<template>
<ShadcnCard title="Spin">
<div class="relative min-h-[200px]">
<ShadcnSpin fixed/>
</div>
</ShadcnCard>
</template>
<script setup lang="ts">
</script>服务 ($Spin)
查看代码
vue
<template>
<ShadcnButton @click="showSpin">Show Spin</ShadcnButton>
</template>
<script lang="ts">
export default {
methods: {
showSpin()
{
this.$Spin.show()
setTimeout(() => {
this.$Spin.hide()
}, 3000)
}
}
}
</script>