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

相关推荐
014-code7 分钟前
Vue 中 data 为什么是函数而不是对象?
前端·javascript·vue.js
巴巴博一18 分钟前
UniApp 纯前端实现企业级购物车:Vuex + Storage 多用户状态管理闭环方案
前端·vue.js·uni-app·状态模式
网络点点滴31 分钟前
Vue组件通信-mitt
前端·javascript·vue.js
低保和光头哪个先来34 分钟前
TinyEditor 篇2:剪贴板粘贴图片并同步上传至服务器
服务器·前端·javascript·css·vue.js
阳火锅41 分钟前
AI时代的到来,我想打造这样一款产品。
前端·javascript·vue.js
OpenTiny社区43 分钟前
不仅是修复 Bug:TinyVue 3.29.0 把“无障碍信息”写进了组件的 DNA 里
前端·javascript·vue.js
蜡台1 小时前
Node Vue 项目开发常见问题解决
前端·javascript·vue.js·git·node
还是大剑师兰特2 小时前
vue3中如何使用 getCurrentInstance()
前端·javascript·vue.js
Thomas.Sir2 小时前
Vue 3:现代前端框架的架构革命
前端·vue.js·web·大前端
清空mega2 小时前
《Vue3 模板语法与常用指令详解:插值、绑定、件、条件渲染、列表渲染一次学会》
前端·javascript·vue.js