vue / H5 haga clic para copiar contenido dinámico (número de teléfono móvil)

Después de pisar el foso, si el contenido copiado llega a través de la interfaz, no use vue portapapeles

(Primero hablemos de los resultados. Si lo usa, hay errores, debe hacer clic dos veces para copiarlos. Hay estrategias en Internet que apuntan al disparador una vez antes de hacer clic. Pero habrá dos registros de recuperación en Curry . Si estás cerca, debes buscar en CDN. Thankless)

Aquí viene el punto. ¿No es buena la replicación de llamadas nativas?

(Es necesario introducir complementos y utilizar más nativos para beneficiarse de la escritura H5 en el futuro)

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

La variable copyData debe declararse en el medio

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("复制成功!")
            }

¿Por qué crear un dom? Solo hazlo como está ... Solo cópialo y saldrá bien, no entiendo esto ~ jaja. Volveré para agregarlo cuando lo piense.
————
Cree un objeto dom (entrada), asígnele el valor, agregue el nuevo objeto al cuerpo (objeto dom), simule el comportamiento del usuario, selecciónelo y realice la copia. Agregue una clase css al nuevo objeto y luego oculte el elemento dom (porque cuando se agrega el elemento dom, la página tendrá mucho html ~)

Supongo que te gusta

Origin blog.csdn.net/weixin_45629623/article/details/109540176
Recomendado
Clasificación