tips弹窗(vTips)

单组件引入

import <name> from ‘vucc/tips’;

说明

tips组件提供了两种实例化方式,
1,可以采用常规的方法对tips进行声明,如:

<v-tips :id="myTips" :content="'我是一个提示操作/类型是info'" type="info"></v-tips>

2,为了方便代码中使用,tips类的弹出窗口还提供了另一种纯js的实例化机制

window.Tips.init(id, type, content, showTime, appendClass, appendStyle);

当tips弹窗被实例化时,将会将当前tips弹窗的vue对象引用绑定到 document.body.$$tips 上,以方便对tips进行调用

示例








tips info
tips success
tips error
tips warn


tips第二种调用方法

代码 V

<v-tips :id="'infoTips1'" :content="'我是一个提示操作/类型是info'" type="info"></v-tips>
<v-tips :id="'infoTips2'" :content="'我是一个提示操作/类型是success'" type="success"></v-tips>
<v-tips :id="'infoTips3'" :content="'我是一个提示操作/类型是error'" type="error"></v-tips>
<v-tips :id="'infoTips4'" :content="'我是一个提示操作/类型是warn'" type="warn"></v-tips>


methods: {
    // tips show way 1
    showTips(id) {
        document.body.$$tips[id].show();
    },
    showTipsWay2() {
        window.Tips.init('', 'info', 'lalalala');
    },
}



属性

参数 说明 类型 可选值 默认值
id 必填,用于指代整个tips实例,后续调用时通过此id调用组件实例 String - -
type tips弹窗的类型 String success/confirm/error/info info
showTime 弹窗消失的时间 Number - 1200ms
content tips弹出框内容 String - -

方法

方法名 说明 类型 参数 默认值
show 用于直接将tips展示在页面中,并于 showTIme 指定的时间后消失 Function - -
← 下拉列表(vDropdown) messageBox弹窗(vMessageBox) →