sl-sfy-safety/src/views/setting/account/BasicSetting.vue

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
      <el-form
        :label-width="80"
        :model="formValue"
        :rules="rules"
        label-position="top"
        ref="formRef"
      >
        <el-form-item label="昵称" prop="name">
          <el-input v-model="formValue.name" placeholder="请输入昵称" />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入备案编号" v-model="formValue.email" />
        </el-form-item>

        <el-form-item label="联系电话" prop="mobile">
          <el-input placeholder="请输入联系电话" v-model="formValue.mobile" />
        </el-form-item>

        <el-form-item label="联系地址" prop="address">
          <el-input v-model="formValue.address" type="textarea" placeholder="请输入联系地址" />
        </el-form-item>

        <el-form-item>
          <el-space>
            <el-button type="primary" @click="formSubmit(formRef)">更新基本信息</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import type { ElForm } from 'element-plus';

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  const rules = {
    name: {
      required: true,
      message: '请输入昵称',
      trigger: 'blur',
    },
    email: {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入联系电话',
      trigger: 'input',
    },
  };

  const formValue = reactive({
    name: '',
    mobile: '',
    email: '',
    address: '',
  });

  function formSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!');
        ElMessage.success('验证成功');
      } else {
        ElMessage.error('验证失败，请填写完整信息');
      }
    });
  }
</script>