all files / packages/search/src/ search.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
//
//
//
//
//
//
//
//
//
//
 
export default {
  name: 'zan-search',
  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);
    }
  }
};