一:焦点控制

需求:光标在输入框内的时候,点击上方的格式按钮,不能让输入框失去焦点

解决方案:将格式按钮事件绑定在onmousedown事件上,并阻止默认事件。不要用click事件


二:父子组件通信

需求:父组件调用字组件内的方法

方案:通过this.refs.name.方法名  实现调用

 

三:位置自适应的提示语组件:

需求:



方案:

分离为Tips组件,接收如下四个props:

  1. parentDom:相对定位的父级(即包裹Tips组件的父级元素)
  2. targetDom:响应提示语的dom标签(此处即button列表)
  3. topTune:高度微调值
  4. leftTune:left微调值(即响应提示组件的Dom标签的宽度)
  5. title:提示语

难点:

  1. Tips组件居中问题:需要获取到不同提示语下的的tips组件中,span元素的宽度,然后结合leftTune,计算出实际的left值,实现居中;
  2. 小三角居中问题:通过after实现的小三角,利用calc属性实现居中

组件核心代码:











本文转载:CSDN博客