SCopyText

Копируемый текст.

В чем отличие от аналогов?

В популярных библиотеках элементов для Vue3 прямого аналога нет.

Базовый пример

ABCD-EFGH-1234-5678

<SCopyText>ABCD-EFGH-1234-5678</SCopyText>

<template>
    <SCopyText>ABCD-EFGH-1234-5678</SCopyText>
</template>

<script setup>
import { SCopyText } from 'startup-ui'
</script>

Внутристрочный пример

Секретный код для копирования

в обычном тексте.

<SCopyText layout="inline">Секретный код для копирования</SCopyText> в обычном тексте.

<template>
    <SCopyText layout="inline">Секретный код для копирования</SCopyText> в обычном тексте.
</template>

<script setup>
import { SCopyText } from 'startup-ui'
</script>

Копируем не то, что выводим

Секретный код: 777

<SCopyText copytext="777">Секретный код: 777</SCopyText>

<template>
    <SCopyText copytext="777">Секретный код: 777</SCopyText>
</template>

<script setup>
import { SCopyText } from 'startup-ui'
</script>

Интерфейс компонента

Свойства (Props)

Название	Тип	По умолчанию	Описание
layout	'input' | 'inline'	'input'	Вид компонента. 'input' — блок с рамкой, 'inline' — текст с пунктирным подчёркиванием.
copytext	string	undefined	Строка, которая будет скопирована в буфер. Если не указана, копируется текст из слота.
size	'small' | 'normal' | 'large'	'normal'	Размер компонента.

Слоты (Slots)

Название	Описание
default	Текстовое содержимое, отображаемое пользователю.