Vue在点击内部元素时(获得焦点),怎样让外部div元素样式变化?

问题:

div内部有很多元素,div、 p、 span 、input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入

假设html 结构如下

 <div>
    <p>最外部div高亮测试</p>
    <div>用vue如何实现选中下面这个input最外面的div边框会高亮<br/>
    <input type=text placeholder="请输入内容"/>
    </div>
</div>

解决要点

1. div要获得焦点,需要设置tabindex这个属性,值为-1(可以获得焦点事件,但不能用tab键选中,tabindex>=0时可以,这里设置为-1即可)

2.检测focusin和focusout事件并改变div的class(focus并不会向父级传播)

在线演示代码

https://jsfiddle.net/f4rzn85o/3/

上一篇:避免用户重复点击按钮(使用Enable:=False,消息繁忙时会有堵塞的问题,只能改用Sleep)


下一篇:精度评定中的准确率(Precision)和召回率(Recall)