环境:vue、mint-ui

功能:一个输入框,按下按键之后就执行某个功能。

截图:一个输入框

输入框html:

<mt-search v-model="query" cancel-text="" placeholder="提取码">   // mt-search 
基本函数:
debounce (func, delay) {
let timer
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}

查询函数:

getData () {
console.log('执行查询。。。。。。')
},

主要函数:

 created() {
this.$watch('query', this.debounce(newQuery => {
if (newQuery) {
setTimeout(() => {
this.getData()
}, 20)
}
}, 200))
},
 
 

mint-ui 输入框按下按键执行查询的更多相关文章

  1. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  2. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  3. 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框)

    [源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...

  4. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  5. JS实现按下按键触发点击事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  7. webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI

    webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...

  8. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  9. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

随机推荐

  1. Java基础语法 第3节 常用软件安装-Webstorm

    Webstorm是专用于web开发的号称最好的的编辑器,使用起来很方便. 一.安装 1.去官网下载正版安装包,官网地址:http://www.jetbrains.com/webstorm/ 2.开始安 ...

  2. webpack 4:默认配置

    webpack 4:默认配置 entry 默认: ./src/index.js(注意: 路径必须带上./): entry: './src/index.js', output 默认最后路径: ./dis ...

  3. vue线上项目,优化前后对比

    优化前: dev初次时间:52s dev时间:5s~6s build时间:374s(6.2分钟) build后zip包大小: vue.vue-router 优化后: dev初次时间:49s.48s.5 ...

  4. CenterOS下安装NodeJS

    1. 首先下载NodeJS的版本 wget https://nodejs.org/dist/v8.1.3/node-v8.1.3-linux-x64.tar.gz 我这里下载的是v8.1.3 版本 n ...

  5. Ribbon Ping机制

    在负载均衡器中,提供了 Ping 机制,每隔一段时间,会去 Ping 服务器,判断服务器是否存活,该工作由 com.netflix.loadbalancer.IPing 接口的实现类负责,如果单独使用 ...

  6. 基于Elasticsearch的智能客服机器人

    本次分享主要会介绍一下ES是如何帮我们完成NLP的任务的.在做NLP相关任务的时候,ES的相似度算法并不足以支撑用户的搜索,需要使用一些与语义相关的方法进行改进.但是ES的很多特性对我们优化搜索体验是 ...

  7. delphi读取xml文件

    功能: 根据省份更新地市信息 -------------------------------------------------------------------------------} proc ...

  8. 关于sdk>=23的android版本权限的问题

    在SDK23也就是Android6.0.1里编写调用系统通讯录读写权限的程序,在AndroidManifest.xml中,已经配置了 <uses-permission android:name= ...

  9. 同台同时多开DELPHI2007的解决办法

    Cannot create file "C:\Users\Administrator\AppData\Local\Temp\EditorLineEnds.ttr"这个问题的产生根据 ...

  10. 廖雪峰Java4反射与泛型-3范型-4擦拭法

    1.擦拭法是Java泛型的实现方式. 编译器把类型视为Object. * 泛型代码编译的时候,编译器实际上把所有的泛型类型T统一视为Object类型.换句话说,虚拟机对泛型一无所知,所有的工作都是编译 ...