Popper 弹出窗

基础用法

<template>
  <div>
    <plv-popper trigger="hover">
      <div>文本内容</div>
      <plv-button slot="reference">hover 激活</plv-button>
    </plv-popper>
    <plv-popper content="文本内容">
      <plv-button slot="reference">click 激活</plv-button>
    </plv-popper>
  </div>
</template>

显示代码

出现位置

<template>
  <div>
    <div class="container">
      <plv-popper content="文本内容" placement="top-start">
        <plv-button slot="reference">top-start</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="top">
        <plv-button slot="reference">top</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="top-end">
        <plv-button slot="reference">top-end</plv-button>
      </plv-popper>
    </div>
    <div class="container">
      <plv-popper content="文本内容" placement="left-start">
        <plv-button slot="reference">left-start</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="left">
        <plv-button slot="reference">left</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="left-end">
        <plv-button slot="reference">left-end</plv-button>
      </plv-popper>
    </div>
    <div class="container">
      <plv-popper content="文本内容" placement="right-start">
        <plv-button slot="reference">right-start</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="right">
        <plv-button slot="reference">right</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="right-end">
        <plv-button slot="reference">right-end</plv-button>
      </plv-popper>
    </div>
    <div class="container">
      <plv-popper content="文本内容" placement="bottom-start">
        <plv-button slot="reference">bottom-start</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="bottom">
        <plv-button slot="reference">bottom</plv-button>
      </plv-popper>
      <plv-popper content="文本内容" placement="bottom-end">
        <plv-button slot="reference">bottom-end</plv-button>
      </plv-popper>
    </div>
  </div>
</template>

显示代码

Attributes

参数	说明	类型	可选值	默认值
visible / v-model	是否显示	Boolean	-	false
trigger	触发方式	String	click hover custom	click
content	Popper内的内容	String	-	-
placement	出现位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
disabled	是否禁用	Boolean	-	false
offset	出现位置的偏移量	Number	-	0
transition	渐变动画	String	-	plv-fade-in-linear
hoverOpenDelay	触发方式为 hover 时的显示延迟，单位为毫秒	Number	-	0
hoverCloseDelay	触发方式为 hover 时的隐藏延迟，单位为毫秒	Number	-	200
visibleArrow	是否显示箭头	Boolean	-	true
popperPadding	弹窗内边距，同css的padding	String	-	10px 8px
appendToBody	是否把弹窗元素已到body中	Boolean	-	true
clearStyle	清除原有样式	Boolean	-	false
popperClassName	弹窗自定义className	String	-	-

Slot

name	说明
—	Popper内的内容
reference	触发Popper显示的元素