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