vue/H5 click to copy dynamic content (mobile phone number)

After stepping on the pit, if the copied content comes through the interface, do not use vue clipboard

(Let’s talk about the results first. If you use it, there are bugs, you need to click twice to copy them. There are strategies on the Internet that point to the trigger once before clicking. But Curry will retrieve the records twice. Thankless)

Here comes the point. Isn’t native call replication good?

(Plugins need to be introduced, and use more native ones to benefit from writing H5 in the future)

<el-button size="mini" type="primary" @click="copy(xx)" >复制</el-button>

The copyData variable must be declared in the middle

async copy(id) {
    
    
                let res=await api_u.getphone({
    
    activityUserId:id})
                this.copyData=res
                var oInput = document.createElement('input'); 
                oInput.value = this.copyData; 
                document.body.appendChild(oInput); 
                oInput.select(); // 选择对象 
                document.execCommand("Copy"); // 执行浏览器复制命令 
                oInput.className = 'oInput'; 
                oInput.style.display='none'; 
                this.$message.success("复制成功!")
            }

Why create a dom? Just do as it is... Just copy it and it will succeed, I don't understand this~ haha. I will come back to add it when I think about it.
————
Create a dom object (input), assign the value to him, add the new object to the body (dom object), simulate user behavior, select it, and perform copying. Add a css class to the new object, and then hide the dom element (because when the dom element is added, the page will have so much html~)