$notify通知

通知添加组件

by xie shine

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
    <el-button type="primary" @click="showNotify">Click here first</el-button>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

Babel + JSX

const Profile = Vue.extend({
        data: function () {
            return {
                percentage: 0
            }
        },
        render(h){
            return h('el-progress',{props:{"text-inside":!0,"stroke-width":18,percentage:this.percentage}})
        }
    });

    new Vue({
        el:'#app',
        methods: {
            showNotify() {
                let id = 'id'+Math.random().toString(32).slice(-8);
                let n = this.$notify({
                    title: "loading",
                    duration: 0,
                    message: this.$createElement('div',{attrs:{"id":id}})
                });
                let t = new Profile();
                t.$mount('#'+id);
                (function(){
                    let f = arguments.callee;
                    setTimeout(()=>{
                        ++ t.percentage < 100 ? f() : n.close();
                    },100)
                }())
            }
        }
    })