arco-design-vue icon indicating copy to clipboard operation
arco-design-vue copied to clipboard

arco.design/vue官网上的表单组件点击label不会聚焦

Open LittleDropsOfWater opened this issue 1 year ago • 1 comments

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

LittleDropsOfWater avatar Jan 05 '24 03:01 LittleDropsOfWater

这个功能好像不太必要,你可以参考以下的代码实现,原生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>

Mchuuu avatar Feb 07 '24 03:02 Mchuuu