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>


  • 2020-05-06 14:43:53

    bootstrap @media尺寸

    超大屏,1100分辨率,880分辨率,720分辨率,440分辨率以下

  • 2020-05-06 22:23:15

    使用querySelector添加移除style和class

    document.querySelector(selector).style.styleName = 样式 使用这个方法可以对dom节点添加和移除style样式,其中的styleName可以为css样式的任何值,如:display、color

  • 2020-05-07 13:05:28

    JavaScript中批量设置Css样式

    setAttribute() 方法添加指定的属性,并为其赋指定的值。 如果这个指定的属性已存在,则仅设置/更改值

  • 2020-05-07 13:07:21

    scrollBox 跑马灯滚动js

    ​这个插件可以很好的实现跑马灯,以及轮播图等效果,scrollBox js