用vue实现tips组件

<div class="app">
        <a href="javascript:;" @click="showtips">显示</a>
        <tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
            <div slot="body">
                <p>hello world</p>
                <p>wenzi</p>
            </div>
        </tips>
    </div>

.tips {
            position: fixed;
            left: 10px;
            bottom: 10px;
            z-index: 1001;
            -webkit-overflow-scrolling: touch;
            max-width: 690px;
            width: 260px;
            padding: 10px;
            background: #fff;
            box-shadow: 0 0 10px #888;
            border-radius: 4px;
        }
        .tips-close{
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
        .tips-header{
            text-align: center;
            font-size: 25px;
        }
        [v-cloak]{
            display: none;
        }

Vue.component('tips', {
    props : ['tipsOptions'],
    template : '#tips',

    data(){
        return{
            show : false
        }
    },

    computed:{
        tips : {
            get() {
                let tips = this.tipsOptions || {};
                tips = {
                    title: tips.title || '提示',
                    text: tips.text || '',
                    showbtn : tips.showbtn || true,
                    btnText : tips.btnText || '确定'
                };
                // console.log(tips);
                return tips;
            }
        }
    },

    methods:{
        closeTips(){
            this.show = false;
        },

        yes : function(){
            this.show = false;
            this.$emit('yes', {name:'wenzi', age:36});
        },

        showTips(){
            var self = this;
            self.show = true;

            setTimeout(function(){
                // self.show = false;
            }, 2000)
        }
    }
});

var app = new Vue({
    el : '.app',
    data : {
        tipsOptions : {
            title : 'tip'
        }
    },

    methods:{
        yes(args){
            // console.log( args );
            alert( JSON.stringify(args) );
        },

        showtips(){
            // console.log( this.$refs );
            this.$refs.dialog.showTips();
        }
    }
})