mint-ui的search组件在键盘显示搜索按钮的实现方法


Posted in Javascript onOctober 27, 2017

代码如下所示:

<form action="" target="frameFile">
 <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
 <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
  <ListItem :lists="lists"></ListItem>
  <div class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
 </div>
 </mt-search>
 <iframe name='frameFile' style="display: none;"></iframe>
</form>

解决办法:

mint-ui的search组件input默认也是type="search"类型的,但是还需要在外层包一组form标签,并且带有action,就会在键盘中出现搜索按钮。

如上是方法一:

在手机键盘点击搜索的时候,页面会刷新,所以给form加一个target,target规定在何处打开 action URL,再放入一个隐藏的iframe,起名为form的target的值,这样则在当前页面展示出搜索的内容

如下是方法二:

<form action="" onsubmit="return false;">
  <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
   <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
   <ListItem :lists="lists"></ListItem>
   <div class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
   </div>
  </mt-search>
</form>

这里直接给onsubmit事件写入return false,禁止提交,则搜索列表页也可以在当前页面展示。

总结

以上所述是小编给大家介绍的mint-ui的search组件在键盘显示搜索按钮的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 #Javascript
微信小程序template模板实例详解
Oct 27 #Javascript
微信小程序 上传头像的实例详解
Oct 27 #Javascript
探讨Vue.js的组件和模板
Oct 27 #Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 #Javascript
You might like
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php curl基本操作详解
2013/07/23 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python求导数的方法
2015/05/09 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
实践Vim配置python开发环境
2018/07/02 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
Python列表对象实现原理详解
2019/07/01 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python实现门限回归方式
2020/02/29 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
全球工业:Global Industrial
2020/02/01 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
教师群众路线学习心得体会
2014/11/04 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
利用js实现简单开关灯代码
2021/11/23 Javascript
Redis入门基础常用操作命令整理
2022/06/01 Redis