Vue3将文本内容一键复制到剪贴板

1. 安装插件 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.复制内容：