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