vue事件监听

Dear 丶 2023-02-26 04:28 17阅读 0赞

一、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;
        },