【4858美高梅】ui的search组件如何在键盘呈现搜索按键,ui的search组件在键盘显示找出开关的贯彻格局

By admin in 4858美高梅 on 2019年4月18日
<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)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
    </div>
  </mt-search>
  <iframe name='frameFile' style="display: none;"></iframe>
</form>
<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)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
    </div>
  </mt-search>
  <iframe name='frameFile' style="display: none;"></iframe>
</form>

代码如下所示:

动用input将手提式无线电话机软键盘出现找出开关

化解办法:

【4858美高梅】ui的search组件如何在键盘呈现搜索按键,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)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
 </div>
 </mt-search>
 <iframe name='frameFile' style="display: none;"></iframe>
</form>
<div className=‘box’>
<div className="query-input-model">
    <form action='' target="rfFrame">
          <input    type="search"  onKeyDown={this.queryKeyDownHandler.bind(this)} />
    </form>
</div>
<iframe id="rfFrame" name="rfFrame" src={{about:"blank"}} style={{display:"none"}}>   </iframe>
</div>

mint-ui的search组件input暗中认可也是type=”search”类型的,可是还索要在外层包1组form标签,并且包涵action,就会在键盘中冒出搜索按键。

mint-ui的search组件input暗中同意也是type=”search”类型的,可是还索要在外层包壹组form标签,并且带有action,就会在键盘中冒出搜索按键。

化解办法:

注意事项:
1)input中的type是search
二)input必须包裹在form中手艺有机能
叁)假如想要搜索的时候不刷新页面须要在form中action设置为空,target设置为本页面中的iframe
效果:
一)手提式有线电电话机软键盘显示寻找按键

如上是措施壹:

如上是情势一:

mint-ui的search组件input暗中同意也是type=”search”类型的,可是还索要在外层包一组form标签,并且包蕴action,就会在键盘中冒出搜索开关。

4858美高梅 1

在四弟大键盘点击找寻的时候,页面会刷新,所以给form加二个target,target规定在什么地方张开action
UOdysseyL,再放入二个隐身的iframe,起名叫form的target的值,那样则在当前页面体现出寻觅的剧情

在表弟大键盘点击寻觅的时候,页面会刷新,所以给form加三个target,target规定在何地打开action
UXC90L,再放入一个藏身的iframe,起名称为form的target的值,那样则在当前页面呈现出找寻的内容

4858美高梅,如上是艺术1:

1.png

正如是方法二:

如下是措施贰:

在手机键盘点击寻找的时候,页面会刷新,所以给form加3个target,target规定在哪里展开action
UBMWX三L,再放入贰个掩蔽的iframe,起名称叫form的target的值,那样则在现阶段页面体现出搜索的始末

二)点击搜索不会发出刷新页面,并滞留在本页面

<form action="" v-on:submit.prevent=""

> <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)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div> </div> </mt-search> </form>
<form action="" v-on:submit.prevent=""

> <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)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div> </div> </mt-search> </form>

一般来说是方式2:

那边平素给onsubmit事件写入return false,

此间一贯给onsubmit事件写入return false,

<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)"><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div>
   </div>
  </mt-search>
</form>
 onsubmit="return false;"
 onsubmit="return false;"

那边直接给onsubmit事件写入return
false,禁止提交,则找出列表页也能够在时下页面展现。

禁止提交,不过出于是vue所以使用vue自带的submit阻止刷新事件,则寻觅列表页也足以在当前页面展现。

禁止提交,可是出于是vue所以使用vue自带的submit阻止刷新事件,则寻觅列表页也能够在现阶段页面彰显。

总结

 

 

上述所述是小编给大家介绍的mint-ui的search组件在键盘展现搜索按键的达成情势,希望对我们具备帮忙,假设大家有另外疑问请给作者留言,作者会及时过来大家的。在此也卓殊多谢我们对台本之家网址的协理!

在search方法中,加贰个点击搜索开关后软键盘收起的轩然大波:

在search方法中,加1个点击寻觅按键后软键盘收起的轩然大波:

您或然感兴趣的稿子:

  • Vue.js
    的位移端组件库mint-ui实现Infiniti滚动加载越来越多的点子
  • 浅谈mint-ui
    loadmore组件注意的标题
  • 详解vue
    mint-ui源码解析之loadmore组件
  • Mint-UI时间组件起头时间难题及时间插件使用
document.activeElement.blur();
document.activeElement.blur();

 

 

参考文章:

参照小说:

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有