feat(projects): 添加插件示例:剪贴板

This commit is contained in:
恕瑞玛的皇帝
2024-05-07 15:38:07 +08:00
committed by Soybean
parent 4d17cfdcd3
commit 019f80faef
7 changed files with 67 additions and 2 deletions

View File

@@ -0,0 +1,31 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useClipboard } from '@vueuse/core';
const source = ref('');
const { copy, isSupported } = useClipboard();
function handleCopy() {
if (!isSupported) {
window.$message?.error('您的浏览器不支持Clipboard API');
return;
}
if (!source.value) {
window.$message?.error('请输入要复制的内容');
return;
}
copy(source.value);
window.$message?.success(`复制成功:${source.value}`);
}
</script>
<template>
<div class="h-full">
<NCard title="文本复制" :bordered="false" class="h-full rounded-8px shadow-sm">
<NInputGroup>
<NInput v-model:value="source" placeholder="请输入要复制的内容吧" />
<NButton type="primary" @click="handleCopy">复制</NButton>
</NInputGroup>
</NCard>
</div>
</template>