vue实现粘贴功能

2021-01-18 13:50:21

vue监听粘贴事件

  • paste事件就是粘贴事件

  • 需要通过clipboardData获得粘贴的内容

<table>
    <tr>
        <td @paste="pasteMe($event)"></td>
    </tr>
</table>

pasteMe() {
    //获得粘贴的文字
    let self = this;
    var data = null;
    var clipboardData = e.clipboardData; // IE
    if (!clipboardData) {
        //chrome
        clipboardData = e.originalEvent.clipboardData;
    }
    data = clipboardData.getData("Text");
}
//如果是要获得粘贴excel的内容,需要把粘贴的内容转换成二维数组
pasteExcel() {
    let self = this;
      var data = null;
      var clipboardData = e.clipboardData; // IE
      if (!clipboardData) {
        //chrome
        clipboardData = e.originalEvent.clipboardData;
      }
      data = clipboardData.getData("Text");
      var rowStrArray = data.split("\n");
      var rows = [];
      for (var i = 0; i < rowStrArray.length; i++) {
        var row = [];
        var tdStrArray = rowStrArray[i].split("\t");
        for (var j = 0; j < tdStrArray.length; j++) {
          row.push(tdStrArray[j]);
        }
        rows.push(row);
      }
      //rows就是获得复制excel的二维数组
}

如果使用了element等UI框架,需要在el-input中使用粘贴事件,@paste.native

<el-input
          size="mini"
          v-model="value"
          placeholder="0.00"
          @paste.native="pasteMe"
></el-input>


  • 2019-04-10 17:25:21

    Joda-Time详解,最好用的java时间工具

    任何企业应用程序都需要处理时间问题。应用程序需要知道当前的时间点和下一个时间点,有时它们还必须计算这两个 时间点之间的路径。使用 JDK 完成这项任务将非常痛苦和繁琐。

  • 2019-04-18 14:49:20

    Android图片加载框架最全解析,带你全面了解Glide 4的用法

    Glide的最新版本已经出到了4.4.0,可以说Glide 4已经是相当成熟和稳定了。而且也不断有朋友一直在留言,想让我讲一讲Glide 4的用法,因为Glide 4相对于Glide 3改动貌似还是挺大的,学完了Glide 3再去使用Glide 4,发现根本就无法使用。

  • 2019-04-23 13:57:37

    replace js 替换全部替换第一个

    RegExp("12333", "g"); 第一个参数是想要替换的内容 第二个参数“g”是匹配全部的意思,也可以换成"t",就是匹配第一个