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>


  • 2017-04-15 23:56:30

    onInterceptTouchEvent和onTouchEvent调用关系详解

    如果没有onInterceptTouchEvent,只考虑onTouchEvent的话,比较容易分析和理解。假如有三层布局结构,linearLayout1,linearLayout2,textView,从前到后是包含的关系。那么下面分情况说明。

  • 2017-04-16 19:36:32

    ViewPager预加载问题和onCreateView多次调用问题的解决

    1,在使用ViewPager嵌套Fragment的时候,由于VIewPager的几个Adapter的设置来说,都会有一定的预加载(默认是左右各一个Frament)。通过设置setOffscreenPageLimit(int number) 来设置预加载的熟练,在V4包中,默认的预加载是1,即使你设置为0,也是不起作用的,设置的只能是大于1才会有效果的。我们需要通过更改V4包中的默认属性才可以

  • 2017-04-16 21:02:55

    ImageView的android:adjustViewBounds属性

    取值为true时: Adjust the ImageView's bounds to preserve the aspect ration of its drawable. 调整ImageView的界限来保持图像纵横比不变。 这并不意味着ImageView的纵横比就一定和图像的纵横比相同

  • 2017-04-18 17:12:50

    Laravel 读取 config 下的数据

    Laravel的config下一般存放配置信息,可以通过config('key')方法获取指定的数据。 设置值可通过「点」式语法读取,其中包含要访问的文件名以及选项名称。