element-ui的dialog弹框的封装

最新推荐文章于 2024-07-23 10:29:33 发布

常增兴

最新推荐文章于 2024-07-23 10:29:33 发布

阅读量1.7k

点赞数

分类专栏： vue element-ui dialog 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_42356155/article/details/110199098

版权

这篇博客详细介绍了如何在Vue项目中封装Element-UI的dialog弹框，包括在`components`目录下创建`dialog-demo.vue`组件，以及在`mixins`目录下编写`index.js`混入方法。在`index.vue`文件中展示了弹框的实际应用，为form-table-demo提供可复用的对话框解决方案。

摘要由CSDN通过智能技术生成

dialog弹框的封装案例

form-table-demo

components

dialog-demo.vue

<template>
  <el-dialog :visible.sync="isShow" v-bind="dialogOption">
    <el-form label-width="100px" :model="form" ref="el_form">
      <el-col :span="24">
        <el-form-item label="用户姓名：" prop="name">
          <el-input clearable placeholder="请输入用户姓名" v-model.trim="form.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="手机号：" prop="phone">
          <el-input clearable placeholder="请输入角色名称" v-model.trim="form.phone"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="账号：" prop="account">
          <el-input clearable placeholder="请输入角色名称" v-model.trim="form.account"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <div class="footer" style="text-align:center">
      <el-button type="primary" size="medium" class="search-btn">提&nbsp