vue事件监听

一、vue @事件.native和@事件.stop和@事件.self：

1、native原生点击事件：给vue组件绑定原生事件时候，必须加上native ，否则会认为监听的是来自vue组件自定义的事件，如果这个vue组件没有这个事件，则不会生效。

如vue的el-option组件没有click事件，如果写@click不会触发事件，需要加上native：

<el-option  value="导出" @click.native="export"> 
          导出      </el-option>

2、 给div绑定click事件，加上native会不生效，去掉native即可

二、实例：

1、键盘监听事件：

 <el-input v-model="fileServiceContext" :disabled="updateDisable" :maxlength="200"
      @keyup.native="serviceContextChange($event)"></el-input>


    //输入正整数或者两位的小数
    handleNumber(e) {
      let value = e.target.value;
      var keynum = window.event ? e.keyCode : e.which; //获取键盘码
      var keychar = String.fromCharCode(keynum); //获取键盘吗对应的字符
      if (keynum == 189) {
        this.$message.warning('禁止输入负数');
        e.target.value = '';
      }
      if (value > 1000000000 || value < 0) {
        this.$message.warning('请填写0-100之间的数字');
        e.target.value = '';
      }
      let numbers = value.toString().split('.');
      if (numbers.length > 0) {
        if (numbers[1].length > 2) {
          this.$message.warning('仅允许保留两位小数');
          e.target.value = '';
        }
      }
    },

注意e.targer.value改改变了输入框的值，不改变v-modle绑定对象的值，比如这里输入不合法e.targer.value值为''，页面上会变成''，但是v-modle绑定的值还是之前不合法的值，如果需要v-modle的值也跟着改变，可以这样：

              <el-input v-model="project.projectName" class="selectandinput" :disabled="updateDisable"   @keyup.native="inputLengthChange($event, 50,'项目名称',project,'projectName')" ></el-input>

  //处理输入框
    inputLengthChange(e, maxLength, name, obj, key) {
      let value = e.target.value;
      if (value.length > maxLength) {
        this.$message.warning(name + '字数不能超过' + maxLength);
        e.target.value = value.substring(0, maxLength);
        obj[key] = e.target.value;
      }
    }

2、鼠标移入监听：

如字符过多以...隐藏其他内容，当鼠标移入时展示全部内容：

 <el-table-column label="涉及产品" min-width="90" align="center">
              <template slot-scope="scope">
                <span
                  :style="{color:'red' ,
                      'text-decoration': (scope.row.status==2) ? 'line-through' : 
                 'none'}"
                >
                
                 <template v-if="scope.row.productInfo.length  ===1">{{scope.row.productInfo[0].label}}</template>
                <template v-if="scope.row.productInfo.length  > 1">
                  <span @mouseenter="handleMoneyEnter($event,scope.row.productInfo)">{{scope.row.productInfo[0].label}}...</span>
                </template>
                </span>
              </template>
            </el-table-column>



  handleMoneyEnter(e, productInfo) {
      let val = '';
      productInfo.forEach(item => {
        val += '  ' + item.label;
      });
      e.target.title = val;
    },