Blame view

ceres-uniapp-master/components/lb-picker/pickers/selector-picker.vue 2.92 KB
3f535f30   杨鑫   '初始'
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
  <template>
    <view class="lb-selector-picker lb-picker-item"
      :style="{ height: height }">
      <picker-view :value="pickerValue"
        :style="{ height: height }"
        :indicator-style="indicatorStyle"
        @change="handleChange">
        <picker-view-column>
          <!-- #ifdef H5 -->
          <view v-for="(item, i) in list"
            :class="[
  				    'lb-picker-column',
  				    (item[props.value] || item) === selectValue
  				      ? 'lb-picker-column-active'
  				      : ''
  				  ]"
            :key="i"
            :data-item="pressEnable ? JSON.stringify(item) : ''"
            @touchstart="touchstart"
            @touchmove="touchmove"
            @touchend="touchend">
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <view v-for="(item, i) in list"
              :class="[
              'lb-picker-column',
              (item[props.value] || item) === selectValue
                ? 'lb-picker-column-active'
                : ''
            ]"
              :key="i"
              :data-item="item"
              @touchstart="touchstart"
              @touchmove="touchmove"
              @touchend="touchend">
              <!-- #endif -->
              <!-- #ifdef APP-PLUS || H5 -->
              <text :class="[
                'lb-picker-column-label',
                `lb-picker-column-label-${align}`
              ]"
                :style="[
                (item[props.value] || item) === selectValue
                  ? activeColumnStyle
                  : columnStyle
              ]">{{ getLabel(item, i, 0) }}</text>
              <!-- #endif -->
  
              <!-- #ifndef APP-PLUS || H5 -->
              <text :class="[
                'lb-picker-column-label',
                `lb-picker-column-label-${align}`
              ]">{{ item[props.label] || item }}</text>
              <!-- #endif -->
            </view>
        </picker-view-column>
      </picker-view>
    </view>
  </template>
  
  <script>
  import { isObject } from '../utils'
  import { commonMixin } from '../mixins'
  export default {
    props: {
      value: [String, Number],
      list: Array,
      mode: String,
      props: Object,
      visible: Boolean,
      height: String,
      columnStyle: Object,
      activeColumnStyle: Object,
      align: String,
      pressEnable: Boolean,
      pressTime: Number,
      formatter: Function
    },
    mixins: [commonMixin],
    data () {
      return {
        pickerValue: [],
        selectValue: '',
        selectItem: null
      }
    },
    computed: {
      isH5 () {
        return false
      }
    },
    methods: {
      handleChange (item) {
        const index = item.detail.value[0] || 0
        this.selectItem = this.list[index]
        this.selectValue = isObject(this.selectItem)
          ? this.selectItem[this.props.value]
          : this.selectItem
        this.pickerValue = item.detail.value
        this.$emit('change', {
          value: this.selectValue,
          item: this.selectItem,
          index: index,
          change: 'scroll'
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import "../style/picker-item.scss";
  </style>