ph-message v0.1.0-beta.1

vue-template

install

npm install ph-message

interface indtoduction

export type PhMsgType = 'success'|'danger'|'warning'|'info'|'light'
export type PhMsgOpt={
    position?:String,//top|bottom
    type?:PhMsgType,
    closable?:boolean,
    autoClose?:boolean,
    clickable?:boolean,
    icon?:string,
    iconClass?:string,
    iconColor?:string,
    theme?:string //none|dark
}
export interface PhMsgReturn{
    click(fn:(...a:any[])=>void):PhMsgReturn,
    close(fn:(...a:any[])=>void):PhMsgReturn
}

javascript

import Message from 'ph-message'
//全局
app.use(Message)
//子组件
this.$phMessage（msg:string,opt?:PhMsgOpt
//注意 如需想类型提醒需要如下定义typescript
declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties{
        $phMessage : (msg:string,opt?:PhMsgOpt)=>PhMsgReturn,
    }
}
//按需 以下为静态方法，无需模版
Message.
            notify(msg:string,opt?:PhMsgOpt).click(fn).close(fn)
            success(msg:string,opt?:PhMsgOpt).click(fn).close(fn)
            warning(msg:string,opt?:PhMsgOpt).click(fn).close(fn)
            info(msg:string,opt?:PhMsgOpt).click(fn).close(fn)
            danger(msg:string,opt?:PhMsgOpt).click(fn).close(fn)

案例doc