剪贴板 Clipboard

#基础用法

Install command

clipboard/basic.vue

<script setup lang="ts">
import { Clipboard } from "@bysages/vue";
</script>

<template>
  <Clipboard.Root default-value="pnpm add @bysages/vue">
    <Clipboard.Label>Install command</Clipboard.Label>
    <Clipboard.Control>
      <Clipboard.Input />
      <Clipboard.Trigger>
        <Clipboard.Indicator>
          <template #copied>✓</template>
          ⧉
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>
</template>

#属性

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Indicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Input

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	值输入框和复制按钮的高度，可为 `sm`、`md` 或 `lg`
`defaultValue`	`string`		初始复制到剪贴板的值；无需控制剪贴板值时使用
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; input: string; label: string; }>`		剪贴板组件内各元素的 id；便于组合使用
`modelValue`	`string`		剪贴板组件的 v-model 值
`timeout`	`number`	`3000`	复制超时时间
`translations`	`clipboard.IntlTranslations`		无障碍元素及其状态的本地化文案

#Trigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ValueText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。