mint ui部分组件使用方法小记

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('取消')
  }
})