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 官方文档

相关推荐
LYFlied15 分钟前
Vue2 与 Vue3 虚拟DOM更新原理深度解析
前端·javascript·vue.js·虚拟dom
小飞侠在吗39 分钟前
vue shallowRef 与 shallowReacitive
前端·javascript·vue.js
by__csdn4 小时前
微前端架构:从理论到实践的全面解析
前端·javascript·vue.js·架构·typescript·vue·ecmascript
小福气_4 小时前
自定义组件 vue3+elementPlus
前端·javascript·vue.js
是谁眉眼5 小时前
vue环境变量
前端·javascript·vue.js
鹏北海-RemHusband5 小时前
Vue 组件解耦实践:用回调函数模式替代枚举类型传递
前端·javascript·vue.js
海上彼尚5 小时前
vite+vue3 ssg预渲染方案
前端·javascript·vue.js
北辰alk5 小时前
Vue 数组响应式原理深度解析:这些方法为何能被监听到?
vue.js
想努力找到前端实习的呆呆鸟5 小时前
vscode编写vue代码的时候一聚焦就代码块变白?怎么回事如何解决
vue.js·visual studio code
webkubor5 小时前
一次 H5 表单事故:100vh 在 Android 上到底坑在哪
前端·javascript·vue.js