Vue-elementUI复制按钮的实现

1,124 阅读1分钟

复制按钮的实现

需求:点击按钮复制当前数据的id

<el-button @click="copy">复制</el-button>

<script>
    copyUrl = 接口
	methods: {
        async copy(){
            let id = this.$route.query.id
            try {
            	let res = await util.httpGet(copyUrl, {id: this.$route.query.id})
              	var input = document.createElement('input')
              	//将input的值设置为需要复制的内容
              	input.value = id;
              	//添加input标签
              	document.body.appendChild(input)
              	//选中input标签
              	input.select()
             	//执行复制
             	document.execCommand('copy')
              	//移除input标签
              	document.body.removeChild(input)
              	this.$message.success("复制成功");
            } catch (err) {
              	this.$message.error("复制失败");
            }
        },
    }
</script>