iview 中事件处理函数中的$event参数获取原生事件发出的信息

原创
2019/11/10 12:58
阅读数 324

 

原文链接: iview 中事件处理函数中的$event参数获取原生事件发出的信息

上一篇: js 运行时

下一篇: vuex-router-sync 将vuex和route 相结合

在每一次输入框数据变化时, 获取到输入框对应的数组下标和新的数据

 

一、最近用 iview 遇到这样一个需求,在使用 iview 的组件时,希望在其定义的某个钩子事件的处理函数中传递额外的一个参数,同时又不影响该钩子事件默认的返回值。最后在网上查找资料找到了解决办法,这里把解决方案贴出来,仅供大家参考!

二、我们以 iview 中 Input 组件为例,首先根据 iview 中 Input 组件的文档可以知道,on-change 事件是有默认返回值 event 的,我们保留 event 返回值的情况下,额外传递一个 id 参数,$event 参数即表示 on-change 时间默认的返回的参数,代码写法如下
其中事件处理函数 change 的第二个第一个参数 1,代表额外传递的 id 参数,第二个参数 $event 即代表默认的 event 返回值

<template>
  <div id="app">
    app
    <button @click="add"> add</button>
    <ul>
      <li v-for="(s,index) in stus">
        <Input v-model="s.name" @input="change(index,$event)" />
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        stus: []
      }
    },
    methods: {
      add() {
        this.stus.push(
          {name: ""}
        )
      },
      change(index, name) {
        console.log(index, name)
      }
    }
  }
</script>
<style lang="less">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  #nav {
    padding: 30px;

    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
</style>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部