| | |
| | | <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-input placeholder="请输入" v-model:value="valueRef" /> |
| | | <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'; |
| | | <script lang="ts" setup> |
| | | import { unref, ref } from 'vue'; |
| | | import { CollapseContainer } from '@/components/Container'; |
| | | import { useMessage } from '@/hooks/web/useMessage'; |
| | | import { PageWrapper } from '@/components/Page'; |
| | | import { copyText } from '@/utils/copyTextToClipboard'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'Copy', |
| | | components: { CollapseContainer, PageWrapper }, |
| | | setup() { |
| | | const valueRef = ref(''); |
| | | const { createMessage } = useMessage(); |
| | | const { clipboardRef, copiedRef } = useCopyToClipboard(); |
| | | const valueRef = ref(''); |
| | | const { createMessage } = useMessage(); |
| | | |
| | | 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 }; |
| | | }, |
| | | }); |
| | | function handleCopy() { |
| | | const value = unref(valueRef); |
| | | if (!value) { |
| | | createMessage.warning('请输入要拷贝的内容!'); |
| | | return; |
| | | } |
| | | copyText(value); |
| | | } |
| | | </script> |