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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
git进行版本控制心得详谈
2017/12/10 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
python 带时区的日期格式化操作
2020/10/23 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
土地转让协议书
2014/09/27 职场文书
维稳承诺书
2015/01/20 职场文书
2015大学生入党个人自传
2015/06/26 职场文书