美文网首页
VUE取消input回车换行的问题

VUE取消input回车换行的问题

作者: 吴小冷 | 来源:发表于2021-02-07 13:14 被阅读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);
        }
        }
    

    相关文章

      网友评论

          本文标题:VUE取消input回车换行的问题

          本文链接:https://www.haomeiwen.com/subject/fvrztltx.html