实现复制功能

template SwitcherOutlined 是 ant-design的一个表示复制的图标

 <div>
    <span style="margin-right: 15px">点击复制一下</span>
    <SwitcherOutlined @click="handleCopy('点击复制一下')" style="cursor: pointer" />
  </div>
  <input type="text" style="height: 0; overflow: hidden" id="copy" v-model="copyText" />

script

<script lang="ts">
	import { defineComponent, ref} from 'vue';
	import { SwitcherOutlined } from '@ant-design/icons-vue';
  	import { message } from 'ant-design-vue';
  	export default defineComponent({
	    components: {
	      SwitcherOutlined,
	    },
	    setup(){
	    	const copyText = ref<string>('');
	    	function handleCopy(val){
	    		copyText.value = val;
		        setTimeout(() => {
		          const copyText2: any = document.getElementById('copy');
		          copyText2.select(); // 选择要复制的对象
		          document.execCommand('Copy'); // 执行浏览器复制命令
		          message.success('复制成功');
		        }, 100);
	    	}
	    	return {
		        handleCopy,
		        copyText,
		    };
	    }
	)}
</script>