二次封装一个el-dialog中代用el-form表单的修改密码组件

大致效果图如下

组件全部代码

<template>
  <el-dialog
    :title="title"
    :visible="visible"
    @update:visible="handleUpdateVisible"
    :width="width"
    custom-class="password-change"
  >
    <div class="form-list">
      <el-form
        ref="editForm"
        :model="editData"
        :rules="editRules"
        :label-position="labelPosition"
        :label-width="labelWidth"
      >
        <el-form-item
          v-for="item in editCfg"
          :label="item.label"
          :prop="item.prop"
          :key="item.prop"
        >
          <el-input
            v-if="item.type==='input'"
            clearable
            v-model="editData[item.prop]"
            :size="size"
            @change="item.change && item.change(editData[item.prop])"
            :style="{width: item.width}"
            show-password
          ></el-input>
        </el-form-item>
        <div align="center">
          <span class="btn" v-for="item in searchHandle" :key="item.label">
            <el-button
              :type="item.type"
              :size="item.size || size"
              @click="item.handle()"
            >{{item.label}}</el-button>
          </span>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "person-info",
  props: {
    value: {},
    width: {
      type: String,
      default: "30%"
    },

    size: {
      type: String,

      default: "medium"
    },
    title: {
      type: String,
      default: "修改密码"
    },
    editData: {
      type: Object,
      default: () => {}
    },

    editRules: {
      type: Object,
      default: null
    },
    editCfg: {
      type: Array,
      default: () => []
    },
    searchHandle: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: [Number, String],
      default: "90px"
    },
    labelPosition: {
      type: String,
      default: "left"
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handleUpdateVisible(val) {
      this.visible = val
      this.$emit("input", val)
    }
  },
  watch: {
    value: {
      handler(val) {
        if (this.visible !== val) {
          this.visible = val
        }
      }
    }
  }
}
</script>
<style lang="scss">
.password-change {
  border-radius: 10px;
  .form-list {
    position: relative;
    margin: 0 0 40px 40px;
    .btn {
      margin-right: 15px;
    }
  }
  .el-dialog__header {
    background: #f2f9fd !important;
    border-radius: 10px;
    border-bottom: none;
  }
  .el-dialog__title {
    font-weight: 500;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>

在需要的地方引入并使用

然后使用方式,举个栗子🌰:

   <person-info
      v-model="detail.visible"
      width="600px"
      label-width="90px"
      :title="detail.title"
      :editCfg="detail.editCfg"
      :editData="detail.editData"
      :searchHandle="detail.searchHandle"
    ></person-info>
    

然后在data内定义

detail: {
        visible: false,
        title: "修改密码",
        editData: {
          name: "",
          age: ""
        },
        editCfg: [
          { label: "登陆账号", prop: "user" },

          {
            label: "原密码",
            prop: "name",
            type: "input",
            placeholder: "请输入原密码",
            change: data => console.log(data)   //可以看到实时输入的结果
          },
          {
            label: "新密码",
            prop: "age",
            type: "input",
            placeholder: "请输入新密码"
          },
          { label: "确认新密码", prop: "password", type: "input" }
        ],
        searchHandle: [
          {
            label: "确定",
            type: "primary",
            handle: () => this.searchHandleForm()
          },

          { label: "取消", handle: () => "" }
        ]
      }
      // 如果需要可以加上表单验证
      

在methods的某个方法中给一个 visible: true,即可打开弹窗

我是根据这个大佬的文章来写的,厉害还有很多别的方式,例如下拉框和多选单选之类的,有需要可以看
https://www.cnblogs.com/xingguozhiming/p/10739200.html