- 安装插件 clipboard插件
npm install clipboard --save
2.在组件中引入
import Clipboard from 'clipboard';
3.完整代码
<template>
<div>
<a-button type="primary"@click="copyQuotation">复制报价文字</a-button>
</div>
</template>
<script lang="ts">
import {ref, reactive, UnwrapRef,defineComponent,toRaw} from 'vue';
import Clipboard from 'clipboard';
export default defineComponent({
setup(props){
const clipboardText = ref()
const getDataSource = () => {
let str = ''
//dataSource是个对象数组
dataSource.forEach((item,index) => {
str += `
【${index + 1}】、${item.models},${item.specifications},
开发票 单价:${item.unit[0]}元/米,(1米小计:${item.unit[0]}元);
不开发票单价:${item.unit[1]}元/米,(1米小计:${item.unit[1]}元);
-----------
`
})
return clipboardText.value = `
共计${dataSource.length}个型号;到【${formState.serviceProvince}】(镇以上)可以送到楼下:
★开票(含运费)总额为:
145.4元;
★不开票(含运费)总额为:
133元。
-----报价明细如下-------
${str}
★本订单开票(含运费)总额为:145.4元;
★不开票(含运费)总额为:133元。
`
};
const copyQuotation = () => {
Clipboard.copy(getDataSource())
};
};
return {
copyQuotation,clipboardText
}
}
});
</script>
4.复制内容: