想问需要实现登录验证的弹窗功能，在登录实现的业务逻辑中，根据判断条件，弹出不同的弹框？

  • Z时代
  • 2024-03-13
  • 分类：IT

这是登录功能的UI：

<el-form-item class="btns_box">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="resetLoginForm">重置</el-button>
        </el-form-item>

这是登录验证的业务逻辑：

login () {
      this.$refs.loginformRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return false
        const { data: res } = await this.$http.post('http://43.143.0.76:8889/api/private/v1/ login', this.loginForm)
        console.log(res)
        if (res.status !== 0) return console.log('登录失败')
        console.log('登录成功')
      })
    },

这是element UI的弹窗样式与方法

<el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button><el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>
open1 () {
      this.$message('这是一条消息提示')
    },
    open2 () {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      })
    },
    open3 () {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      })
    },
    open4 () {
      this.$message.error('错了哦，这是一条错误消息')
    }
  }

想要获取子对象里面的每个对象里面的属性内容，打印出 undefined

async getAllData () {
      const { data: res } = await this.$http.get('http://127.0.0.1:4523/m1/2452239-0-default/api/tabledata')
      console.log(res)
      this.tableData = res.map(item => {
        return console.log(Object.keys(item).map(key => {
          return res[key]
        }))
      })

想表单上不呈现出弹窗样式，而是根据登录验证的判断跳出对应的弹窗

回答：

1.你可以用后端返回的状态码来显示哪种类型的弹窗

login () {
  this.$refs.loginformRef.validate(async valid => {
    if (!valid) return false
    const { data: res } = await this.$http.post('http://43.143.0.76:8889/api/private/v1/login', this.loginForm)
    if (res.status !== 0) {
      // 登录失败，显示错误弹窗
      this.$message.error('登录失败')
      return
    }
    // 登录成功，显示成功弹窗
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  })
}

2.：

this.tableData = res.map(item => {
  return Object.keys(item).map(key => {
    return item[key]
  })
})

以上是 想问需要实现登录验证的弹窗功能，在登录实现的业务逻辑中，根据判断条件，弹出不同的弹框？ 的全部内容， 来源链接： utcz.com/p/934435.html

回到顶部