脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → mint ui search组件在键盘显示搜索按钮

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

 更新时间：2017年10月27日 16:58:34   作者：蓓蕾心晴  
这篇文章主要介绍了mint-ui的search组件在键盘显示搜索按钮的实现方法,需要的朋友可以参考下

代码如下所示：

<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组件在键盘显示搜索按钮的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 如何用JS实现简单的数据监听

    如何用JS实现简单的数据监听

    这篇文章主要介绍了如何用JS实现简单的数据监听，对数据监听感兴趣的同学，可以参考一下
    2021-05-05
  • JS动态添加iframe的代码

    JS动态添加iframe的代码

    这篇文章主要介绍了JS动态添加iframe的代码,需要的朋友可以参考下
    2015-09-09
  • JavaScript实现简单的音乐播放器

    JavaScript实现简单的音乐播放器

    这篇文章主要为大家详细介绍了JavaScript实现简单的音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • boostrapTable的refresh和refreshOptions区别浅析

    boostrapTable的refresh和refreshOptions区别浅析

    在使用bootstrapTable时，刷新数据有两个方法refresh、refreshOptions，在其用法上有点区别，接下来通过本文给大家分享boostrapTable的refresh和refreshOptions的区别,需要的朋友可以参考下
    2017-01-01
  • javascript记住用户名和登录密码（两种方式）

    javascript记住用户名和登录密码（两种方式）

    这篇文章主要通过两种方式介绍javascript记住用户名和登录密码，有需要的小朋友可以来参考下
    2015-08-08
  • 微信小程序支付及退款流程详解

    微信小程序支付及退款流程详解

    近期在做微信小程序时，涉及到了小程序的支付和退款流程，所以也大概的将这方面的东西看了一个遍，就在这篇文章里总结一下
    2017-11-11
  • JavaScript实现向OL列表内动态添加LI元素的方法

    JavaScript实现向OL列表内动态添加LI元素的方法

    这篇文章主要介绍了JavaScript实现向OL列表内动态添加LI元素的方法,实例分析了javascript操作html元素的技巧,需要的朋友可以参考下
    2015-03-03
  • JS实现音乐导航特效

    JS实现音乐导航特效

    这篇文章主要为大家详细介绍了JS实现音乐导航特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 弥补localStorage容量缺陷方法详解

    弥补localStorage容量缺陷方法详解

    这篇文章主要为大家介绍了弥补localStorage容量缺陷的方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • JS解析json数据并将json字符串转化为数组的实现方法

    JS解析json数据并将json字符串转化为数组的实现方法

    json数据在ajax实现异步交互时起到了很重要的作用，他可以返回请求的数据，然后利用客户端的js进行解析，这一点体现出js的强大，本文介绍JS解析json数据并将json字符串转化为数组的实现方法，需要了解的朋友可以参考下
    2012-12-12

最新评论