介绍
本文档主要用于描述 ShadcnCopy 组件的一些功能和用法。
用法
查看代码
vue
<template>
<ShadcnCopy text="Hello Shadcn UI"/>
</template>
<script setup lang="ts">
</script>提示 (tooltip)
查看代码
vue
<template>
<ShadcnCopy text="Hello Shadcn UI"/>
<ShadcnCopy text="Hello Shadcn UI" :tooltip="false"/>
</template>
<script setup lang="ts">
</script>位置 (position)
查看代码
vue
<template>
<ShadcnCopy text="Position" position="top"/>
<ShadcnCopy text="Position" position="bottom"/>
<ShadcnCopy text="Position" position="left"/>
<ShadcnCopy text="Position" position="right"/>
</template>
<script setup lang="ts">
</script>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg flex items-center gap-4', isDark ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<span :class="isDark ? 'text-gray-200' : 'text-white'">复制文本</span>
<ShadcnCopy text="Hello Shadcn UI with Glass Effect" glass :dark="isDark"/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
</script>