基本的弹层，点击弹出

愿➣2023-11-29 20:29

html 复制代码

 <div class="role">
    <el-button type="primary" size="mini" @click="showDialog = true">添加角色</el-button>
    </div>
       <!--控制弹框的显示隐藏visible  .sync可以点击X关闭弹框 -->
<el-dialog width="500px" :visible.sync="showDialog" title="新增角色">
   <el-form label-width="120px">
      <el-form-item label="角色名称">
        <el-input size="mini" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="启用">
        <el-switch size="mini"></el-switch>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input :rows="3" type="textarea"></el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" type="primary">确认</el-button>
            <el-button size="mini">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>

javascript 复制代码

export default {
  data() {
    return {
      showDialog: false, //弹框默认为不显示
    };
  },
}