@0x0/vue-js-popover 中文文档教程

发布于 6年前 浏览 24 项目主页 更新于 3年前

npm 版本

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;
}

npm version

Vue.js popover

Live demo here

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;
}
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文