前言: 有个小需求,需要写成组件,在当前页面多次重复写的一个icon,点击复制当前内容到粘贴板,为了方便封装成组件了,具体就不在这赘述了
注意: 原生的粘贴方法里面不能去放异步操作,会失效= =最好在父组件确定字段,直接一次性拿到所有内容
啰啰嗦嗦的独白: 可看可不看(因为我是详情页有默认反显值,默认值有外网有需要脱敏值,还好跟后端商量了下,一次性接口返回给我就行了,我再塞给子组件里面的变量,点击的时候根据点击按钮的不同去获取接口返回的不同的脱敏值)

// HTML
<template><div><Icon type='ios-copy' size='23' @click='copyTheClipboard' class='ios_copy'/></div>
</template>
<script>export default ({name:'',prop: {pasteBoard: Object}data () {return {}},},created () {},methods: {copyTheClipboard () {let val = ''let that = this// 不同的位置点击传不同的值区分if (this.differentiate == 'name' ) {// 父组件传过来的默认脱敏值val = that.pasteBoard.customName}const save = function (e) {e.clipboardData.setData('text/plain', val) // 塞数据到剪贴板e.preventDefault();  // 阻止默认事件}document.addEventListener('copy', save);document.execCommand('copy'); // 复制that.$Message.success('复制成功')document.removeEventListener('copy', save); // **复制ok之后记得要移除绑定事件}}})
</script>
<style lang='less' scoped>
</style>