uni-app表单组件

• H5 的 select 标签用 picker 组件进行代替  https://uniapp.dcloud.io/component/button

    <template>
        <view>
            <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="picker">
                    当前选择：{{array[index]}}
                </view>
            </picker>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    index: 0,
                    array: ['A', 'B', 'C']
                }
            },
            methods: {
                bindPickerChange(e) {
                    console.log(e)
                }
            }
        }
    </script>

• 表单元素 radio 用 radio-group 组件进行代替

    <template>
        <view>
            <radio-group class="radio-group" @change="radioChange">
                <label class="radio" v-for="(item, index) in items" :key="item.name">
                    <radio :value="item.name" :checked="item.checked" /> {{item.value}}
                </label>
            </radio-group>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    items: [{
                            name: 'USA',
                            value: '美国'
                        },
                        {
                            name: 'CHN',
                            value: '中国',
                            checked: 'true'
                        },
                        {
                            name: 'BRA',
                            value: '巴西'
                        },
                        {
                            name: 'JPN',
                            value: '日本'
                        },
                        {
                            name: 'ENG',
                            value: '英国'
                        },
                        {
                            name: 'TUR',
                            value: '法国'
                        }
                    ]
                }
            },
            methods: {
                radioChange(e) {
                    console.log('radio发生change事件，携带value值为：', e.target.value)
                }
            }
        }
    </script>