62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<template>
|
|
<div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
|
|
<div class="zan-search__input-wrap">
|
|
<zan-icon name="search"></zan-icon>
|
|
<input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch">
|
|
<zan-icon name="clear" @click="handleClean"></zan-icon>
|
|
</div>
|
|
<div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ZanIcon from 'packages/icon';
|
|
|
|
export default {
|
|
name: 'zan-search',
|
|
components: {
|
|
ZanIcon
|
|
},
|
|
props: {
|
|
placeholder: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
value: '',
|
|
focusStatus: false,
|
|
isFocus: false
|
|
};
|
|
},
|
|
directives: {
|
|
refocus: {
|
|
update: function(el, state) {
|
|
if (state.value) { el.focus(); }
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleFocus() {
|
|
// 进入input焦点，出现close和取消
|
|
this.isFocus = true;
|
|
},
|
|
handleClean() {
|
|
// 点击close后清空vlaue后，再聚焦input框
|
|
this.value = '';
|
|
this.focusStatus = true;
|
|
},
|
|
handleBack() {
|
|
// 点击取消后，清空所有回复最初状态
|
|
this.value = '';
|
|
this.focusStatus = false;
|
|
this.isFocus = false;
|
|
},
|
|
handleSearch() {
|
|
// input输入回车后，发送回调
|
|
this.$emit('search', this.value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|