@0x0/vue-js-popover 中文文档教程
Vue.js popover
安装:
npm install vue-js-popover --save
导入:
import Vue from 'vue'
import Popover from 'vue-js-popover'
Vue.use(Popover)
使用:
<button v-popover:foo>Toggle popover</button>
<popover name="foo">
Hello ????
</popover>
或:
<button v-popover="{ name: 'foo' }">Toggle popover</button>
Tooltip
插件包含一个简单的Tooltip
包装器. 要使用它,您必须:
在 main.js
中设置 tooltip
标志:
import VPopover from 'vue-js-popover'
Vue.use(VPopover, { tooltip: true })
在应用程序的任何位置包含 tooltip
组件:
<tooltip/>
将消息分配给任何element:
<button v-popover:tooltip="'This is a string value'">My butt0n</button>
Tooltip 组件很简单 af - 33 行代码(主要是声明)。 它演示了使用提供的工具创建新事物是多么容易。
Props
props: {
/* Tooltip name. */
name: { type: String, required: true },
width: { type: Number, default: 180 },
/* If set - will show a tiny tip. */
pointer: { type: Boolean, default: true },
/* Name of the event which triggeres
showing/hiding of the popover.
Possible values are: 'click', 'hover'. */
event: { type: String, default: 'click' }
}
Positioning
您可以使用 .left
、.right
、.top
、.bottom
修饰符来设置 popover 的位置.
示例:
<button v-popover:info.right>Edit (show popover right)</button>
<button v-popover.left="{ name: 'info' }">Edit</button>
Styling
Popover 组件具有 data-popover="name"
参数,允许对其应用样式。
例子:
<popover name="foo" :pointer="false">Bar</popover>
div[data-popover="foo"] {
background: #444;
color: #f9f9f9;
font-size: 12px;
line-height: 1.5;
margin: 5px;
}
Vue.js popover
Install:
npm install vue-js-popover --save
Import:
import Vue from 'vue'
import Popover from 'vue-js-popover'
Vue.use(Popover)
Use:
<button v-popover:foo>Toggle popover</button>
<popover name="foo">
Hello ????
</popover>
Or:
<button v-popover="{ name: 'foo' }">Toggle popover</button>
Tooltip
Plugin contains a simple wrapper for Tooltip
. To use it you will have to:
Set tooltip
flag in your main.js
:
import VPopover from 'vue-js-popover'
Vue.use(VPopover, { tooltip: true })
Include tooltip
component anywhere in the application:
<tooltip/>
Assign message to any element:
<button v-popover:tooltip="'This is a string value'">My butt0n</button>
Tooltip component is simple af - 33 lines of code (mostly declarations). It demonstrates how easily you can create new things using the provided tool.
Props
props: {
/* Tooltip name. */
name: { type: String, required: true },
width: { type: Number, default: 180 },
/* If set - will show a tiny tip. */
pointer: { type: Boolean, default: true },
/* Name of the event which triggeres
showing/hiding of the popover.
Possible values are: 'click', 'hover'. */
event: { type: String, default: 'click' }
}
Positioning
You can use .left
, .right
, .top
, .bottom
modifiers to set the position of the popover.
Example:
<button v-popover:info.right>Edit (show popover right)</button>
<button v-popover.left="{ name: 'info' }">Edit</button>
Styling
Popover components have data-popover="name"
argument that allows to apply styles to it.
Example:
<popover name="foo" :pointer="false">Bar</popover>
div[data-popover="foo"] {
background: #444;
color: #f9f9f9;
font-size: 12px;
line-height: 1.5;
margin: 5px;
}