Search
触发事件的有一个enter事件和一个失去焦点事件
正常流程:搜索结束后点击下方列表跳转至指定页面。
问题:使用键盘搜索健后,可以正常搜索出相应内容,但是点击下方列表,页面会先重新搜索一次,再次点击列表才可以实现跳转。
问题原因:键盘搜索事件后,input没有失焦,点击下方列表,先触发了input的失去焦点事件。
解决方法:只给blur绑定搜索事件,enter搜索绑定的事件只做触发该input失去焦点操作。
<mt-search
ref="searchInput"
type="text"
placeholder="搜索"
v-model="inputValue"
@blur="inputQuery('blur')"
@keyup.enter.native="inputBlur()">
</mt-search>
.js
inputBlur() {
this.$refs.searchInput.blur()
}
mt-header
.vue
<mt-header fixed title="疫情上报处理">
<router-link :to="backName" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
if (this.$route.query.from === 'A') {
this.backName = '/a'
} else if (this.$route.query.from === 'B') {
this.backName = '/b'
} else {
this.backName = '/home'
}
mt-field
使用输入框的时候,需要限制输入字数,但是组件本身没有提供属性,经过查证,得知可以使用:attr
去绑定input
原有属性
<mt-field
label="姓名"
placeholder="请输入姓名"
v-model="name"
disableClear
:attr="{ maxlength: 10 }"
>
MessageBox
import { MessageBox } from 'mint-ui'
MessageBox.confirm('确定执行操作吗', '提示').then(action => {
if (action === 'confirm') {
console.log('确认')
} else {
console.log('取消')
}
}).catch(e => {
console.log(e)
})
MessageBox({
title: '提示',
message: '确定执行操作吗',
showCancelButton: true
}).then(action => {
console.log(action)
if (action === 'confirm') {
console.log('确认')
} else {
console.log('取消')
}
})