Vue:uni-app学习(六)--表单组件

vue

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>

以上是 Vue:uni-app学习(六)--表单组件 的全部内容, 来源链接: utcz.com/z/379527.html

回到顶部