基本的弹层,点击弹出

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, //弹框默认为不显示
    };
  },
}
相关推荐
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术5 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing5 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴6 小时前
简单入门Python装饰器
前端·python
袁煦丞7 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作