1、input 输入框
只能输入数字且输入框输入后值为数值
<el-input
v-model.number="points"
oninput="value=value.replace(/[^\d]/g,'')"
class='query-ctrl' />
// .number 修饰符 将输入后的值格式化为number类型
// oninput 正则校验,若不是数字格式则不允许输入
2、form表单
表单中input enter后刷新了当前页
需求:仅请求数据,不刷新当前页面
但只对input框进行keyup.enter 限制 不生效
需要多form增加@submit.native.prevent
<el-form @submit.native.prevent>
<el-input @blur="handleGetFeeDto" @keyup.enter.native="handleGetFeeDto"></el-input>
</el-form>
//@submit.native.prevent
//submit 顾名思义就是提交
//.native 表示对一个组件绑定系统原始事件
//.prevent 表示提交以后不刷新页面
3、自定义input / 下拉数据 (指令使用)
blur 也可使用 MouseDown 进行点击获取 MouseDown事件先与blur执行
需要在下拉数据处展示不可选择原因及disabled
select 失焦后会将输入框清空,不够友好
input el-autocomplete 不可以设置禁选
所以 使用 input / div 进行自定义
需自定义设置下拉数据的显隐
blur事件先于pop click事件 所以需增加指令 Clickoutside
import Clickoutside from 'element-ui/src/utils/clickoutside'
directives: { Clickoutside },
<el-form-item prop="customerName" class="is-required">
<span class="title" slot="label">客户名称:</span>
<div class="customer-box" v-clickoutside="blur">
<el-input class="customer-name" v-model.trim="customerName" placeholder="请输入客户名称,进行动态查询" @input="queryCompany"></el-input>
<div class='customer-pop el-select-dropdown el-popper' v-show='showPop' v-loading='loading'>
<ul v-if="customerList.length > 0" class="el-scrollbar__view el-select-dropdown__list">
<li v-for="(item,index) in customerList" :key='index' class='el-select-dropdown__item' @click="onSelectCompany(item)">
<label class="name" :class="{ isDisabled: item.industryStatus || item.customerOrderStatus}">{{ item.customerName }} <span style="color: #DE7474; padding: 0 15px;">{{item.industryStatus ? '行业不匹配' : ''}}</span> <span style="color: #DE7474; padding: 0 5px;">{{item.customerOrderStatus ? '检查合同' : ''}}</span></label>
</li>
</ul>
<p v-else style="text-align: center">未匹配到数据</p>
</div>
</div>
</el-form-item>
对于指令要给一个回调函数
blur() {
this.showPop = false
}