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();
});
}
}
})
实现效果图
