vue简单弹窗

事件

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。触发的事件名是camelCase(kebab-case)，则监听的事件名也必须是对应的camelCase(kebab-case)。

slot

单独为slot设置样式是无效的。需要在slot外包裹一个html标签，然后为该html标签设置样式。

Demo

html

    你就不想点一下看看嘛
    
        Dear handsome, cute, humor, wise, attractive, manly, fashionable, drop dead gorgeous biu biu biu biu biu biu ~~~
    

css

html, body {
    background: linear-gradient(-30deg, #37ecba 0%, #72afd3 70%);
    height: 100%;
}
.reminder, .modal {
    width: 80%;
    padding: 20px 10px;
    background-color: #5DD39E;
    border: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-shadow: 2px 2px 2px #56b78b;
    border-radius: 10px;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
}

p {
    text-align: center;
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 1px dashed #fff;
}

.slot {
    padding-top: 5px;
}

.modal button {
    width: 100px;
    height: 30px;
    background-color: #fff;
    border: none;
    border-radius: 8px;
    padding: 5px;
}

.modal button:first-child {
    float: left;
}

.modal button:last-child {
    float: right;
}

js

Vue.component('query', {
        props: {
            queryTitle: {
                type: String,
                default: '我以为你不会点我呢/(ㄒoㄒ)/~~',
            },
            queryConfirm: {
                type: String,
                default: 'Yes'
            },
            queryCancel: {
                type: String,
                default: 'No'
            }
        },
        template: `

            
{{ queryTitle }}
            

            

            {{ queryConfirm }}
            {{ queryCancel }}
            
        
`,
        methods: {
            queryY() {
                this.$emit('y');
            },
            queryN() {
                this.$emit('n');
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            isHide: true
        },
        methods: {
            toggleClick: function() {
                this.isHide = !this.isHide
            },
            confirm() {
                this.isHide = !this.isHide
                alert('么么哒~~mua~~')
            },
            cancel() {
                this.isHide = !this.isHide
                alert('let me go')
            }
        }
    })

github链接：https://github.com/Biu-Huang/vue-alert/tree/master