vue-colour-tip v0.1.4

vue-customize-tip

A prompt box of the vue2 version, which can be used for mobile terminal or pc prompt box. The plugin comes with four types, Default, Success, Warning, Danger. If you want to customize the pop-up box, you can configure the corresponding field customization.

image example

default：https://www1.pcauto.com.cn/customer/HZD/210702/2.png
success：https://www1.pcauto.com.cn/customer/HZD/210702/3.png
warning：https://www1.pcauto.com.cn/customer/HZD/210702/4.png
error：https://www1.pcauto.com.cn/customer/HZD/210702/5.png
custom: https://www1.pcauto.com.cn/customer/HZD/210702/1.png

Getting started

1、install the plugin:

npm install --save vue-colour-tip

2、Add the plugin into your app:

 import Vue from "vue" 
 import tip from "vue-colour-tip" 
 import 'vue-colour-tip/tip.css' 
 Vue.use(tip);

#Usage

this.$tip(message,option)

message - tip text option - configuration item { styleObject:{}
type:"", duration:1000 } styleObject : Customizable tooltip background, style and text style type ：-tip type,The default type is not configured as the default type. The configurable fields are, "success", "warning", "error" *duration : time

Default example

this.$tip("测试")

Type example

this.$tip("测试",{type:"success",duration:2000,})

custom example

 this.$tip("测试",{styleObject:{background:"red"},duration:2000,})