弹窗样式修改，轻松实现弹窗功能

在vue页面中添加弹窗，并自设置弹窗相关样式，使用element UI 也能轻松实现弹框。步骤如下：

1.点击“新增成员”按钮出现弹窗：

 <el-container>
          <el-button type="text" @click="addMember = true">新增成员</el-button>
                <el-dialog
                        :visible.sync="addMember"
                        style=" text-align: center;"
                >
 </el-container>

“新增成员”按钮为弹窗的入口，点击即会出现弹窗： 

2.接下来为弹窗内容的相关内容：首先在script中设置弹窗右上角叉号关闭的方法: 

 methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
     }

3.然后根据个人不同需求在template中进行弹窗设置：

 <el-container>
          <el-button type="text" @click="addMember = true">新增成员</el-button>
          <el-dialog :visible.sync="addMember" style=" text-align: center;">
             //此处可根据个人需求设置不同弹窗样式          
          这是弹窗样式
           //此处为确定和取消按钮设置
          <span class="dialog-footer">
               <el-button @click="addMember = false">取 消</el-button>
                <el-button type="primary" @click="addMember = false">
                                确 定
                </el-button>
           </span>
           </el-dialog>
 </el-container>

4.接下来在style中设置不同的样式进行美化：

<style lang="scss">
.el-dialog {
     //设置整个弹窗的大小及背景颜色等
    width: 374px;
    height: 570px;
    background-color: #152344;
     //插入渐变色图片更加美观
    background-image: url('../theme/img/dataLine.png');
    background-repeat: no-repeat;
    background-position: 28% 5%;
    background-size: 80%;
}
</style>

 5.最后弹窗的效果图如下：