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 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 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 zend解密软件绿色版测试可用
2008/04/14 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python爬豆瓣电影实例
2018/02/23 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
python用Configobj模块读取配置文件
2020/09/26 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
运动会入场口号
2014/06/07 职场文书
超市员工管理制度
2015/08/06 职场文书