全局错误表单样式

src/assets/scss/style.scss

@@ -9,3 +9,10 @@
   width: 100%;
 }
 
+.el-input + span{
+  font:{
+    weight: bold;
+  }
+  color: red;
+}
+

src/components/Email.vue

@@ -11,6 +11,7 @@
       <el-input v-model="newEmail" :disabled="second>0">
         <template v-slot:prepend>新邮箱</template>
       </el-input>
+      <span v-if="userEmail === newEmail">新邮箱不能和当前邮箱一致</span>
     </el-col>
   </el-row>
   <el-row type="flex" justify="center" class="mt-1">
@@ -41,7 +42,7 @@ import {changeEmail as _changeEmail, sendCode as _sendCode} from "../request";
 import {useStore} from "vuex";
 import {Message} from 'element3/src/components/Message'
 
-export default defineComponent<{ userEmail: { require: boolean, type: StringConstructor }, second: { require: boolean, type: NumberConstructor } }>({
+export default defineComponent({
   name: 'Email',
   setup(props) {
     const newEmail = ref<string>('')
@@ -82,13 +83,14 @@ export default defineComponent<{ userEmail: { require: boolean, type: StringCons
 
     const changeEmail=()=> _changeEmail(store.state.user.email,newEmail.value,code.value)
 
-    const allowSendCode = computed<boolean>(() => second.value === 0 && props.userEmail !== newEmail.value && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(newEmail.value))
+    const userEmail= computed(() => store.state.user.email)
+
+    const allowSendCode = computed<boolean>(() => second.value === 0 && userEmail !== newEmail.value && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(newEmail.value))
 
     const sendCodeTip = computed<string>(() => second.value > 0 ? second.value + '秒后重发' : '发送验证码')
 
     const checkCode = computed<boolean>(() => /^\d{6}$/.test(code.value))
 
-    const userEmail= computed(() => store.state.user.email)
 
     return {
       newEmail,