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/

 

转载于:https://www.cnblogs.com/kuaiyuit/p/7354136.html