Popover

Popover 类似于 '', 使用 '' 组件和 'v-nly-popover' 指令可以给任何元素和组件提供消息提示

<div class="text-center my-3">
  <nly-button
    v-nly-popover.hover.top="'指令 popover 的内容'"
    title="popover 标题"
  >
    悬浮一下,你会发现奇迹
  </nly-button>

  <nly-button id="popover-target-1">
    悬浮一下,你会发现奇迹
  </nly-button>
  <nly-popover target="popover-target-1" triggers="hover" placement="top">
    <template #title>popover 标题</template>
    我是组件 popover <b>文本</b> 内容!
  </nly-popover>
</div>

<!-- popover.name -->
<!-- popover.vue -->

总览

  • Popover 使用第三方 Popover.js 进行定位

  • Popover 需要使用自定义 css nly-adminlte-vue.css 才会有式样

  • 设置 container prop 为 null(即默认值,默认情况下, nly-popover 是渲染到 <body> 下面的)来避免在一些复杂组件中出现渲染 bug (比如 input-group, button-group 等)。可以设置 container 为指定的元素, nly-popover 会渲染到指定的元素中。

  • nly-popover 组件或者指令 v-nly-popover 如果是绑定在隐藏的元素上会失效

  • disabled 的元素上绑定 nly-popover 组件或者指令 v-nly-popover, 必须在其父元素上触发显示和隐藏

target

target prop 指定了切换 <nly-popover> 显示隐藏的元素和组件,比如一个按钮的 id 属性为 popover-test, 则给 nly-popover 传入 target='popover-test',那么这个 popover 的显示和隐藏便由这个按钮控制

target 接收的值可以是以下几种:

  • 普通 HTMLElement 或者 SVGElement 标签的 id 或者组件的 id。这时候传入应该是一个字符串

  • 普通 HTMLElement 或者 SVGElementref 属性 (this.$refs.refName

  • 组件的 ref 属性 (this.$refs.refName

  • 一个可以返回普通 HTMLElement 或者 SVGElement 的函数

注意:

  • target 指向的元素或着组件必须在 <nly-popover> 挂载之前出现在 document 中,如果在 nly-popover 挂载的时候, target 指向的元素或着组件没有在 document 中, popover 会失效

  • 请确保 nly-popover 挂载的时候能找得到 target 指向的元素或着组件。

  • target 传入函数的时候,也请注意以上两条

  • HTMLElement 是指普通的 html 标签, 比如 <div>, <a>

  • SVGElement 是指 <svg> 标签

定位(Positioning)

popover 的使用 relative 定位, 可选位置有: top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop, leftbottom

Popover top

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover topleft

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover topright

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover right

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover righttop

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover rightbottom

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover bottom

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover bottomleft

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover bottomright

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover left

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover lefttop

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

Popover leftbottom

吾三岁识万字,十岁七步成诗,年幼而天下闻名,始上山学艺,八年间艺成下山,一入汪洋深似海,而今满头白发似秃顶

点击 指令 popover 查看更多定位 Demo

切换状态(Triggers)

popover 可以使用 click, hover, focus 来切换可见状态。

组件参数

<nly-popover>

props 参数

props (Click to sort Ascending)类型默认值描述
title
StringText to place in the popovers title
target
必传
String or or or Function or ObjectElement string ID, or a reference to an element or component, that you want to trigger the popover.
triggers
String or Array'click'Specify which triggers will show the popover. Supported values are 'click', 'hover', 'focus'. Refer to the docs for special triggers 'blur' and 'manual'
placement
String'right'Placement of the popover: One of 'top', 'bottom', 'right', 'left', 'topleft', 'topright', 'bottomleft', 'bottomright', 'lefttop', 'leftbottom', 'righttop', 'rightbottom'
fallback-placement
String or Array'flip'placement to use when the popover would be out of boundaries. Refer to the docs for more details
variant
StringnullApplies one of the Bootstrap theme color variants to the component
custom-class
StringnullCSS class (or classes) to apply to the popover's root element
delay
Number or Object or String50Value for the show and hide delay. Applies to both show and hide when specified as a number or string. Use object form to set show and hide delays individually
boundary
String or or Object'scrollParent'The boundary constraint of the popover: 'scrollParent', 'window', 'viewport', or a reference to an HTMLElement or component
boundary-padding
Number or String5The popover will try and stay away from the edge of the boundary element by the number of pixels specified
offset
Number or String0Offset (in pixels) for the arrow center compared to the trigger target element
no-fade
Booleanfalse无动画,设置true关闭动画
container
String or or ObjectThe container element to append the rendered popover when visible. Default's to the body element
show
BooleanfalseWhen set will show the popover
noninteractive
Booleanfalse
disabled
Booleanfalse禁用,设置true为禁用状态
id
Stringnull设置id
content
StringText to place in the body of the popover

Slots

Slot NameDescription
title Optional slot for title (HTML/components supported)
default Slot for content (HTML/components supported)

Events

EventArgumentsDescription
show
  1. bvEvent - bvEvent object
Emitted when popover is about to be shown. Cancelable. Call bvEvent.preventDefault() to cancel show.
shown
  1. bvEvent - bvEvent object
Emitted when popover is shown
hide
  1. bvEvent - bvEvent object
Emitted when popover is about to be hidden. Cancelable. Call bvEvent.preventDefault() to cancel hide.
hidden
  1. bvEvent - bvEvent object
Emitted when popover is hidden
enabled
  1. bvEvent - bvEvent object
Emitted when popover becomes enabled
disabled
  1. bvEvent - bvEvent object
Emitted when popover becomes disabled
bv::popover::show
  1. bvEvent - bvEvent object
Emitted on $root when popover is about to be shown. Cancelable. Call bvEvent.preventDefault() to cancel show.
bv::popover::shown
  1. bvEvent - bvEvent object
Emitted on $root when popover is shown
bv::popover::hide
  1. bvEvent - bvEvent object
Emitted on $root when popover is about to be hidden. Cancelable. Call bvEvent.preventDefault() to cancel hide.
bv::popover::hidden
  1. bvEvent - bvEvent object
Emitted on $root when popover is hidden
bv::popover::enabled
  1. bvEvent - bvEvent object
Emitted on $root when popover becomes enabled
bv::popover::disabled
  1. bvEvent - bvEvent object
Emitted on $root when popover becomes disabled

$root event listeners

你可以通过 $root emit以下事件来控制组件(指令) <nly-popover>

EventArgumentsDescription
bv::hide::popover

id - (optional), popover id to hide

Close (hide) all or a specific open popover when this event is emitted on $root
bv::show::popover

id - (optional), popover id to show

Open (show) all or a specific popover when this event is emitted on $root
bv::disable::popover

id - (optional), popover id to disable

Disable all or a specific popover when this event is emitted on $root
bv::enable::popover

id - (optional), popover id to enable

Enable all or a specific popover when this event is emitted on $root

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-popover>NlyPopovernly-adminlte-vue

例子

import { NlyPopover } from 'nly-adminlte-vue'
Vue.component('nly-popover', NlyPopover)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
PopoverPluginnly-adminlte-vue

这个插件会自动包括以下插件:

  • VNlyPopoverPlugin

例子

import { PopoverPlugin } from 'nly-adminlte-vue'
Vue.use(PopoverPlugin)