目录

1.官方单个的输入弹窗，用来提交单个内容

2.自定义的弹窗，也是改自官方

国内官网在这儿： 

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/dialog

本文就写了单独的输入框和自定义的多个弹窗输入，废话少说，直接上代码

 1.官方单个的输入弹窗，用来提交单个内容

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    }
  }
</script>

2.自定义的弹窗

点击删除后弹出： 

<template>
  <div>
    <!--点后弹出弹窗-->
    <el-form :inline="true">
      <el-form-item>
        <el-button @click="showConfirmCodeDialog">删除选中</el-button>
      </el-form-item>
    </el-form>
    <!--弹出的弹窗内容-->
    <el-dialog title="删除账号" :visible.sync="dialogVisible" center width="20%">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="secureCode" placeholder="请输入安全验证码" clearable></el-input>
          </el-form-item>
        </el-form>
        <p style="color: #f00;">提示: 删除账号需要填写安全验证码, 防止出现手误删除的情况, 如果不知道什么是安全验证码, 请联系公司管理员!</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //弹出输入框
        dialogVisible: false,
        secureCode: "",
      }
    },
    methods: {
      //弹窗输入对话框
      showConfirmCodeDialog() {
        this.dialogVisible = true;//显示弹窗
      },
      confirmDelete() {
        console.log("调用了确定删除按钮")
      },
    }
  }
</script>