vant组件封装，Field 输入框+Picker 选择器

#新人福利#

由于每次有选择框 都要写一个popup，所以为了方便直接封装一个了，

例如（这样写很麻烦）：

<van-field v-model="marriageStatus" input-align="right" readonly label="婚姻状态" placeholder="婚姻状态" is-link @click="showMarriage = true" />
<van-popup v-model="showMarriage" position="bottom" round>
      <van-picker :defaultIndex="defaultIndexMarriage" ref="refMarriage" title="婚姻状态" show-toolbar :columns="columnsMarriage" @confirm="onConfirmMarriage" @cancel="showMarriage = false" value-key="itemText" />
</van-popup>

所以封装了一个：

<template>
    <div>
        <van-field readonly v-model="value" :name="name" :label="label" :placeholder="placeholder" @click="showPicker = true" :rules="[requiredRule]" is-link required input-align="right" :label-width="labelWidth" />
        <van-popup v-model="showPicker" position="bottom" round>
            <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" value-key="label" />
        </van-popup>
    </div>
</template>

<script>
import { Field, Popup, Picker } from 'vant'

export default {
    components: {
        'van-field': Field,
        'van-popup': Popup,
        'van-picker': Picker
    },
    props: {
        value: {
            required: true,
            type: String
        },
        name: {
            required: true,
            type: String
        },
        label: {
            required: true,
            type: String
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        columns: {
            required: true,
            type: Array
        },
        requiredRule: {
            required: true,
            type: Object
        },
        labelWidth: {
            type: String,
            default: '100'
        }
    },
    data() {
        return {
            showPicker: false
        }
    },
    methods: {
        onConfirm(value) {
            console.log(value)
            try {
                this.$emit('myconfirm', value)
                this.showPicker = false
            } catch (e) {
                console.error(e)
            }
        }
    }
}
</script>