Javascript vue-将密码输入字段复制到剪贴板

我的vue应用程序中有一个表单输入，用于创建密码。我已成功添加一个显示/隐藏密码的按钮。我想添加一个复制到剪贴板的功能，让用户复制并粘贴在一个安全的地方的密码，但它不工作。我做错了什么

模板代码

      <small class="font-wieght-bold text-success mb-0" v-if="isCopied">Copied</small>
      
      <div class="input-group">
        <input :type="showPassword ? 'text' : 'password'" class="form-control" ref="password" required v-model="password">
        <div class="input-group-append">
          <button class="btn btn-secondary" @click.prevent="copyToClipboard()"><i class="fas fa-clipboard"></i></button>
        </div>
      </div>

---

您需要复制v模型的内容，而不是输入本身

可以使用这样的函数从变量中复制

它创建一个新的文本框，使用“复制”命令，然后立即将其删除。全部在单个事件循环中，因此它甚至不会渲染

const copyTextToClipboard=（text）=>{
const textArea=document.createElement（'textArea'）
//
//***此样式是一个额外步骤，可能不需要***
//
//为什么会在这里？为了确保：
//1.元素能够有焦点和选择。
//2.如果元素要进行flash渲染，则其视觉影响最小。
//3.在选择和复制时，较少出现**可能**的片状，如果
//textarea元素不可见。
//
//很可能元素甚至不会渲染，甚至连一个闪光都不会，
//所以其中一些只是预防措施。但是在IE元素中
//当弹出框询问用户的权限时可见
//要复制到剪贴板的网页。
//
//放置在屏幕左上角，与滚动位置无关。
textArea.style.position='fixed'
textArea.style.top='0'
textArea.style.left='0'
//确保其宽度和高度较小。设置为1px/1em
//不起作用，因为这在某些浏览器上会产生负w/h。
textArea.style.width='2em'
textArea.style.height='2em'
//我们不需要填充，如果它进行flash渲染，则可以减小大小。
textArea.style.padding=0
//清理边界。
textArea.style.border='none'
textArea.style.outline='none'
textArea.style.boxShadow='none'
//如果出于任何原因渲染，请避免白色框闪烁。
textArea.style.background='transparent'
textArea.value=文本
document.body.appendChild（textArea）
textArea.select（）
试一试{
const successful=document.execCommand（'copy'）
const msg=successful？'successful'：'successful'
console.log（'复制文本命令为'+msg）
}捕捉（错误）{
console.log（'Oops，无法复制'）
}
document.body.removeChild（textArea）
}

作为我尝试过的公认答案之一的替代解决方案。特别是，我使用该方法将v模型数据直接复制到剪贴板中，并且它还可以与

以下是

copyToClipboard（）

方法的重构代码：

    copyToClipboard() {
      navigator.clipboard.writeText(this.password);
      this.isCopied = true;
      setTimeout( () => { this.isCopied = !this.isCopied },3000);
    }

---

回答你的问题了吗？当

type=password

时，它可能不起作用。谢谢您的回答。我将修改该方法以直接复制v模型数据，而不是选择输入内容然后复制它。还有什么方法可以避免创建textarea来复制数据吗？@newbiedev我不知道。但它从未出现过。这一切都发生在单个事件循环中。writeText是一个承诺。你应该这样做。那就等着吧。如果用户拒绝权限，则应该出错。所以你应该试着抓住等待，或者抓住承诺。

    copyToClipboard() {
      navigator.clipboard.writeText(this.password);
      this.isCopied = true;
      setTimeout( () => { this.isCopied = !this.isCopied },3000);
    }