Easy UI

Appearance

Popper 气泡 ​

该组件主要用于相对某个元素进行智能定位的浮层场景，如文字提示、弹出框等等。

该文档主要用于描述该组件的一些方法、事件和使用，方便对上述提到的组件进行二次开发。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-popper.js";
</script>
js
import "easy-component-ui/ea-popper";

自定义样式 ​

移步到 CSS Part 或 CSS Custom Properties。

基本用法 ​

ea-popper 提供了一个基础的气泡，可以通过 show() / hide() 来控制显示与隐藏。

top-start top-start top top top-end top-end left-start left-start right-start right-start left left right right left-end left-end right-end right-end bottom-start bottom-start bottom bottom bottom-end bottom-end
查看代码
html
<div id="referenceSection" class="demo">
  <ea-row justify="center">
    <ea-col span="6">
      <ea-popper placement="top-start">
        top-start
        <ea-button variant="primary" slot="reference">top-start</ea-button>
      </ea-popper>
    </ea-col>
    <ea-col span="6">
      <ea-popper>
        top
        <ea-button variant="primary" slot="reference">top</ea-button>
      </ea-popper>
    </ea-col>
    <ea-col span="6">
      <ea-popper placement="top-end">
        top-end
        <ea-button variant="primary" slot="reference">top-end</ea-button>
      </ea-popper>
    </ea-col>
  </ea-row>

  <ea-row justify="space-between">
    <ea-col span="6">
      <ea-popper placement="left-start">
        left-start
        <ea-button variant="primary" slot="reference">left-start</ea-button>
      </ea-popper>
    </ea-col>
    <ea-col span="6">
      <ea-popper placement="right-start">
        right-start
        <ea-button variant="primary" slot="reference">right-start</ea-button>
      </ea-popper>
    </ea-col>
  </ea-row>

  <ea-row justify="space-between">
    <ea-col span="6">
      <ea-popper placement="left">
        left
        <ea-button variant="primary" slot="reference">left</ea-button>
      </ea-popper>
    </ea-col>
    <ea-col span="6">
      <ea-popper placement="right">
        right
        <ea-button variant="primary" slot="reference">right</ea-button>
      </ea-popper>
    </ea-col>
  </ea-row>

  <ea-row justify="space-between">
    <ea-col span="6">
      <ea-popper placement="left-end">
        left-end
        <ea-button variant="primary" slot="reference">left-end</ea-button>
      </ea-popper>
    </ea-col>
    <ea-col span="6">
      <ea-popper placement="right-end">
        right-end
        <ea-button variant="primary" slot="reference">right-end</ea-button>
      </ea-popper>
    </ea-col>
  </ea-row>

  <ea-row justify="center">
    <ea-col span="6">
      <ea-popper placement="bottom-start">
        bottom-start
        <ea-button variant="primary" slot="reference">bottom-start</ea-button>
      </ea-popper>
    </ea-col>
    <ea-col span="6">
      <ea-popper placement="bottom">
        bottom
        <ea-button variant="primary" slot="reference">bottom</ea-button>
      </ea-popper>
    </ea-col>
    <ea-col span="6">
      <ea-popper placement="bottom-end">
        bottom-end
        <ea-button variant="primary" slot="reference">bottom-end</ea-button>
      </ea-popper>
    </ea-col>
  </ea-row>
</div>
js
const referenceExample = {
  referenceElements: document.querySelectorAll("#referenceSection ea-popper"),

  init() {
    this.referenceElements.forEach(referenceElement => {
      referenceElement.addEventListener("click", e => {
        referenceElement.toggle();
      });
    });
  },
};
referenceExample.init();

不显示箭头 ​

通过设置 show-arrow 控制是否启用箭头效果。

top-start top-start top top top-end top-end
查看代码
html
<div id="arrowSection" class="demo">
  <ea-popper placement="top-start" show-arrow="false">
    top-start
    <ea-button variant="primary" slot="reference">top-start</ea-button>
  </ea-popper>
  <ea-popper show-arrow="false">
    top
    <ea-button variant="primary" slot="reference">top</ea-button>
  </ea-popper>
  <ea-popper placement="top-end" show-arrow="false">
    top-end
    <ea-button variant="primary" slot="reference">top-end</ea-button>
  </ea-popper>
</div>
js
const arrowExample = {
  referenceElements: document.querySelectorAll("#arrowSection ea-popper"),

  init() {
    this.referenceElements.forEach(referenceElement => {
      referenceElement.addEventListener("mouseenter", e => {
        referenceElement.show();

        referenceElement.addEventListener(
          "mouseleave",
          () => {
            referenceElement.hide();
          },
          { once: true }
        );
      });
    });
  },
};
arrowExample.init();

EaPopper API ​

EaPopper Attributes ​

参数说明类型可选值默认值
width宽度，单位 pxNumber—150
placement气泡的出现位置Stringtop / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-endtop
showArrow是否显示箭头Boolean—true
visible控制 Popper 显隐的属性Boolean—false
offset气泡出现的位置偏移量String—"0 0"
flip是否在超过原 placement 视口时，进行翻转Boolean—true

EaPopper CSS Part ​

名称说明
containerPopper 外层容器
reference触发 Popper 显示的 HTML 元素的父容器
originalPopper 内容容器

EaPopper Events ​

事件名说明回调参数
ea-show开启 Popper 时触发—
ea-shown开启 Popper 的动画结束时触发—
ea-hide关闭 Popper 时触发—
ea-hidden关闭 Popper 的动画结束时触发—

EaPopper Methods ​

方法名说明参数
show显示 Popper—
hide隐藏 Popper—
toggle切换 Popper 显示状态—

EaPopper Slots ​

名称说明
defaultPopper 内容插槽
reference触发 Popper 显示的 HTML 元素插槽

EaPopper CSS Custom Properties ​

属性名说明默认值
--ea-popper-widthPopper 宽度150px
--ea-popper-border-colorPopper 边框颜色var(--grey-300)
--ea-popper-background-colorPopper 背景颜色var(--color-white)
--ea-popper-box-shadowPopper 阴影var(--box-shadow-md)
--ea-popper-arrow-size箭头大小10px
--ea-popper-spacingPopper 内边距var(--spacing-md)
--ea-popper-transform-xX 轴偏移量0
--ea-popper-transform-yY 轴偏移量0
--ea-popper-transition过渡动画时长var(--transition-normal)