diantou/src_custom/_form-designer/xm-verify-input.vue

<template>
  <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
    <a-form-model-item prop="formValue" label="默认值">
      <a-input v-model="ruleForm.formValue" />
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import components from './_import-components/xm-verify-input-import'

export default {
  name: 'XmVerifyInput',
  metaInfo: {
    title: 'XmVerifyInput',
  },
  components,
  props: {
    value: {
      type: [String, Number],
      default: undefined,
    },
    regex: {
      type: RegExp,
      default: '',
    },
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value && !this.regex.test(value)) {
        callback(new Error('格式有误！'))
      } else {
        this.$emit('input', value)
        callback()
      }
    }
    return {
      ruleForm: {
        formValue: this.value,
      },
      rules: {
        formValue: [{ validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>