今天在写需求的时候有个复制功能给实现下，有三种方式可实现

  需求：复制文件名称到航线名，可以减少客户自己输入的操作

效果图：

实现思路：通过模拟输入框的复制来完成对事件的复制 

第一种用ref获取实现

<h3 style=" margin:0px 0px 20px 50px; display: inline-block">航线名：
  <el-input v-model="addPointForm[localIndex].routeInfo.routeName" ref="routeName"placeholder="航线名"
   style="width: 220px; display: inline-block">
</el-input>
</h3>
<el-button type="primary" @click="handleCopy(fileName)" style="margin-left: 20px;">
   同文件名
</el-button>

handleCopy(row) {
 this.$refs.routeName.value = row;
 this.addPointForm[this.localIndex].routeInfo.routeName = row;
},

第二种用原生实现

<h3 style=" margin:0px 0px 20px 50px; display: inline-block">航线名：
  <el-input v-model="addPointForm[localIndex].routeInfo.routeName" ref="routeName"placeholder="航线名"
   style="width: 220px; display: inline-block">
</el-input>
</h3>
<el-button type="primary" @click="handleCopy(fileName)" style="margin-left: 20px;">
   同文件名
</el-button>

copyLink(val) { // 复制链接
    console.log(val, '复制链接')
    let url = val // 后台接口返回的链接地址
    let inputNode = document.createElement('input')  // 创建input
    inputNode.value = url // 赋值给 input 值
    document.body.appendChild(inputNode) // 插入进去
    inputNode.select() // 选择对象
    document.execCommand('Copy') // 原生调用执行浏览器复制命令
    inputNode.className = 'oInput'
    inputNode.style.display = 'none' // 隐藏
    this.$message.success('复制成功')
},

第三种方法用插件去实现vue-clipboard2

1. 安装插件：

cnpm install vue-clipboard2 --save

2. 在main.js里面引入：

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

<h3 style=" margin:0px 0px 20px 50px; display: inline-block">航线名：
  <el-input v-model="addPointForm[localIndex].routeInfo.routeName" ref="routeName"placeholder="航线名"
   style="width: 220px; display: inline-block">
</el-input>
</h3>
<el-button type="primary" @click="handleCopy(fileName)" style="margin-left: 20px;">
   同文件名
</el-button>

methods: {
    copyLink(val) { // 复制链接  val 就是你需要复制的链接
      this.$copyText(val).then(e => {
        this.$Message.success('复制成功！')
      }, e => {
        this.$Message.error('复制失败！')
      })
    },
}

Vue 实现复制功能，具有很好的参考价值，希望对大家有所帮助。