Mint-UI的mt-search如何触发事件(确定和取消)

Mint-ui的官方文档写得是真的简单,简单到遗漏了许多重点,使用文档里关于mt-search的api只介绍了属性的部分,各个调用方法完全没有介绍,让用户自己去探索?官方文档。

Mint-UI的mt-search如何触发事件(确定和取消)_第1张图片

关于开源框架的使用文档,我接触到的还是Element-UI写得最为简洁明了了,相比于Mint-UI都是同一个爸爸(饿了么)出来的,差距为什么就这么大呢?

正文

1、确定事件

mint-ui使用文档开头里有提到,在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 .native 修饰符,mint-ui开发者可能考虑到button按钮使用的概率比较大,他们只对 Button 组件进行了处理,使用mt-button组件可以直接@click绑定事件,而其他的组件都需要使用.native修饰符来触发事件。

mt-search触发确定事件,需使用@keyup.enter.native来绑定确定事件,如下图:

解释:很多读者会很纳闷,为什么不是用click点击事件触发呢?是这样子的,手机键盘的上都会自带有一个搜索按钮(右下角),无论是安卓还是ios,当用户输入完点击搜索按钮后就会执行所绑定的确定事件了。如下图问ios的键盘:

Mint-UI的mt-search如何触发事件(确定和取消)_第2张图片

 2、取消事件

关于mt-search的取消事件就更蛋疼了,这个组件提供了一个取消按钮,却不提供点击触发事件,我也是佛了... 我在网上也搜了很久,没有找到一个很合适的,有的说监听input绑定的value为空时实现取消事件?这位小哥未必太单纯了,要是我输入时输错了或者想清空重新输入呢?这时候也会执行此取消事件。找了一遍,没找到,于是自己动手写一个吧。

请原谅,我用上了最原始的方法,哈哈哈哈哈... 

mounted(){
    this.$nextTick(()=>{
        let cancel = this.$refs.mtSearch.$el.querySelectorAll('.mint-searchbar-cancel')[0];
        cancel.onclick=()=>{
            this.close()    // 取消事件
        }
    })
}

给取消按钮添加一个dom事件,来执行取消事件,我也是无可奈何呀。

经过对各个移动端ui框架的对比,从技术团队、社区活跃度和框架实用性等方面考虑,我个人推荐有赞的Vant-ui,虽然Vant-ui初始定位是应用于商城类web,但是随着它的组件逐渐丰富,它可以应用于很多场景,最重要的是它的文档写得简洁明了,开发者用起来舒服;但它有一个缺点,单位用的是px,如果要做移动端适配还有把它转成rem,这一部分它文档有介绍,只不过转换有些麻烦。

(完)

你可能感兴趣的:(☛,Mint-UI)