VUE el-input 复制功能

<el-form-item label="直播流地址：">
              <el-input v-model="formdata.informationFlowUrl" style="width:400px" disabled id="demoInput"></el-input>
              <el-button @click="handleCopyText(formdata.informationFlowUrl)">点击复制</el-button>
 </el-form-item>

   //复制
    handleCopyText(url) {
      // 创建一个 Input标签
      const cInput = document.createElement('input')
      cInput.value = url
      document.body.appendChild(cInput)
      cInput.select() // 选取文本域内容;
      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效
      document.execCommand('Copy')
      this.$message.success("复制成功")
      /// 复制成功后再将构造的标签 移除
      cInput.remove()
    },

image.png

ps:

复制到剪贴板
借助navigator.clipboard.writeText可以很容易的讲文本复制到剪贴板

规范要求在写入剪贴板之前使用 Permissions API 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的API。有关详细信息，请查看compatibility table and Clipboard availability in Clipboard。

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
    
copyToClipboard("Hello World");