arco-design-vue
arco-design-vue copied to clipboard
arco.design/vue官网上的表单组件点击label不会聚焦
- [x] I'm sure this does not appear in the issue list of the repository
Basic Info
- Package Name And Version: @arco-design/[email protected]
- Browser: chrome120.0.0.0
- Reproduction Link: https://arco.design/vue/component/form
What is expected?
label 在点击时激活输入组件
Steps to reproduce
https://arco.design/vue/component/form 点击任意label
Extra info
arco.design/react中的部分表单组件具备此功能,例如switch 第一个username
这个功能好像不太必要,你可以参考以下的代码实现,原生label的for属性与input的id相同时可实现聚焦效果,不过要注意a-for-item在渲染时会在外层div增加字段名作为id,所以在设置时不能与字段名小写相同
<a-form :model="form"> <a-row :gutter="16"> <a-col :span="8"> <a-form-item field="username" label="UserName" label-col-flex="100px" :labelAttrs="{ for: 'username_', }" > <a-input v-model="form.username" placeholder="please enter..." :input-attrs="{ id: 'username_', }" /> </a-form-item> </a-col> </a-row> </a-form>