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

2024-09-28 12:41:28

代码如下所示：

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

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
Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引
Vue Mint UI mt-swipe的使用方式

目录 Mint UI mt-swipe的使用 Mint UI的安装使用轮播图mt-swipe组件使用使用mint-ui遇到的坑 1.按需引入:文档上写 2.Header组件的返回问题 3.cell的click不起作用 4.mintUI中indicator报错 Mint UI mt-swipe的使用 Mint UI的安装使用 1.安装 npm install mint-ui -S -S表示 --save 2.在main.js中引入mint Ui的css 和插件 (全局引用) import M
基于VUE.JS的移动端框架Mint UI的使用

Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu
ui组件之input多选下拉实现方法（带有搜索功能）

我的风格,先上效果图,如果大家感觉还不错,请参考实现代码. 废话不说先看div层次结构  <div class="col-xs-10" style="width:800px">  <label for="" class="label-control">全文检索<
微信小程序 UI与容器组件总结

微信小程序 UI与容器组件总结 1.总结与概述 2.容器组件 2.1 组件容器(view) 2.2 可滚动视图容器(scroll-view) 2.3 滑块视图容器(swiper) 1.总结与概述 1.1 UI组件总结图 1.2 概述小程序的UI组件也就是定义用户界面的一系列标签,类似于html标签.一个完整用户响应过程:事件触发-->UI组件接收到事件-->触发js函数响应事件-->更新UI 2.容器组件 2.1 容器组件(view) (1)总结 (2)例子效果图 page.wx
基于 flexible 的 Vue 组件：Toast -- 显示框效果

基于flexible.js 的 Vue 组件前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中常用的.简单的组件
Vue 使用 Mint UI 实现左滑删除效果CellSwipe

Mint UI 是饿了么开源的,基于 Vue.js 的移动端组件库. 关于Mint UI,有文档不够准确详尽,组件略显粗糙,功能不够完善等问题:也有高度组件化,体积小等优点. 安装Mint UI: # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S 引入组件: // 引入全部组件 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(
vue前端框架—Mint UI详解（更适用于移动端）

一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI 在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min
JS实现获取键盘按下的按键并显示在页面上的方法

本文实例讲述了JS实现获取键盘按下的按键并显示在页面上的方法.分享给大家供大家参考,具体如下: 请你使用键盘输入一些字符,这些字符就被显示在网页的空白处,是不是少了文本框或文本域之类的东西,觉得挺不习惯呢?这个效果是应用了JavaScript中的document.onkeypress对象,监测键盘的一举一动,并记录下哪些键被按下,有意思吧,想研究Js的朋友,就从这些小例子开始吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-sh

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

相关推荐

随机推荐