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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
| <script>
| import { deepClone } from 'uni-shared'
|
| export default {
| name: 'PickerView',
| props: {
| value: {
| type: Array,
| default () {
| return []
| },
| validator: function (val) {
| return Array.isArray(val) && val.filter(val => typeof val === 'number').length === val.length
| }
| },
| indicatorStyle: {
| type: String,
| default: ''
| },
| indicatorClass: {
| type: String,
| default: ''
| },
| maskStyle: {
| type: String,
| default: ''
| },
| maskClass: {
| type: String,
| default: ''
| }
| },
| data () {
| return {
| valueSync: [...this.value],
| height: 34,
| items: [],
| changeSource: ''
| }
| },
| watch: {
| value (val, oldVal) {
| if (__PLATFORM__ !== 'app-plus' || val === oldVal || val.length !== oldVal.length || val.findIndex((item, index) => item !== oldVal[index]) >= 0) {
| this.valueSync.length = val.length
| val.forEach((val, index) => {
| if (val !== this.valueSync[index]) {
| this.$set(this.valueSync, index, val)
| }
| })
| }
| },
| valueSync: {
| deep: true,
| handler (val, oldVal) {
| if (this.changeSource === '') {
| this._valueChanged(val)
| } else {
| this.changeSource = ''
| // 避免外部直接对此值进行修改
| const value = val.map(val => val)
| this.$emit('update:value', value)
| this.$trigger('change', {}, {
| value
| })
| }
| }
| }
| },
| methods: {
| getItemIndex (vnode) {
| return this.items.indexOf(vnode)
| },
| getItemValue (vm) {
| return this.valueSync[this.getItemIndex(vm.$vnode)] || 0
| },
| setItemValue (vm, val) {
| var index = this.getItemIndex(vm.$vnode)
| var oldVal = this.valueSync[index]
| if (oldVal !== val) {
| this.changeSource = 'touch'
| this.$set(this.valueSync, index, val)
| }
| },
| _valueChanged (val) {
| this.items.forEach(function (item, index) {
| item.componentInstance.setCurrent(val[index] || 0)
| })
| },
| _resize ({
| height
| }) {
| this.height = height
| }
| },
| render (createElement) {
| var items = []
| if (this.$slots.default) {
| deepClone(this.$slots.default, createElement).forEach(vnode => {
| if (vnode.componentOptions && vnode.componentOptions.tag === 'v-uni-picker-view-column') {
| items.push(vnode)
| }
| })
| }
| this.items = items
| return createElement(
| 'uni-picker-view',
| {
| on: this.$listeners
| }, [createElement('v-uni-resize-sensor', {
| attrs: {
| initial: true
| },
| on: {
| resize: this._resize
| }
| }),
| createElement('div', {
| ref: 'wrapper',
| class: 'uni-picker-view-wrapper'
| }, items)
| ])
| }
| }
| </script>
| <style>
| uni-picker-view {
| display: block;
| }
|
| uni-picker-view .uni-picker-view-wrapper {
| display: flex;
| position: relative;
| overflow: hidden;
| height: 100%;
| }
|
| uni-picker-view[hidden] {
| display: none;
| }
| </style>
|
|
