使用uView插件中From表单中的性别下拉框使用方法

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>