1 : Trouvez le plugin de formulaire et entrez-le dans la couche de vue
<u-form :model="form" ref="uForm">
<u-form-item label="性别"><u-input v-model="form.sex" type="select" /></u-form-item>
</u-form>
2 : Dans le centre de données de données correspondant, saisissez les données requises
forme: {
Nom: '',
introduction : '',
sexe : ''
}
3: Trouvez le menu d'opération ActionSheet dans le plug-in, mettez
<u-action-sheet :list="list" v-model="show" :tips="tips"></u-action-sheet>
écrire ci-dessous l'étape 1
:tips="tips": contenu de l'en-tête
:list="list" : quoi sélectionner
v-model="show" lie afficher et masquer
Entrez dans le centre de données
Les données() {
retourner {
conseils: {
text: 'Veuillez sélectionner le sexe',
couleur : '#909399',
taille de la police : 24
},
liste: [{
texte : 'homme'
},
{
texte : "féminin"
}
],
afficher : faux
}
}
4. Parce que lorsque vous voulez cliquer sur la zone de saisie, vous voulez qu'il saute pour faire une sélection, alors ajoutez un événement de clic à l'étape 1
<u-form-item label="性别">
<u-input v-model="form.sex" type="select" @click="showSex = true" />
</u-form-item>
5. À ce stade, vous pouvez cliquer pour afficher et masquer. Ajoutez simplement une méthode pour faire apparaître le contenu que vous choisissez sur la 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;
},
Le code complet est le suivant :
Partie 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>Partie 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>