70 lines
2.1 KiB
Plaintext
70 lines
2.1 KiB
Plaintext
<template>
|
|
<div>
|
|
<div class="n-layout-page-header">
|
|
<a-card :bordered="false" title="文本复制">
|
|
文本复制示例，用于常规订单号，编号，快速复制等场景
|
|
</a-card>
|
|
</div>
|
|
<a-card
|
|
:bordered="false"
|
|
title="基本信息"
|
|
class="mt-4 proCard"
|
|
size="small"
|
|
:segmented="{ content: 'hard' }"
|
|
>
|
|
<a-descriptions label-placement="left" class="py-2">
|
|
<a-descriptions-item>
|
|
<template #label>收款人姓名</template>
|
|
啊俊
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</a-descriptions-item>
|
|
<a-descriptions-item label="付款类型">支付宝</a-descriptions-item>
|
|
<a-descriptions-item label="付款账户">
|
|
{{ account }}
|
|
<a-button type="primary" @click="handleAccountCopy">复制</a-button>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="转账金额">
|
|
<a-space>
|
|
<a-input v-model:value="money" placeholder="输入金额，试试" />
|
|
<a-button type="primary" @click="handleMoneyCopy">复制</a-button>
|
|
</a-space>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="状态">
|
|
<a-tag type="success"> 已到账</a-tag>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, unref } from 'vue';
|
|
import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard';
|
|
import { message } from 'ant-design-vue';
|
|
|
|
const { clipboardRef, copiedRef } = useCopyToClipboard();
|
|
|
|
const account = ref('NaiveUiAdmin@163.com');
|
|
const money = ref(null);
|
|
|
|
function handleAccountCopy() {
|
|
const value = unref(account.value);
|
|
clipboardRef.value = value;
|
|
if (unref(copiedRef)) {
|
|
message.success(`拷贝成功：${value}`);
|
|
}
|
|
}
|
|
|
|
function handleMoneyCopy() {
|
|
const value = unref(money.value);
|
|
if (!value) {
|
|
message.warning('请输入要复制的内容！');
|
|
return;
|
|
}
|
|
clipboardRef.value = value;
|
|
if (unref(copiedRef)) {
|
|
message.success(`拷贝成功：${value}`);
|
|
}
|
|
}
|
|
</script>
|