blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

search add change event

Browse Source
This commit is contained in:
cookfront 2017-03-30 14:47:52 +08:00
parent 2b3394bd35
commit 50d87fa634
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/examples-docs/search.md
View File

@ -3,6 +3,9 @@ export default {
methods: { methods: {
goSearch(value) { goSearch(value) {
alert(value) alert(value)
},
handleChange(value) {
console.log(value);
} }
} }
}; };
@ -14,7 +17,7 @@ export default {
:::demo 基础用法 :::demo 基础用法
```html ```html
<zan-search placeholder="商品名称" @search="goSearch"></zan-search> <zan-search placeholder="商品名称" @search="goSearch" @change="handleChange"></zan-search>
<script> <script>
export default { export default {
methods: { methods: {

7
packages/search/src/search.vue
View File

@ -2,7 +2,7 @@
<div class="zan-search" :class="{ 'zan-search--focus' : isFocus }"> <div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
<div class="zan-search__input-wrap"> <div class="zan-search__input-wrap">
<zan-icon name="search"></zan-icon> <zan-icon name="search"></zan-icon>
<input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch"> <input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch">
<zan-icon name="clear" @click="handleClean"></zan-icon> <zan-icon name="clear" @click="handleClean"></zan-icon>
</div> </div>
<div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div> <div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
@ -22,6 +22,11 @@
type: String type: String
} }
}, },
watch: {
value(val) {
this.$emit('change', val);
}
},
data() { data() {
return { return {
value: '', value: '',