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>


  • 2018-01-23 02:22:17

    andorid,把控件置于最顶端。bringToFront的意外发现

     bringToFront方法在SDK中的说明是“Change the view's z order in the tree, so it's on top of other sibling views”,翻译过来就是改变view的z轴,使其处在他父view的顶端。关于bringToFront的实现,网上有很多资料介绍,大体来说就是将这个view从父view中移除,然后再加入父view的顶端。具体实现如何呢?

  • 2018-01-26 01:05:22

    Android在thread中Toast不能显示问题解决

    一般如果不是在主线程中又开启了新线程的话,一般都会碰到这个问题。 原因是在创建新线程的时候默认情况下不会去创建新的MessageQueue。