用u-view写的uni-app常用的表单形式精品分析

首先我们看效果图

<template><view class="container"><view class="header "><view class="box"><label>姓名</label><text class="color">*</text></view><view class="u-input"><input type="text" placeholder="请输入姓名" maxlength="10" placeholder-style="color: #B1B1B1" /></view></view><view class="header "><view class="box"><label>身份证号</label><text class="color">*</text></view><view class="u-input"><input type="text" placeholder="请输入身份证号" maxlength="18" placeholder-style="color: #B1B1B1" /></view></view><view class="header "><view class="box"><label>手机号</label><text class="color">*</text></view><view class="u-input"><input type="text" placeholder="请输入手机号" maxlength="11" placeholder-style="color: #B1B1B1" /></view></view><view class="header "><view class="box"><label>所在地区</label><text class="color">*</text></view><view class="city" @click="show = true"><!-- 通过判断address里面是否有值来判定显示和隐藏 --><text  v-if="address===''?true:false">请选择所在地区</text><text style="color:#333333">{{address}}</text><u-picker v-model="show" mode="region" @confirm="confirm"></u-picker></view><view class="row"><image src="../../static/rightrow.png" mode=""></image></view></view><view class="header "><view class="box"><label>经营地址</label><text class="color">*</text></view><view class="u-input"><input type="text" placeholder="请输入经营地址" placeholder-style="color: #B1B1B1" /></view></view><view class="header "><view class="box"><label>位置</label><text class="color">*</text></view><view class="u-input"><input type="text" placeholder="请选择" /></view><view class="row"><image src="../../static/rightrow.png" mode=""></image></view></view><view class="header "><view class="box"><label>推荐人手机号</label></view><view class="u-input"><input type="text" placeholder="请输入推荐人手机号" maxlength="11" placeholder-style="color: #B1B1B1" /></view></view><view class="apply"><view class="toapply">申请成为商户</view></view></view>
</template><script>export default {data() {return {show: false,address:'',}},methods: {confirm(e) {// 点击后获取省市区展现到页面this. address=`${e.province.label+e.city.label+e.area.label}` }}}
</script><style lang="scss" scoped>.header {width: 100%;height: 120rpx;padding: 0 32rpx;display: flex;flex-direction: row;.city {flex: 1;height: 100%;line-height: 120rpx;text-align: right;color: #B1B1B1;border-bottom: 1rpx solid #E4E4E4;}.row {position: relative;top: 50%;right: 0;transform: translateY(-50%);width: 24rpx;height: 24rpx;font-size: 0;image {width: 100%;height: 100%;}}.box {width: 180rpx;height: 100%;border-bottom: 1rpx solid #E4E4E4;line-height: 120rpx;label {font-size: 30rpx;font-weight: 400;color: #333333;line-height: 42px;}.color {color: #FC5C56;}}.u-input {border-bottom: 1rpx solid #E4E4E4;color: #333333;flex: 1;line-height: 120rpx;text-align: right;input {width: 100%;height: 100%;}}}.apply {width: 100%;margin-top: 49rpx;height: 90rpx;padding: 0 33rpx;text-align: center;.toapply {width: 100%;height: 100%;background-color: green;line-height: 90rpx;background-color: #337DFF;font-size: 36prx;border-radius: 45rpx;font-weight: 400;color: #FFFFFF;}}
</style>

用u-view写的uni-app常用的表单形式精品分析相关推荐

oracle数据库表单,Oracle常用数据库系统表单以及SQL的整理
因为最近涉及到了一些数据库的归档,备份等工作,所以一部分的重心放在了数据库上,毕竟之前对数据库的了解也只停留在了一般的建表,查询,最多最多再写一写触发器之类的东西. 通常都是自己瞎搞搞,也就懂一点皮毛 ...
项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
表单标签的作用、常用的表单控件
1.1 表单标签的作用作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式). 可见性:在网页上是不可见的. 1.2 form常用的属性 Form标签是表单标签的一个根标签 1.3 ...
常用的表单正则表达式
1.^\d+$ //匹配非负整数(正整数 + 0) 2.^[0-9]*[1-9][0-9]*$ //匹配正整数 3.^((-\d+)|(0+))$ //匹配非正整数(负整数 + 0) 4.^-[ ...
几款常用的表单设计器解决方案
在日常前端开发中,表单可以说是最常用的一种数据录入及展示组件.如果项目里有成百上千个表单需要手动编写代码,这将极大的一笔极大的人力开支.这时候,选择一款合适的表单设计器,就显得非常重要了,不仅能极大的 ...
web day02 表格表单及HTML常用的表单控件
一. 表格的标签及属性 table属性 Width.height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cells ...
JS常用正则表达式表单验证代码大汇总
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
HTML一些常用的表单元素,表单元素-HTML中常用的表单元素
HTML中常用的表单元素有datalist.keygen.output. 1.datalist datalist元素规定输入域的选项列表.列表通过datalist内的option元素创建的. 如需把d ...
layui常用的表单验证
使用layui表单常见的验证及遇到的坑一.lay-verify="required|number|",如果默认的验证无法使用时,要检查表单属性 <form action=& ...

用u-view写的uni-app常用的表单形式精品分析

用u-view写的uni-app常用的表单形式精品分析相关推荐

最新文章

热门文章