vue2 点击按钮弹框

1.点击按钮

   <el-button type="primary" @click="showDialog">主要按钮</el-button>

2.弹出框

  <el-dialog title="个人信息修改" class="diglog" :close-on-click-modal="false" :visible.sync="open" width="30%"

            height="50%">

            <el-form ref="form" :model="form">

                <el-form-item class="span" label="输入姓名" prop="name">

                    <el-input v-model="input" placeholder="请输入姓名" class="input"></el-input>

                </el-form-item>

                <el-button type="primary">确定</el-button>

                <el-button>取消</el-button>

            </el-form>

        </el-dialog>

3.script

export default {

    name: 'ceshi',

    data() {

        return {

            open: false,

            input: ''

        }

    },

    methods: {

        showDialog() {

            this.open = true;

        },

    }

   

}

4.css属性

.diglog {

    text-align: center;

    line-height: 4rem;

}

.span {

    font-size: larger;

}

.input {

    width: 15rem;

}

5.效果图