element中添加对话框，用于修改密码

可以通过 Element UI 中的 Dialog 组件来实现添加对话框的效果，下面是示例代码：

<template>
  <el-dialog
    title="修改密码"
    :visible.sync="dialogVisible"
    :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input type="password" v-model="form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="form.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入新密码'));
              } else if (value !== this.form.newPassword) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    handleModify() {
      // 点击修改密码菜单项时触发，打开对话框
      this.dialogVisible = true;
    },
    handleClose(done) {
      // 关闭对话框时触发，重置表单
      this.$refs.form.resetFields();
      done();
    },
    handleSubmit() {
      // 确认修改密码时触发，提交表单
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行修改密码操作
          // ...
          this.dialogVisible = false;
        } else {
          // 表单验证不通过，提示错误信息
          return false;
        }
      });
    }
  }
};
</script>

上述代码中，Dialog 组件包含一个表单和两个按钮，分别用于取消和确认修改密码操作。表单中包含三个输入框，分别对应旧密码、新密码和确认密码。Dialog 组件的 visible 属性和 handleClose 方法用于控制对话框的显示和关闭，form 数据和 rules 规则用于表单的数据绑定和验证，handleSubmit 方法用于提交表单数据并执行修改密码的操作。