html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,target-densitydpi=medium-dpi,initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="step.css" />
        <script src="picker.min.js"></script>
        <script src="vue.js"></script>
    </head>

    <body>
        <div v-cloak id="container">
            <div class="text_outer border_b">
                <a>患者名字</a>
                <b id="name" readonly="readonly" v-bind:class="{text:pat_name}">{{ pat_name?pat_name:'请选择患者名字' }}</b>
            </div>
            <div class="text_outer border_b">
                <a>患者性别</a>
                <b id="sex" readonly="readonly" v-bind:class="{text:pat_sex}">{{ pat_sex?pat_sex:'请选择患者性别' }}</b>
            </div>
            <div class="text_outer border_b">
                <a>患者年龄</a>
                <b id="age" readonly="readonly" v-bind:class="{text:pat_age}">{{ pat_age?pat_age:'请选择患者年龄' }}</b>
            </div>
            <div class="text_outer border_b">
                <a>患病多久</a>
                <b id="illness" readonly="readonly" v-bind:class="{text:pat_disease_time}">{{ pat_disease_time?pat_disease_time:'请选择患者患病多久了' }}</b>
            </div>
        </div>

    </body>
    <script src="common.js"></script>

</html>

step.css

html{
    font-size: 16px;
}
[v-cloak]{
    display: none;
    
}
.picker{
    left: 0;
    top: 0;
}
.picker .picker-panel .wheel-wrapper{
    padding: 0;
}
.picker .picker-panel .wheel-wrapper .wheel-scroll{
    padding: 0;
}
.text_outer b{
    font-size: 14px;
    color: #cccccc;
}
.text_outer b.text{
    color: #333333;
}

common.js

var vm =new Vue({
    el:'#container',
    data:{
        pat_name:'',
        pat_sex:'',
        pat_age:'',
        pat_disease_time:''
    },
    mounted: function() {
        this.initPicker();
    },
    methods:{
        initPicker: function() {
            var data1 = [];
            for (var i=1;i<=99;i++) {
                data1.push({
                    text:i,
                    value:i
                })
            }

            var data2 = [{
                    text: '一周内',
                    value: '一周内'
                }, {
                    text: '一月内',
                    value: '一月内'
                },
                {
                    text: '半年内',
                    value: '半年内'
                },
                {
                    text: '超过半年',
                    value: '超过半年'
                }
            ];
            var data3 = [{
                    text: '周',
                    value: '周'
                }, {
                    text: '月',
                    value: '月'
                },
                {
                    text: '岁',
                    value: '岁'
                }
            ];
            
            var data4 = [
                {
                    text:'男',
                    value:'男'
                },
                {
                    text:'女',
                    value:'女'
                }
            ];
            var data5 = [
                {
                    text:'陶狗腿',
                    value:'陶狗腿'
                },
                {
                    text:'陶鸭腿',
                    value:'陶鸭腿'
                },
                {
                    text:'陶鸡腿',
                    value:'陶鸡腿'
                }
            ];

            var userAge = document.getElementById('age');
            var userIll = document.getElementById('illness');
            var userSex = document.getElementById('sex');
            var userName = document.getElementById('name');
            //确定已选中的索引
            var picker1_selected_idx1=29,picker1_selected_idx2=2;

            var picker1 = new Picker({
                data: [data1, data3],
                selectedIndex:[picker1_selected_idx1,picker1_selected_idx2],
            });
            var that = this;
            picker1.on('picker.select', function(selectedVal, selectedIndex) {
                that.pat_age = data1[selectedIndex[0]].value + ' ' + data3[selectedIndex[1]].value;
            });

            picker1.on('picker.change', function(index, selectedIndex) {
                console.log(index);
            });

            picker1.on('picker.valuechange', function(selectedVal, selectedIndex) {
                console.log(selectedVal);
            });

            var picker2 = new Picker({
                data: [data2]
            });

            picker2.on('picker.select', function(selectedVal, selectedIndex) {
                that.pat_disease_time = data2[selectedIndex[0]].value
            });

            picker2.on('picker.change', function(index, selectedIndex) {
                console.log(index);
            });

            picker2.on('picker.valuechange', function(selectedVal, selectedIndex) {
                console.log(selectedVal);
            });
            
            var picker3 = new Picker({
                data: [data4]
            });

            picker3.on('picker.select', function(selectedVal, selectedIndex) {
                that.pat_sex = data4[selectedIndex[0]].value;
            });

            var picker4 = new Picker({
                data: [data5]
            });
            picker4.on('picker.select', function(selectedVal, selectedIndex) {
                that.pat_name = data5[selectedIndex[0]].value;
            });
            
            userAge.addEventListener('click', function() {
                picker1.show();
            });

            userIll.addEventListener('click', function() {
                picker2.show();
            });
            userSex.addEventListener('click',function(){
                picker3.show();
            });
            
            userName.addEventListener('click',function(){
                picker4.show();
            });
        }
    }
})