cip-components/cip-form-input/extension/password-confirm/index.vue

<template>
  <div class="cip-password-confirm">
    <el-form-item :prop="fieldKey" :rules="rules">
      <cip-password :modelValue="modelValue" @update:modelValue="emitInput"></cip-password>
    </el-form-item>
  </div>
</template>

<script>
import { ElFormItem } from 'element-plus'
import { formInputProps } from '../../form-input-props'
import CipPassword from '../../basic/password'

export default {
  name: 'password-confirm',
  components: {
    ElFormItem, CipPassword
  },
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, { emit }) {
    const rules = [
      {
        validator: (rule, value, callback) => {
          if (!value) {
            return callback(new Error('请再次输入密码'))
          }
          if (value !== props.otherValue) { // 通过otherkey把密码字段的值传入进行对比
            callback(new Error('两次密码输入不一致'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]

    const emitInput = (val) => {
      emit('update:modelValue', val)
    }

    return {
      rules,
      emitInput
    }
  }
}
</script>

<style lang="less">
.cip-password-confirm{
  width: 100%;
}
</style>