1:找到from 表单插件,在视图层输入
<u-form :model="form" ref="uForm">
<u-form-item label="性别"><u-input v-model="form.sex" type="select" /></u-form-item>
</u-form>
2:在对应的data数据中心,输入需要的数据
form: {
name: '',
intro: '',
sex: ''
}
3:在插件中找到 ActionSheet 操作菜单,把
<u-action-sheet :list="list" v-model="show" :tips="tips"></u-action-sheet>
写在步骤 1 的下面
:tips="tips":抬头内容
:list="list" : 要选择的内容
v-model="show" 绑定显示与隐藏
在数据中心输入
data() {
return {
tips: {
text: '请选择性别',
color: '#909399',
fontSize: 24
},
list: [{
text: '男'
},
{
text: '女'
}
],
show: false
}
}
4.因为是要点击输入框的时候希望他跳出来进行选择,所以在步骤 1 加上点击事件
<u-form-item label="性别">
<u-input v-model="form.sex" type="select" @click="showSex = true" />
</u-form-item>
5.这时候已经可以进行点击显示和隐藏了,在添加一个方法让你选择的内容出现在页面上就行了
<u-action-sheet :tips="tips" :list="list" v-model="showSex" @click="actionSheetCallback"></u-action-sheet>
actionSheetCallback(index) {
uni.hideKeyboard();
this.form.sex = this.list[index].text;
},
完整代码如下:
Html部分:
<u-form :model="form" ref="uForm">
<u-form-item label="性别">
<u-input v-model="form.sex" type="select" @click="showSex = true" />
</u-form-item>
</u-form>
<u-action-sheet :tips="tips" :list="list" v-model="showSex" @click="actionSheetCallback"></u-action-sheet>
Script部分:
<script>
export default {
data() {
return {
form: {
name: '',
intro: '',
sex: ''
},
tips: {
text: '请选择性别',
color: '#909399',
fontSize: 24
},
showSex: false,
list: [{
text: '男'
},
{
text: '女'
}
],
};
},
methods: {
// 点击actionSheet回调
actionSheetCallback(index) {
uni.hideKeyboard();
this.form.sex = this.list[index].text;
},
},
}
</script>