vue中创建一个简单的表单弹框举例

vue中创建一个简单的表单弹框举例,外层使用vue-nice-modal来打开这个弹框，这里主要是对el-form的简单使用，以及vue-nice-modal使用的简单举例，备忘

<template>
  <!-- 样式设置弹框 -->
  <el-dialog
    :title="t('saveModel')"
    :visible="visible"
    @update:visible="$emit('update:visible', false)"
    width="480px"
    ref="dialog"
    v-dialogDrag
    :modal="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    @close="handleCancel"
  >
    <el-form
      @submit.native.prevent
      ref="form"
      :rules="rules"
      :model="modelInfoForm"
      label-width="150px"
      label-position="top"
    >
      <el-form-item :label="t('modelName')" prop="modelName">
        <el-input
          v-model="modelInfoForm.modelName"
          ref="name"
          :placeholder="t('enterPlaceholder')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="t('modelDes')" prop="modelDes">
        <el-input
          type="textarea"
          :rows="4"
          v-model="modelInfoForm.modelDes"
          ref="description"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ t('cancel') }}</el-button>
      <el-button type="primary" @click="handleConfirm">{{ t('saveBtn') }}</el-button>
    </span>
  </el-dialog>
</template>

<script setup lang="ts" name="SaveModelDialog">
import { getByteLen, validateName } from '@common/utils/validateFunc';
import { reactive } from 'vue';
import { useI18n } from 'vue-i18n-bridge';

interface IProps {
  visible: boolean;
  callback: (action: 'confirm' | 'cancel', payload?: any) => void;
  remove: () => void;
  hide: () => void;
}

interface IEmits {
  (e: 'update:visible', visible: boolean): void;
}
const { t } = useI18n({
  messages: {
    zh: {
      saveModel: '保存模型',
      cancel: '取消',
      saveBtn: '保存',
      modelName: '模型名称',
      modelDes: '描述',
      enterPlaceholder: '请输入模型名称',
    },
    en: {
      saveModel: 'Save Model',
      cancel: 'Cancel',
      saveBtn: 'Save',
      modelName: 'Model Name',
      modelDes: 'Description',
      enterPlaceholder: ' Please enter model name',
    },
  },
});

const modelInfoForm = reactive({
  modelName: '',
  modelDes: '',
});

const rules = {
  modelName: [
    {
      required: true,
      validator: validateName,
    },
  ],
  modelDes: [
    {
      validator: (rule, value, callback) => {
        if (getByteLen(value) > 80) {
          callback(t('global.exceedInfo'));
        } else {
          callback();
        }
      },
    },
  ],
};

const emit = defineEmits<IEmits>();

const props = defineProps<IProps>();

function handleConfirm() {
  props.hide();

  props.callback('confirm', modelInfoForm);
}
function handleCancel() {
  emit('update:visible', false);
  props.callback('cancel');
}
</script>

相关引用函数

export function validateName(rule, value, callback) {
  if (
    value[0] === ' ' ||
    value[0] === '_' ||
    value[value.length - 1] === ' ' ||
    value[value.length - 1] === '_'
  ) {
    callback(new Error(i18n.t('dataset.nameValidationName.startTypeWarning')));
  } else {
    callback();
  }
}

export function getByteLen(string) {
  let len = 0;
  for (let i = 0; i < string.length; i++) {
    // eslint-disable-next-line no-bitwise
    if ((string.charCodeAt(i) & 0xff00) !== 0) len++;
    len++;
  }
  return len;
}

外层打开弹框

import { create } from 'vue-nice-modal';//此处vue-nice-modal的版本为1.1.1
const saveModalDialog = create(SaveModelDialog);

 const result = await saveModalDialog.show({});//这里是弹框点击确认传过来的参数

const modelName = (result as any)?.modelName;
const modelDes = (result as any)?.modelDes ?? '';