uniapp 简单表单布局1

效果如图:

一、UI界面

 <template><view class="body"><uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"><view class="content"><uni-forms-item name="name" label="项目编号" labelAlign="left"><input type="text" disabled="" v-model="formData.number" class="uni-input-noneborder"></input></uni-forms-item><view class="line"></view><uni-forms-item name="name" label="项目全称" labelAlign="left"><input type="text" disabled="" v-model="projectCon.name" class="uni-input-noneborder"placeholder="请输入用户名"></input></uni-forms-item><view class="line"></view><uni-forms-item name="name" label="项目简称"  labelAlign="left"><input type="text" disabled="" v-model="projectCon.name" class="uni-input-noneborder"placeholder="请输入用户名"></input></uni-forms-item><view class="line"></view><uni-forms-item name="birth" label="提交日期" labelAlign="left"><picker  mode="date"  :value="formData.date"  @change="bindDateChange"><view  class="picker uni-input-noneborder">{{formData.date}}</view></picker></uni-forms-item></view>
<view class="content" style="height:30px"> <view class="TextRight" @click="queryhistory">查看历史记录 ></view></view>
<view class="content"><view class="title"><font class="leftTitle">固化物</font><font class="rightTitle">库存：{{ghwkucunW - parseFloat(formData.solidWeightOut) }}吨，{{ghwkucunP - parseInt(formData.solidpackageOut) }}包</font></view><view class="line"></view><uni-forms-item name="trainNumber" label="固化物转运车次"  labelWidth="110" labelAlign="left"><input type="digit" v-model="formData.trainNumber" class="uni-input-border"placeholder="请输入固化物转运车次"></input></uni-forms-item><uni-forms-item name="solidpackageOut" label="固化物转运包数" labelWidth="110" labelAlign="left"><input type="digit" v-model="formData.solidpackageOut" class="uni-input-border"placeholder="请输入固化物转运包数"></input></uni-forms-item><uni-forms-item name="solidWeightOut" label="固化物转运重量" labelWidth="110" labelAlign="left"><input type="digit" v-model="formData.solidWeightOut" class="uni-input-border"placeholder="请输入固化物转运量"></input></uni-forms-item></view>
<view class="content"><view class="title"><font class="leftTitle">榜单图片</font></view><view class="line"></view><view class="content"><image class="img" v-for="(item,index) in imgArr" :src="getFlieName(item)"></image><image class="img" src="../../static/submit_upload.png" @click="chooseVideoImage" mode=""></image></view></view><view class="btuSty"><button  type="primary" @click="$noMultipleClicks(submitForm)">提交表单</button></view><view class="btuSty"></view></uni-forms></view>
</template>

二、css样式

<style lang="less" scoped>
.body {background-color: #f4f5f3;.content {background-color: white;margin-bottom: 15px;padding-bottom: 10px;.TextRight {float: right;width: 30%;font-size: 14px;cursor: pointer;padding: 5px;}}.line {height: 1px;width: 94%;margin: 0 auto;background-color: #e5e5e5;}.uni-forms-item {margin: 0 auto;margin-top: 5px;width: 90%;}.uni-forms--top {padding: 0px 0px;}.title {align-items: center;padding-left: 15px;height: 40px;line-height: 40px;margin-top: 15px;font-weight: normal;color: #333;}.leftTitle {float: left;}.rightTitle {margin-right: 10px;float: right;}.uni-forms-item__label {width: 80px !important;}.uni-input-noneborder {padding: 0 10px;height: 35px;width: 90%;float: left;font-size: 14px;color: #666;border-radius: 5px;box-sizing: border-box;}.uni-input-border {padding: 0 10px;height: 35px;width: 100%;float: left;font-size: 14px;color: #666;border: 1px #e5e5e5 solid;box-sizing: border-box;}.inputText {width: 10%;line-height: 35px;float: right;text-align: center;}.picker {padding: 10;height: 35px;width: 90%;float: left;font-size: 14px;color: #666;border-radius: 5px;box-sizing: border-box;line-height: 40px;}.content {width: 100%;height: 100%;display: block;justify-content: space-around;.img {width: 120px;height: 120px;}}.btuSty {margin-top: 20px;width: 70%;margin: 0 auto;height: 60px;}
}
</style>

end! 复制就能用

uniapp 简单表单布局1相关推荐

html flex 表单样式,Flexbox 布局的最简单表单的实现
弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇教程 ,才意识到一 ...
div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
《uni-app》表单组件-form表单
本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组件-form表单 ...
《uni-app》表单组件-Checkbox组件
本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组 ...
一步一步学习Bootstrap系列--表单布局
前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...
React简单表单最佳实践
从一个简单表单谈起假设我们要做一个表单,比如是这样,要怎么做? 你可能会这样写:firstName对应一个键盘记录,lastName对应一个键盘记录: import React from 'reac ...
html多级折叠菜单表单,JS实战篇之收缩菜单表单布局
获取节点的两种方式: 1.通过event对象的srcElement属性: 2.通过事件源对象用this传入. 代码如下: 收缩菜单 · 表单布局 function list(dtNode){ // v ...
Qt之表单布局（QFormLayout）
简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例 ...
python嵌套html开发gui_python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例...
PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于 ...

uniapp 简单表单布局1

uniapp 简单表单布局1相关推荐

最新文章

热门文章