博客

vue 回车事件

1. 首页

<template>
  <div class="index">
            <input class="inp" 
            	   v-model="input" 
            	   placeholder="请输入" 
            	   @keyup.enter="getCompanySearchList">
            <el-button class="searchBtn" 
            		   slot="append" 
            		   @click="getCompanySearchList">
            	搜索
            </el-button> 
  </div>
</template>

<script>
export default {
    components: {
    },
    data() {
      return {
        input: ''
      };
    },
    watch:{
    },
    created(){
    },
    methods: {
      getCompanySearchList(){
        this.$router.push({
              name : 'list',
              query : {
                val : this.input
              }
          })    
      },
    }
}
</script>

<style>
</style>

当点击搜索或者按下回车的时候，触发getCompanySearchLis事件，跳转到列表页。

2. 列表页

<template>
  <div class="list">
        <el-input size="mini" 
                        suffix-icon="el-icon-search" 
                        class="hSearch" 
                        v-model="input" 
                        placeholder="请输入企业名称/证券和代码"  
                        @keyup.enter.native="getComList">
        </el-input>
  </div>
</template>

<script>
import {getCompanySearch} from '@/index.js';
export default {
  components: {
  },
  data() {
      return {
        input: '',
        comList: []
      };
    },
  watch:{
  },
  created(){
      this.input = this.$route.query.val;
  },
  mounted(){
    this.getComList();
  },
  methods: {
    getComList(){
        // console.log(this.input);
        const params = {
          inp: this.input,
        }
        getCompanySearch(params).then(res => {
          if(res.statusCode === 200){
            this.comList = res.content;
          }
        })
      },
    }
}
</script>

<style lang="scss" scoped>

</style>

原生input的回车事件： @keyup.enter=“事件名”

element UI中的回车事件，加.native修饰符：@keyup.enter.native=“事件名”