2020-07-05 elementui系列:input回车事件,阻止原生刷新页面事件,slot

526 阅读1分钟
     <el-form label-width="130px" @submit.native.prevent>
        <el-form-item label="资料搜索">
          <el-input placeholder="请输入您要查找的内容" v-model="inputSearch" @keyup.enter.native="search">
            <span slot="append" @click="search"></span>
          </el-input>
        </el-form-item>
      </el-form>

1.监听原生input的话使用@keyup.enter,封装组件比如elementui的话就要这么写:@keyup.enter.native

2.在 vue+elementui 中只有一个el-input的情况下,回车会提交表单,在 el-form 上加上@submit.native.prevent这个则会阻止表单回车提交

3.<span slot="append">

复合型输入框,可前置或后置元素,一般为标签或按钮 slot = " append/prepend "