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 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JavaScript交换两个变量方法实例
Nov 25 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二分查找二种实现示例
2014/03/12 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JSON 数据格式详解
2017/09/13 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
python构建基础的爬虫教学
2018/12/23 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
介绍一下Linux中的链接
2016/05/28 面试题
决心书标准格式
2014/03/11 职场文书
公司保密承诺书
2014/03/27 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
入党群众意见范文
2015/06/02 职场文书
力克胡哲观后感
2015/06/10 职场文书
身份证丢失证明
2015/06/19 职场文书
各种货币符号快捷输入
2022/02/17 杂记
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript