首页 ›  文章

element-ui notification 以及 onClick 和 onClose 用法

2019-12-04
<input id="articleId" value="1190000021193450" class="hidden">
<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>
[![](https://img.javascriptcn.com/f821ef3f4e1ded1e846e4415e51000d2.png) ](/u/xiangjin_5dddd35914ebb)

<button type="button" class="btn btn-primary follow-user sf_do" data-dotype="post" data-content="{"type":"state","state":false,"true":"\u5173\u6ce8\u4f5c\u8005","false":"\u6b63\u5728\u5173\u6ce8"}" data-api="/iteration/api/user/1030000021124903/follow">关注作者</button>

推荐阅读
![Planets](https://img.javascriptcn.com/96a5ee720a61730cda8e8f49c95d9be2.png) <map name="gridsMap" id="gridsMap"></map>
原文链接:segmentfault.com

上一篇:WebSocket 移动端连接会断开-坑
下一篇:ipfs-api
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入