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('取消')
  }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值