Vue:uni-app学习（六）--表单组件

Vue:uni-app学习（六）--表单组件

 

<template>
    <view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">

</style>
<template>
    <view class="content">
        <form @submit="formSubmit" @reset="formReset">
            <view class="box">
                <view class="title">用户名：</view>
                <input type="text" name="user" placeholder="请输入用户名" />
            </view>
            
            <view class="box">
                <view class="title">密码：</view>
                <input type="password" name="user" placeholder="请输入密码" />
            </view>
            
            <view class="box">
                <view class="title">性别：</view>
                <radio-group name="gender">
                    <label>
                        <radio value="男" /><text>男</text>
                    </label>
                    <label>
                        <radio value="女" /><text>女</text>
                    </label>
                </radio-group>
            </view>
            
            <view class="box">
                <view class="title">爱好：</view>
                <checkbox-group name="loves">
                    <label>
                        <checkbox value="读书" /><text>读书</text>
                    </label>
                    <label>
                        <checkbox value="写字" /><text>写字</text>
                    </label>
                </checkbox-group>
            </view>
            
            <view class="box">
                <view class="title">年龄：</view>
                <slider value="20" name="age" show-value></slider>
            </view>
            
            <view class="box">
                <view class="title">保留选项：</view>
                <switch name="switch" />
            </view>

            <view class="row">
                <button type="default" form-type="submit">提交</button>
                <button type="default" form-type="reset">重置</button>
            </view>

        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            formSubmit() {
                alert(33)
            },
            formReset() {
                uni.showToast({
                    title: "清除成功!",
                    icon: "none"
                });
            }
        }
    }
</script>

<style lang="scss">
    .content {
        display: flex;
        flex-direction: column;
        margin-top: 30rpx;
        background-color: $uni-bg-color-grey;
        width: 690rpx;
        padding: 20rpx 30rpx;
        font-size: 18px;
        line-height: 1.8;

        .box {
            margin-bottom: 40rpx;

            .title {

                margin-bottom: 20px;
            }

            input {
                background-color: white;
                border-radius: 5px;
            }
        }

        .row {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
    }
</style>