基本的弹层,点击弹出

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, //弹框默认为不显示
    };
  },
}
相关推荐
Wiktok18 分钟前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii6619 分钟前
html.
前端
掘金安东尼23 分钟前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃27 分钟前
react context如何使用
前端·javascript·react.js
GDAL32 分钟前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
IT_陈寒33 分钟前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
小谭鸡米花43 分钟前
uni小程序中使用Echarts图表
前端·小程序·echarts
芜青1 小时前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
a别念m1 小时前
前端架构-CSR、SSR 和 SSG
前端·架构·前端框架
BillKu6 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js