<template>
    <div class="content">
        <el-button plain @click="success" >成功</el-button>
        <el-button plain @click="warning">警告</el-button>
        <el-button plain @click="error">错误</el-button>
        <el-button plain @click="info">信息</el-button>
    </div>
</template>

<script>
export default {
    methods: {
        success() {
            let vm = this
            vm.$notify({
                title: '成功',
                message: '这是一条成功的消息',
                type: 'success',
                duration: 0,
                onClick: function() {
                    console.log('点我干啥')
                },
                onClose: function () {
                    console.log('关闭了')
                }
            })
        },
        warning() {
            let vm = this
            vm.$notify({
                title: '警告',
                message: '这是一条警告消息',
                type: 'warning',
                position: 'top-left'
            })
        },
        error() {
            let vm = this
            vm.$notify({
                title: '错误',
                message: '这是一条错误消息',
                type: 'error',
                position: 'bottom-right',
                // 偏移量
                offset: 100
            })
        },
        info() {
            let vm = this
            vm.$notify({
                title: '提示',
                message: '这是一条普通信息',
                type: 'info',
                position: 'bottom-left',
                // duration属性为弹框的显示时间， 设置为0则不会自动关闭
                duration: 0
            })
        }
    }
}
</script>