el-select下拉选中的值粘贴到剪贴板

最新推荐文章于 2024-11-22 11:11:04 发布

WuxiaoyanR

最新推荐文章于 2024-11-22 11:11:04 发布

阅读量1.3k

点赞数

分类专栏：前端杂烩文章标签： elementui

本文链接：https://blog.csdn.net/qq_37881606/article/details/120507577

版权

前端杂烩专栏收录该内容

23 篇文章 1 订阅

订阅专栏

el-select组件的值再页面鼠标操作没有办法对选中的值进行复制，再粘贴到其他地方

可以利用组件@change，把选中的值粘贴到剪贴板。

代码如下，在选中值后，随便选择一个输入框，进行Ctrl+v，就可以看到效果了。

页面代码

<el-select v-model="dataForm.transType" @change="getSelectText">
    <el-option v-for="item in transTypeList" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"></el-option>
  </el-select>

数据

dataForm: {
   transType: ''
},
transTypeList: [
  { dictValue: 12, dictName: 'ceshi 1' },
  { dictValue: 13, dictName: 'ceshi 2' },
  { dictValue: 14, dictName: 'ceshi 3' },
  { dictValue: 15, dictName: 'ceshi 4' }
]

方法

getSelectText (e) {
      let label = this.transTypeList.filter(item => item.dictValue === e)[0].dictName
      let tempEle= document.createElement('input') // 创建一个输入框，先把要粘贴的值放进去
      tempEle.value = label // 赋值
      document.body.appendChild(tempEle)
      oInput.select() // 对输入框中的内容进行选中
      document.execCommand('Copy') // 浏览器复制方法
      oInput.className = 'tempEle' // 定义新加元素的样式
      oInput.style.display = 'none' // 新加元素没用了，做隐藏
    }