c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 51 Pull requests Projects 2 Releases Wiki Activity Actions

debounce search box

Browse source
This commit is contained in:
busti 2020-01-08 22:20:45 +01:00
parent 6bcbd59362
commit df43159acf
4 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -25,6 +25,7 @@
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"utf8": "^3.0.0", "utf8": "^3.0.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-debounce": "^2.2.0",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuex": "^3.1.2", "vuex": "^3.1.2",
"vuex-router-sync": "^5.0.0" "vuex-router-sync": "^5.0.0"

9
src/components/Navbar.vue
View file

@ -31,7 +31,14 @@
</button> </button>
<form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline"> <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline">
<input class="form-control w-100" type="search" placeholder="Search" aria-label="Search" @input="searchEventItems($event.target.value)"> <input
class="form-control w-100"
type="search"
placeholder="Search"
aria-label="Search"
v-debounce:500ms="myFunc"
@input="searchEventItems($event.target.value)"
>
</form> </form>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">

4
src/main.js
View file

@ -14,6 +14,8 @@ import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave } from '@fortawesome/free-solid-svg-icons'; import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import vueDebounce from 'vue-debounce';
library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave); library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave);
Vue.component('font-awesome-icon', FontAwesomeIcon); Vue.component('font-awesome-icon', FontAwesomeIcon);
@ -26,3 +28,5 @@ new Vue({
router, router,
render: h => h(App), render: h => h(App),
}); });
Vue.use(vueDebounce);

5
yarn.lock
View file

@ -8353,6 +8353,11 @@ vm-browserify@^1.0.1:
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
vue-debounce@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/vue-debounce/-/vue-debounce-2.2.0.tgz#b081aba94a7faf99145312e86fc1b2b1117990de"
integrity sha512-H9Z6gp7zsgLMgtYtQKZ1htxw/QC1NLYkzu3ElB+2RECEMLtejRM1+hGrFgBPVdnBamGA/R9uSt+lYdtx+GSnhQ==
vue-eslint-parser@^5.0.0: vue-eslint-parser@^5.0.0:
version "5.0.0" version "5.0.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"