Skip to content

介绍


本文档主要用于描述 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>

复制 (Copy) 属性

复制 (Copy) 事件

复制 (Copy) 插槽