该代码示例展示了一个使用Vue.js创建的Picker组件，用于实现‘通过’、‘返修’、‘报废’三个选项的选择。组件包含数据绑定，其中value表示选中项，range定义可选范围。当选择改变时，onChange方法会被触发，更新value并打印所选值。
<template>
<view>
<view class="picker">
<view class="picker__hd">
<view class="picker__hd__text">请选择</view>
</view>
<view class="picker__bd">
<picker :value="value" mode="selector" range="{{ range }}" @change="onChange">
<view class="picker__item">{{ range[value] }}</view>
</picker>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: 0,
range: ['通过', '返修', '报废']
};
},
methods: {
onChange(e) {
this.value = e.detail.value;
console.log('选择的值为', this.range[this.value]);
}
}
}
</script>
<style>
.picker {
margin-top: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
.picker__hd {
font-size: 16px;
text-align: center;
margin-bottom: 20px;
}
.picker__hd__text {
font-weight: bold;
}
.picker__bd {
text-align: center;
}
.picker__item {
font-size: 18px;
color: #333;
}
</style>
2494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
