1: Find the from form plugin and enter it in the view layer
<u-form :model="form" ref="uForm">
<u-form-item label="性别"><u-input v-model="form.sex" type="select" /></u-form-item>
</u-form>
2: In the corresponding data data center, enter the required data
form: {
name: '',
intro: '',
sex: ''
}
3: Find the ActionSheet operation menu in the plug-in, put
<u-action-sheet :list="list" v-model="show" :tips="tips"></u-action-sheet>
write below step 1
:tips="tips": header content
:list="list" : what to select
v-model="show" binds show and hide
Enter in the data center
data() {
return {
tips: {
text: 'Please select gender',
color: '#909399',
fontSize: 24
},
list: [{
text: 'male'
},
{
text: 'female'
}
],
show: false
}
}
4. Because when you want to click the input box, you want him to jump out to make a selection, so add a click event in step 1
<u-form-item label="性别">
<u-input v-model="form.sex" type="select" @click="showSex = true" />
</u-form-item>
5. At this time, you can click to show and hide. Just add a method to make the content you choose appear on the page.
<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;
},
The complete code is as follows:
Html part:
<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 part:
<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>