uni-app 内置组件:Label

Label 组件通常用于改进表单组件的可用性,使用户点击标签时,也可以对表单组件进行操作,增加了触摸区域。

API

Label 是一个用来改善用户体验的辅助性组件,通常用于扩大点击区域。

属性

Label 组件的主要属性如下:

  • for:用于绑定控件的 id,当该控件被点击或标记时,与该 label 对应的 form 类型的控件会获得焦点。
  • class:为label自定义样式类。

示例

HTML 部分:

html 复制代码
<view class="form-item">
  <label for="username" class="form-label">用户名:</label>
  <input id="username" type="text" class="form-input" />
</view>

<view class="form-item">
  <label for="password" class="form-label">密码:</label>
  <input id="password" type="password" class="form-input" />
</view>

在这个例子中,点击 用户名:密码: 文本都将使对应的 input 控件获得焦点。

更详细的内容请参考最新的 uni-app 官方文档

相关推荐
发现一只大呆瓜13 分钟前
Vue-Vue2与Vue3核心差异与进化
前端·vue.js·面试
发现一只大呆瓜37 分钟前
Vue2:数组/对象操作避坑大全
前端·vue.js·面试
发现一只大呆瓜39 分钟前
Vue3:ref 与 reactive 超全对比
前端·vue.js·面试
程序猿大波2 小时前
基于java,SpringBoot和Vue餐饮公司食堂管理系统设计
java·vue.js·spring boot
前端小趴菜053 小时前
vue3项目优化方案
前端·javascript·vue.js
Irene19914 小时前
对比总结:Vue3中的 watch 和 Pinia中的 $subscribe
vue.js·pinia·watch·subscribe
Luna-player4 小时前
gitee上的vue项目,刚刚创建了一个分支,怎么在本地上拉取分支项目
前端·vue.js·gitee
徐小夕4 小时前
借助AI,1周,0后端成本,我开源了一款Office预览SDK
前端·vue.js·github
还是大剑师兰特4 小时前
Vue3 按钮切换示例(启动 / 关闭互斥显示)
开发语言·javascript·vue.js
SuperEugene4 小时前
前端代码注释规范:Vue 实战避坑,让 3 年后的自己还能看懂代码|项目规范篇
前端·javascript·vue.js