| 提交 | 用户 | 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> | |
