AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-实战】S10：Toast弹窗组件开发

2022-10-08 345
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-实战】S10：Toast弹窗组件开发

@@DVBVTGC2D7ROIYF4YK_@O.png


前言


实战已经开始了！前面几篇文章已经将登录注册和模拟接口请求的内容讲完了，但是在登录失败或者接口请求失败的时候，还缺少一个提示内容，虽然浏览器也给我们提供了alert之类的提示框，但是作为前端开发，不仅为了美观，更加为了以后可以复用，所以我们可以写一个组件专门用来做提示弹窗信息的。


补充


在上一章节中，可能在调用接口的时候，URL写错了或者接口API写错了，都会导致错误信息，但是当我们用async/await去请求接口的时候，会发现并不会执行下面的else语句的。


👉 比如我们把baseURL中的fastmock写错成fastmock111


export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: 'https://www.fastmock111.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro'
    }).then((response) => {
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}
复制代码


👉 然后我们再去请求post的时候，就会发现并不会提示登录失败


const handleLogin = async () => {
  const result = await post('/api/user/login', {
    mobile: data.mobile,
    password: data.password
  })
  if (result.data.code === 0) {
    localStorage.isLogin = true
    router.push({ name: 'Home' })
  } else {
    console.log('登录失败')
  }
}
复制代码


QD45CL_6%YEO)DYLZF1W(TG.png


点击登录之后，浏览器控制台就会直接报错了。对于async/await这种写法要怎么去控制接口请求报错呢？可以用js里面的try/catch方法。


const handleLogin = async () => {
  try {
    const result = await post('/api/user/login', {
      mobile: data.mobile,
      password: data.password
    })
    if (result.data.code === 0) {
      localStorage.isLogin = true
      router.push({ name: 'Home' })
    } else {
      console.log('登录失败')
    }
  } catch (e) {
    console.log('请求失败')
  }
}
复制代码


RC3WMQG0S1MZ273LSC[)S9I.png


虽然控制台还是有接口报错，但是同样也将提示信息告诉我们了，这样也就方便我们定位问题所在了。


Toast组件


🌀 在开发组件之前，我们需要去新建一个vue文件，但是这种公共的组件就不能直接新建在views目录下面了，还记得最初创建项目时，有一个components文件夹嘛？这里面就是用来存放公共组件的地方。


👉 在cpmponents文件夹下面新建一个Toast.vue


4((YPFNWUB_%7N%6WDI@]MQ.png


👉 Toast组件中的DOM结构和样式也比较简单


<template>
  <div class="toast">内容</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.toast{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: .1rem;
    background: rgba(0,0,0,0.5);
    border-radius: .05rem;
    color: #fff;
}
</style>
复制代码


👉 Login.vue中引入Toast组件


import Toast from '../../components/Toast'
复制代码
components: {
    Toast
},
复制代码
<Toast />
复制代码


BPM_`L495JY)FHWHDF6HX)O.png


🔆 可以看到页面上就会直接显示出Toast了。


组件显隐


目前来看Toast组件是一直保持显示状态的，我们需要在点击登录之后才显示出来才行，并且间隔 2 秒之后自动隐藏。


👉 在setup函数中的data里面定义一个showToast，用于判断组件显示隐藏


const data = reactive({
  showToast: false,
})
复制代码


👉 在Toast组件标签上通过v-if指令来判断showToast，为true的时候就显示，反之隐藏


<Toast v-if="data.showToast" />
复制代码


👉 需要在handleLogin函数中请求接口失败时，将showToast设为true 👉 将showToast设为true的同时，需要用setTimeout方法将showToast在间隔 2 秒之后设为false


const handleLogin = async () => {
  try {
    const result = await post('/api/user/login', {
      mobile: data.mobile,
      password: data.password
    })
    if (result.data.code === 0) {
      localStorage.isLogin = true
      router.push({ name: 'Home' })
    } else {
      data.showToast = true
      console.log('登录失败')
      setTimeout(() => {
        data.showToast = false
      }, 2000)
    }
  } catch (e) {
    data.showToast = true
    console.log('请求失败')
    setTimeout(() => {
        data.showToast = false
    }, 2000)
  }
}
复制代码


BPM_`L495JY)FHWHDF6HX)O.png


组件传参


在调用登录接口时，我们判断了登录失败和请求失败的逻辑，但是这些提示不应该直接用comsole.log输出到控制台，应该将提示语动态传递给Toast组件显示出来。


👉 在setup函数中的data里面定义toastMessage


const data = reactive({
    showToast: false,
    toastMessage: ''
})
复制代码


👉 在Toast组件标签中使用toastMessage


<Toast v-if="data.showToast" :message="data.toastMessage" />
复制代码


👉 Toast组件中通过props接收传递过来的message


export default {
  props: ['message']
}
复制代码


👉 将handleLogin方法中的console.log换成toastMessage


data.toastMessage = '请求失败'
复制代码


KIV_Z(D7)({FARTOU52%4$0.png


拆分组件


按照上面的代码来写的话，基本上是把所有的逻辑全部放在了一个setup函数里面，如果以后还要增加新的组件，那么这一个页面的代码量就又会很难维护了。而且也不符合compositionAPI中将逻辑归纳在一块区域的原则，所以我们需要拆分组件中的逻辑，也就是逻辑必须是跟随组件在一起的。


👉 打开Toast组件，将关于Toast组件逻辑全部放到一个新的方法中，然后通过export导出，可以让外部引入


export const useToastEffect = () => {
  const toastData = reactive({
    showToast: false,
    toastMessage: ''
  })
  const showToast = (message) => {
    toastData.showToast = true
    toastData.toastMessage = message
    setTimeout(() => {
      toastData.showToast = false
      toastData.toastMessage = ''
    }, 2000)
  }
  return { toastData, showToast }
}
复制代码


  • 逻辑部分和setup函数中写法一致，都是需要将绑定的数据定义在reactive中，最后通过return返回给外部。


👉 Login页面中不仅要引入Toast组件，还需要引入Toast的逻辑方法


import Toast, { useToastEffect } from '../../components/Toast'
复制代码


👉 setup函数中就可以直接使用Toast组件中的逻辑方法useToastEffect


setup () {
    const router = useRouter()
    const data = reactive({ username: '', password: '' })
    const { toastData, showToast } = useToastEffect()
    const handleLogin = async () => {
      try {
        const result = await post('/api/user/login', {
          username: data.username,
          password: data.password
        })
        if (result.data.code === 0) {
          localStorage.isLogin = true
          router.push({ name: 'Home' })
        } else {
          showToast('登陆失败')
        }
      } catch (e) {
        showToast('请求失败')
      }
    }
    const handleRegisterClick = () => {
      router.push({ name: 'Register' })
    }
    return { handleLogin, handleRegisterClick, data, toastData }
  }
复制代码

总结


本篇文章主要是将Toast组件进行封装，并把setup函数中关于Toast组件的部分全部拆分出来放到组件里面进行统一管理。

文章标签：
JavaScript
前端开发
API
关键词：
组件开发VUE.js
VUE.js实战
弹窗VUE.js
VUE.js弹窗组件
vue3组件开发VUE.js
蜡笔小心_
目录
相关文章
html的七十二变
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
21 5
html的七十二变
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
17 4
CamilleKing
|
15天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
35 7
小宋1021
|
16天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
38 3
CamilleKing
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
36 1
游客zi3qmblbcdexu
|
17天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
33 1
我是快乐的嘟嘟
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
64 26
html的七十二变
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
24 8
html的七十二变
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
18 7

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    一文梳理Vue3核心原理
  • 4
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 5
    vite原理之解析.vue文件
  • 6
    自制简单的range（Vue）
  • 7
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 8
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 9
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 10
    毕业设计｜基于NODE+VUE的校园跑腿平台系统
  • 1
    深入了解前端框架Vue.js的响应式原理
    52
  • 2
    Vue3 五天速成（下）
    67
  • 3
    Vue3 五天速成（中）
    57
  • 4
    Vue3 五天速成（上）
    83
  • 5
    vue3版本的爱心源码
    24
  • 6
    Vue当前时间与接口返回时间的判断
    46
  • 7
    vue生成动态表单
    32
  • 8
    Vue生成Canvas二维码
    41
  • 9
    vue项目切换页面白屏的解决方案
    151
  • 10
    Vue3 项目中怎么使用 jsx——易懂
    44

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 零基础入门Serverless：TodoList应用创建
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云OSS设置跨域访问