Vue实现基本组件的方法-从最简单的弹窗开始

前言

项目中基本上都会用到灰色模态框，最基本的就是登陆登出界面，本文会从最简单的一个遮罩组件做起。

效果图

实现步骤

1.实现html和css样式

2.子组件的vue代码

3.父组件的vue代码

1.实现html和css样式

html如下

<div class="modal" v-show="showModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal">
                    <solt></solt>
                    <Icon type="md-close" @click="closeMyself"/>
                </div>
            </div>
        </div>
    </div>

CSS如下

<style lang="stylus" scopced>

.modal
    display flex
    align-items center
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: 0;
    &:before
        content: "";
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #171e26;
        opacity: .9;
        -webkit-transition: opacity .3s ease-out;
        transition: opacity .3s ease-out;
    .modal-dialog
        width: auto;
        margin: 0 auto;
        transform: none;
        position: relative;
.modal-content
    border-radius: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    min-height: 380px;
    position: relative;
    background-clip: padding-box;
.close-modal
    position: fixed;
    right: 45px;
    top: 35px;
    border-radius: 30px;
    padding: 12px 12px;
    color: hsla(0,0%,100%,.9);
    background-color: hsla(0,0%,100%,.25);
    transition: all .4s;
    &:hover
        background hsla(0,0%,100%,.35)
        cursor pointer
    i
        font-size 20px
</style>

2.子组件的vue代码

props:{
        showModal: {
            default: true,
            type: Boolean,
            required: true
        }
    },
    methods: {
        closeMyself() {
            this.$emit("on-close")
        }
    }

3.父组件的vue代码

<modal-window :showModal="showModal" @on-close="closeDialog"></modal-window>

data() {
    return {
        showModal: false,//遮罩面板
    }
    
closeDialog() {
    this.showModal = false
}