v-easy-components

# Tip 提示框

Hover message after mouse hover, support vNode node rendering

# Basic usage

Demonstrate the basic usage of vTip. If the input is a string, the default is the content of the message box. You can use placement: to control the direction.

TOP
LEFT
RIGHT
BOTTOM
The v-tip command supports passing in both String and Object data. Object configuration reference to the documentation below
<template>
  <div v-tip="'i am vTip . top'">TOP</div>
  <div v-tip="{content: 'i am vTip . left', placement: 'left'}">LEFT</div>
  <div v-tip="{content: 'i am vTip . right', placement: 'right'}">RIGHT</div>
  <div v-tip="{content: 'i am vTip . bottom', placement: 'bottom'}">BOTTOM</div>
</template>

# Use v-tip modifier

If placement is also specified on the bound value, then the definition of the modifier is

TOP
LEFT
RIGHT
BOTTOM
<template>
  <div class="box">
    <div class="top" v-tip.top="'Top'">TOP</div>
    <div class="left" v-tip.left="'Left'">LEFT</div>
    <div class="right" v-tip.right="'Right'">RIGHT</div>
    <div class="bottom" v-tip.bottom="'Bottom'">BOTTOM</div>
  </div>
</template>

# Theme

Using different themes in the context of some web pages can have better visual effects

TOP light
TOP dark
<template>
  <div class="inline" v-tip.top="{content: 'i am light vTip', effect: 'light'}">TOP light</div>
  <div class="inline" v-tip.top="{content: 'i am dark vTip', effect: 'dark'}">TOP dark</div>
</template>

# Triggering conditions

Use the pop-up tip content to have more interactive ways and more application scenarios

Using click events
TOP
<template>
  <div class="inline" v-tip.top="{content: 'i am click vTip', target: 'click'}">Using click events</div>
  <div class="inline" v-tip.top="{content: 'i am mouseenter vTip'}">TOP</div>
</template>

# 自定义动画

use transition: to define the info box to pop and hide the animation

TOP
Note:
  • The component has a default style. To override the style, please increase css Weights
  • v-tip instances will be mounted directly to body , so animation-top can't have scope
<template>
  <div class="top" v-tip="{content: 'i am vTip . top', transition: 'animation-top'}">TOP</div>
</template>

<style lang="sass">
  .animation-top-enter-active, .animation-top-leave-active
    transition: top .2s, opacity .2s !important
    z-index: 9
  .animation-top-enter, .animation-top-leave-to
    top: -12px !important
    opacity: 0
</style>

# The delay disappears and the mouse moves in and off automatically disappears

use hideAfter enterable Control delay time and mouse shift in to turn off automatic disappearance

Disappear after one second
Mouse moves in and off automatically disappears
<template>
  <div class="inline" v-tip="{content: 'i am vTip . hideAfter', enterable: true, hideAfter: 1000}">Disappear after one second</div>
  <div class="inline" v-tip="{content: 'i am vTip . enterable', enterable: true}">Mouse moves in and off automatically disappears</div>
</template>

# customize VNode and html 0.6.1+

Use VNode: Custom message box content

Use html: you can also customize the content of the message box

Target
Target
Use the official recommended render function to render a template or use extend to introduce a component template. Let's create a dynamic template using jsx syntax.( Use with bable plugin), Official document
<template>
  <div>
    <div class="box" v-tip="{placement: 'top', VNode: renderVNode}">Target</div>
    <div v-tip.top="{html: '<strong>Hello</strong><p>Say hello</p>'}">Target</div>
  </div>
</template>

<script>
  export default {
    methods: {
      renderVNode() {
        const h = this.$createElement;
        return h('div', null, [
          h('ve-button', {
            on: {
              click: () => {
                this.$msg({type: 'success', message: 'Hello VEasy'})
              }
            }
          }, ['submit'])
        ])
      },
    }
  }
</script>

# Options

Attribute Description Type Default
content The contents of the tip box. If the value of the v-tip is a string, then the string will be used to fill the content. any () / Any content that is supported by vue -
Class V-tip class, note the uppercase "C" Array / String / Object / Function -
VNode V-tip content node, supporting dynamic templates. VNode -
placement V-tip position, optional top / left / bottom / right String top
offset Length of offset Number 0
hideAfter Automatically hide delay after v-tip appears, in milliseconds Number 200
transition Define gradient animation String fade
enterable Whether the mouse can enter the v-tip Boolean false
html Render the contents of the tip box using innerHTML string -
target How to trigger pop-up content String mouseenter (Optional value: click)
effect What theme to use String dark (Optional value: light)

# v-tip Modifier

Modifier Description Type Optional value
v-tip.[direction] The direction of the tip box relative to the target content string left / right / top / bottom

← Skeleton 骨架屏 →