解决小程序u-form的u-form-item的label样式显示过慢

已于 2023-11-24 10:09:16 修改
阅读量846 收藏 10
点赞数 12
文章标签： 小程序 apache 服务器
于 2023-11-23 16:36:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60041868/article/details/134580927
版权

 因为u-form-item自己计算label宽度，会有点慢，所以给u-form-item直接指定宽度，:labelWidth="200"

<u-form-item class="all-form-style" label="身份证号" label-position="left" :labelWidth='200'>
	<input class="" type="idcard" v-model="ruleForm.fqsfzhm" placeholder="请输入身份证号"
								placeholder-style="color:#B3B3B3;"></input>
</u-form-item>

叠巘_
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序开发－form 表单提交和取值
03-29
我们知道，如果我们直接给 input 添加 bindinput，比如：<input bindinput="onUsernameInput" />，那么可以在 onUsernameInput 中直接使用 e.detail.value，即：...第二步、添加输入控件到 form 中，并为其指定 n
el-form-renderer:data数据驱动的动态复杂表格解决方案
04-28
形式呈现器目录灵感贡献贡献者执照 介绍 什么el-form-renderer基于element-ui ，但不限于element-ui组件。 在完全继承element-ui的form属性的基础上，进行了扩展。 一些非形式的组件或自定义组件（例如图片上传和RTF...
H5和微信小程序table表格不兼容解决办法 小程序自定义table
ATM的博客
01-15 701
--最近三年及最近一期收入结构 -->日期(年)收入情况(万)占比(%)
uview 中使 u-form 的 u-form-item 内容右移 slot=“right“
名人卷耶
11-24 1万+
<u-form-item label-width="130" label="接收推送" prop="intro"> <!-- 此处switch的slot为right，如果不填写slot名，也即 u-switch 将会左对齐 --> <u-switch v-model="popForm.accept" size="35" active-color="#216fff" slot="right"></u-switch> </u-form-item&g.
基于uni-app的动态表单
Dayer的博客
04-24 1786
动态表单
uni-forms-item 标签label怎么变宽
weixin_60415789的博客
04-19 5217
uni-forms-item label="姓名" :label-style="width: '100px'}" ></uni-forms-item><uni-forms-item label="姓名" class="custom-label-width"> </uni-forms-item><uni-forms-item label="姓名" label-width="100px" ></uni-forms-item>--input 元素或其他表单控件 --input 元素或其他表单控件 -->
如何调uView中input和Form表单的样式
s_156的博客
03-20 473
如上，我们不想让bottom线占满整个宽度，可以直接找到组件u-form-item，在样式中添加width：80%的样式。以上添加了两个类，其中u-m-l-40表示的是 margin-left ：40rpx；如果想placeholder的文字靠右，可以再给input框加入文字靠右的属性。用 placeholder=“请输入备注内容”再通过内置样式修改input框的长度。
Yii 给form表单 添加class
小c
10-13 2379
beginWidget('CActiveForm',array("class"=>"abc"));?> 今天遇到这个问题,class 出错,为什么 id 都可以呢,原理在这个类中没有定义class 这个属性 那该怎么办,他提供一个 htmloptions 的属性 所以 我们可以这样 beginWidget('CActiveForm',array("htmlOpti
微信小程序-form表单提交代码实例
10-17
主要介绍了微信小程序-form表单提交，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-ele-form-generator可视化表单设计工具-其他
06-12
vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具，并且支持vscode 插件、cli 本地启动、在线设计多种方式，让表单开发的效率更上一层楼！ vue-ele-form-generator特性： 1、提供vscode 插件更...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
vue-sku-form 基于 Vue & ElementUI 的电商 SKU 表单配置组件 你或许感兴趣 一款开箱即用的 Vue 中后台管理系统框架
uniapp表单校验和提交
weixin_43453621的博客
07-25 6192
用到u-viewui框架（推荐，因为确实好看），明显已经校验并提交到服务器，得到数据返回。
前端工作总结295-uni-增加表单验证
qq_41632427的博客
09-15 526
前端
uniapp中UView中 u-form表单在v-for循环下如何进行表单校验
weixin_41463944的博客
09-01 4647
uniapp中UView中 u-form表单在v-for循环下如何进行表单校验
uniapp组件-uni-forms表单案例
jxzdezhanhao的博客
03-22 7594
代码实现： <template> <view> <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"> <uni-group title="基本信息" top="0"> <uni-forms-item name="name" required label="用户名"&gt..
uniapp组件-uni-forms表单
热门推荐
~~
03-04 2万+
效果图： 代码实现： <template> <view> <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"> <uni-group title="基本信息" top="0"> <uni-forms-item name="name" required label="用户
工作334:uni-控制整个label区域可选
歌谣的博客
01-25 192
<navigator url="../LevineHua-editor/LevineHua-editor" class="single"> <u-form-item label="内容" label-width="100%" prop="content" class="label-left"> <u-input placeholder="请输入公告内容" v-model="form.content" type="texarea"></u-input
uView/u--form/u-form-item/u--input必填项显示红色星*号/表单校验带红色星*号
最新发布
QinMN的博客
05-30 445
uView/u--form/u-form-item/u--input必填项显示红色星*号/表单校验带红色星*号
uniapp u-form表单约束问题
weixin_72552407的博客
12-20 418
问题点，在h5页面和模拟器页面上面调试时不会出现问题，但是一到真机测试就出现约束不通过，提示填写完整信息，但是已经使用v-if隐藏了不需要的form-item，结果还是提示需要些v-if（图1 v-show处）的那两项后续研究发现使用v-show隐藏此两项即可验证成功。
u-form-item label和内容换行
05-23
你可以在 u-form-item 标签内部使用 u-row 和 u-col 标签来实现 label 和内容的换行。具体实现代码可以参考以下示例： ``` <u-form-item label="姓名"> <u-row> <u-col span="24"> <u-input placeholder="请输入姓名"></u-input> </u-col> </u-row> </u-form-item> ``` 在这个示例中，我们将 u-input 组件放在了 u-col 中，同时让 u-col 占据了整个 u-row 的宽度，这样就可以让 label 和内容分别在两行显示了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值