关于 label 标签

这篇随笔存在的意义是我是想记录一个时刻,一个解决问题的过程,以及熟读文档和夯实基础的重要性。

最近的项目中有一个环节是『处理餐品』,一个列表,罗列了需要手动处理的菜品,需求是单击任意一项,出现两个选项以供选择。

关于列表(v-repeat)如何解决同时展开的问题,再论述。(大概再也不会有机会了)

首先定义了一个type=checkboxinput,这样可以在两种状态之间转换,单击一次复选框选中,再单击一次复选框不选中。选中与否决定了处理选项是否显示。

image

image

需求是解决了,但存在一个很明显的问题是,复选框太小,用户可能尝试点击若干次也没有成功。理想状态是用户点击餐名即可触发显示与否功能。

于是乎想到将inputv-model用于餐名属性。

image

结果显然是否定的。

往上搜寻了一番,在 stackoverflow 上找到了答案。

image

这就得回到 label 定义了

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

如果我们没有id属性的话可考虑Method 1:Wrap Label Tag,结果不出所料,增加了作用范围。为了美观,将input设置display: none即可。

最终效果如下

image

image

每一个 HTML 标签的语义都是值得研究深入的。:)


(完)

(最后修改于2016-03-29)

Table of Contents