VUE取消input回车换行的问题

2021-02-07  本文已影响0人  吴小冷
<el-form-item>
    <el-input 
      placeholder="请输入关键词后回车确认"
      type="textarea" 
      maxlength="10" 
      v-model="keyword" 
      @keydown.native="pushKeyword($event)"
      :rows="4">
</el-input>
<div class="keyword">
    <el-tag 
      v-for="(tag,index) in feedsForm.keyword"
      :key="tag"
      closable
      type="info"
      @close="handleClose(index)">
      {{tag}}
    </el-tag>

    <span class="length">
      <span class="num">{{feedsForm.keyword.length}}</span>/ 10
    </span>
</div>
</el-form-item>
data() {
    return {
    feedsForm:{},
      keyword: "",
},

methods:{
 // 获取关键词
    pushKeyword(event) {
      if (event.keyCode === 13) {
        event.preventDefault(); // 阻止浏览器默认换行操作
        if (this.keyword && this.feedsForm.keyword.length < 10) {
          this.feedsForm.keyword.push(this.keyword);
        }
        this.keyword = "";
        return false;
      }
    },
    // 关键词关闭事件
    handleClose(index) {
      this.feedsForm.keyword.splice(index, 1);
      // debugger;
      console.log(index);
    }
    }
上一篇下一篇

猜你喜欢

热点阅读