Blame view

src/components/select/option.vue 2.3 KB
e355dd49   梁灏   add Select Component
1
  <template>
cf753854   Sergio Crisostomo   Corrections after...
2
3
4
      <li
          :class="classes"
          @click.stop="select"
cf753854   Sergio Crisostomo   Corrections after...
5
          @mousedown.prevent
cf753854   Sergio Crisostomo   Corrections after...
6
      ><slot>{{ showLabel }}</slot></li>
e355dd49   梁灏   add Select Component
7
8
  </template>
  <script>
4aec6a66   梁灏   support Select
9
      import Emitter from '../../mixins/emitter';
fed3e09d   梁灏   add AutoComplete ...
10
      import { findComponentUpward } from '../../utils/assist';
4aec6a66   梁灏   support Select
11
  
e355dd49   梁灏   add Select Component
12
13
14
      const prefixCls = 'ivu-select-item';
  
      export default {
4aec6a66   梁灏   support Select
15
16
17
          name: 'iOption',
          componentName: 'select-item',
          mixins: [ Emitter ],
e355dd49   梁灏   add Select Component
18
19
20
21
22
23
24
25
26
27
28
          props: {
              value: {
                  type: [String, Number],
                  required: true
              },
              label: {
                  type: [String, Number]
              },
              disabled: {
                  type: Boolean,
                  default: false
c9b86944   Sergio Crisostomo   Refactor Select!
29
30
31
32
33
34
35
36
              },
              selected: {
                  type: Boolean,
                  default: false
              },
              isFocused: {
                  type: Boolean,
                  default: false
e355dd49   梁灏   add Select Component
37
38
              }
          },
e355dd49   梁灏   add Select Component
39
40
          data () {
              return {
c9b86944   Sergio Crisostomo   Refactor Select!
41
                  searchLabel: '',  // the slot value (textContent)
fed3e09d   梁灏   add AutoComplete ...
42
                  autoComplete: false
b0893113   jingsam   :art: add eslint
43
              };
e355dd49   梁灏   add Select Component
44
45
46
47
48
49
50
          },
          computed: {
              classes () {
                  return [
                      `${prefixCls}`,
                      {
                          [`${prefixCls}-disabled`]: this.disabled,
fed3e09d   梁灏   add AutoComplete ...
51
                          [`${prefixCls}-selected`]: this.selected && !this.autoComplete,
c9b86944   Sergio Crisostomo   Refactor Select!
52
                          [`${prefixCls}-focus`]: this.isFocused
e355dd49   梁灏   add Select Component
53
                      }
b0893113   jingsam   :art: add eslint
54
                  ];
e355dd49   梁灏   add Select Component
55
56
              },
              showLabel () {
b0893113   jingsam   :art: add eslint
57
                  return (this.label) ? this.label : this.value;
c9b86944   Sergio Crisostomo   Refactor Select!
58
59
              },
              optionLabel(){
1b39f569   Sergio Crisostomo   Use label first i...
60
                  return this.label || (this.$el && this.$el.textContent);
e355dd49   梁灏   add Select Component
61
62
63
64
              }
          },
          methods: {
              select () {
c9b86944   Sergio Crisostomo   Refactor Select!
65
                  if (this.disabled) return false;
e355dd49   梁灏   add Select Component
66
  
c9b86944   Sergio Crisostomo   Refactor Select!
67
68
69
70
71
72
73
74
                  this.dispatch('iSelect', 'on-select-selected', {
                      value: this.value,
                      label: this.optionLabel,
                  });
                  this.$emit('on-select-selected', {
                      value: this.value,
                      label: this.optionLabel,
                  });
e355dd49   梁灏   add Select Component
75
              },
e355dd49   梁灏   add Select Component
76
          },
4aec6a66   梁灏   support Select
77
          mounted () {
fed3e09d   梁灏   add AutoComplete ...
78
79
              const Select = findComponentUpward(this, 'iSelect');
              if (Select) this.autoComplete = Select.autoComplete;
ed91d9b0   梁灏   update Select
80
          },
b0893113   jingsam   :art: add eslint
81
82
      };
  </script>