提交 | 用户 | age
|
2f6253
|
1 |
<template> |
31ff05
|
2 |
<PageWrapper title="文本复制示例"> |
4d7001
|
3 |
<CollapseContainer class="w-full h-32 bg-white rounded-md" title="Copy Example"> |
2f6253
|
4 |
<div class="flex justify-center"> |
陈 |
5 |
<a-input placeholder="请输入" v-model:value="value" /> |
9edc28
|
6 |
<a-button type="primary" @click="handleCopy"> Copy </a-button> |
2f6253
|
7 |
</div> |
陈 |
8 |
</CollapseContainer> |
31ff05
|
9 |
</PageWrapper> |
2f6253
|
10 |
</template> |
陈 |
11 |
<script lang="ts"> |
|
12 |
import { defineComponent, unref, ref } from 'vue'; |
|
13 |
import { CollapseContainer } from '/@/components/Container/index'; |
|
14 |
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; |
|
15 |
import { useMessage } from '/@/hooks/web/useMessage'; |
31ff05
|
16 |
import { PageWrapper } from '/@/components/Page'; |
6392b7
|
17 |
import { Input } from 'ant-design-vue'; |
2f6253
|
18 |
|
陈 |
19 |
export default defineComponent({ |
c303ec
|
20 |
name: 'Copy', |
6392b7
|
21 |
components: { CollapseContainer, PageWrapper, [Input.name]: Input }, |
2f6253
|
22 |
setup() { |
陈 |
23 |
const valueRef = ref(''); |
|
24 |
const { createMessage } = useMessage(); |
|
25 |
const { clipboardRef, copiedRef } = useCopyToClipboard(); |
|
26 |
|
|
27 |
function handleCopy() { |
|
28 |
const value = unref(valueRef); |
|
29 |
if (!value) { |
|
30 |
createMessage.warning('请输入要拷贝的内容!'); |
|
31 |
return; |
|
32 |
} |
|
33 |
clipboardRef.value = value; |
|
34 |
if (unref(copiedRef)) { |
|
35 |
createMessage.warning('copy success!'); |
|
36 |
} |
|
37 |
} |
|
38 |
return { handleCopy, value: valueRef }; |
|
39 |
}, |
|
40 |
}); |
|
41 |
</script> |