1

我可以在没有 if/else 的情况下犯 3 种错误类型吗？

我需要显示 3 种类型的错误（它们有不同的位置）：

  • 常见的
  • 错误登录
  • 错误密码

我现在拥有的：我做了一个无渲染函数。我看到了两种方式：

  • 在组件的模板中使用 if/else：

    组件.vue

       <login-error-renderless
     v-if="isError"
     :errorMessage="errorMessage"
     :rowClass="$style.errorLogin"
     :colClass="$style.errorInner"
   >
   </login-error-renderless>
   <login-error-renderless
     v-else-if="isError && messageList[1]"
     :errorMessage="errorMessage"
     :rowClass="$style.errorPassword"
     :colClass="$style.errorInner"
   >
   </login-error-renderless>
   <login-error-renderless
     v-else-if="isError && !messageList[0] && !messageList[1]"
     :errorMessage="errorMessage"
     :rowClass="$style.errorWrap"
     :colClass="$style.errorInner"
   >
   </login-error-renderless>

无渲染函数.vue

 return h('div', { attrs: { class: this.rowClass } }, [
          h('div', { attrs: { class: this.colClass} }, [
            h('span', {}, this.errorMessage),
        ]),
  • 在无渲染函数中使用 if/else（我现在正在使用它）：

组件.vue

<login-error-renderless
    v-if="isError"
    :errorMessage="errorMessage"
    :classList="classList"
    :messageList = "messages"
>
</login-error-renderless>

无渲染.vue：

props: {
    errorMessage: String,
    classList: Object,
    messageList: Array,
  }, 

render(h) {
const createFunction = (rowClass, colClass = this.classList.innerClass) => h('div', { attrs: { class: rowClass } }, [
  h('div', { attrs: { class: colClass } }, [
    h('span', {}, this.errorMessage),
  ]),
]);

if (this.messageList[0] !== undefined) {
  return createFunction(this.classList.errorLogin);
}
if (this.messageList[1] !== undefined) {
  return createFunction(this.classList.errorPassword);
}
return createFunction(this.classList.error);

},

4

0 回答 0