【uView】picker 地区选择

看了评论，大部分说用不了。原因是... 这是 uView1.x 的写法，uView 2.0 是没有mode这个属性的。

 思路：利用u-picker 的region地区模式作为选择器，然后展示在u-input中。

<u-form class="form" :model="form" ref="uForm" :error-type="['toast']" :border-bottom="false"  label-position="left" label-width="160" >
    <u-form-item label="所在地区" prop="area" :border-bottom="false">
        <u-input v-model="form.area" placeholder="请选择所在地区" @focus="change()"/>
        <u-picker class="region" mode="region" v-model="show" @confirm="confirm"></u-picker>
    </u-form-item>
</u-form>

confirm中e的返回值 

 

data() {
    return {
        form: {
            area: '',
        },
   
        rules: {
            area: [
                { 
                    required: true, 
                    message: '请选择所在地区', 
                    trigger: ['change','blur'],
                }
            ],
        },

        show: false,  // picker是否展示
    }
},

methods：{

    change () {
        this.show = true
    },

    confirm (e) {
        // 省市区拼接
        this.form.area = e.province.label + e.city.label + e.area.label
    },

}