跟随Element学习Vue小技巧(45)——Popover

❝
一个人只要多笑

就会变得很幸福
❞

前言

每次打开浏览器，就会跳出好多广告，真是不胜其烦。

某天突然醒悟：过去那些挨家挨户上门推销产品的推销员，就是弹窗广告的原型吧？弹出的不一定都是广告，搞不好是优惠呢？
动动手指，薅一薅羊毛不好吗，O(∩_∩)O

1 Popover

三角形 triangle

代码片段

/* 宽高为0，四个边界透明 */
.el-popper .popper__arrow, 
.el-popper .popper__arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

/* 上边界为深灰色 */
.el-popper[x-placement^=top] .popper__arrow {
    bottom: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-color: #ebeef5;
    border-bottom-width: 0;
}

/* 上边界为白色即背景色，且相对向上偏移1px */
.el-popper[x-placement^=top] .popper__arrow:after {
    bottom: 1px;
    margin-left: -6px;
    border-top-color: #fff;
    border-bottom-width: 0;
}

/* 加上投影 */
.el-popper .popper__arrow {
    border-width: 6px;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
}

技巧解析

❝
三角形，不规则图形呀，怎么搞？
既然一个不规则，拼一下呗，给你四个三角形，是不是就规则了呀 ^_^
宽高为0的border盒子怎么表现呢?
不正好是4个三角形拼的么
所以，隐藏3个，显示一个，就可以了
那么带边界怎么办？
再加一个△偏移1px覆盖呀
那么，带阴影呢？
这个，这个，有drop-shadow 哈哈

用CSS画一个带阴影的三角形传送门
 border属性实现自适应三角形传送门
❞

可聚焦 focusable

代码片段

if (this.trigger === 'click') {
  ...
} else if (this.trigger === 'hover') {
  ...
} else if (this.trigger === 'focus') {
  if (this.tabindex < 0) {
    console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
  }
  if (reference.querySelector('input, textarea')) {
    on(reference, 'focusin', this.doShow);
    on(reference, 'focusout', this.doClose);
  } else {
    on(reference, 'mousedown', this.doShow);
    on(reference, 'mouseup', this.doClose);
  }
}

技巧解析

❝
怎么模拟focus呢？
首先的能够focus吧，即focusable
什么你不知道focusable？？
别怕，传送门已为你准备好
然后呢，输入框直接focus
如果没法foucs，只好mousedown了

说说focusin/focusout事件传送门
❞

「晴天里」 「总觉得自己住在孩子气的世界里」

跟随Element学习Vue小技巧(45)——Popover

一个人只要多笑

就会变得很幸福

前言

1 Popover

三角形 triangle

代码片段

技巧解析

可聚焦 focusable

代码片段

技巧解析

参考链接

往期回顾