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

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

2022-10-08 347
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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
蜡笔小心_
目录
相关文章
mao29955
|
1天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
15 7
光明顶阳顶天
|
1天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
102 64
光明顶阳顶天
|
1天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
19 2
光明顶阳顶天
|
1天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
总的来说，Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进，使其更适应现代前端开发的需求和趋势。但需要注意的是，在迁移过程中可能需要对一些代码进行调整和适配。
光明顶阳顶天
13 1
html的七十二变
|
14天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
36 5
html的七十二变
|
14天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
25 4
CamilleKing
|
23天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
39 1
CamilleKing
|
23天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
44 1
游客ady5kpv352g3u
|
7天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
游客ady5kpv352g3u
20 1
vue学习第四章
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
17 1
vue学习第九章(v-model)

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 4
    自制简单的range（Vue）
  • 5
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 6
    如何在VUE中播放RTSP 实时视频，延迟要小于300毫秒？
  • 7
    VueJS && ReactJS 如何？听听别人怎么说。
  • 8
    使用webstorm来创建并且运行vue项目详细教程
  • 9
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 10
    vue中watch属性(详细)
  • 1
    vue(1)，小白看完都会了
    45
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    151
  • 3
    Vue中避免滥用this去读取data中数据
    44
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    133
  • 5
    vue中使用pinia及持久化
    61
  • 6
    Vue3与Vue2：对比分析与迁移指南
    400
  • 7
    双向数据绑定：Vue.js的魔法背后
    60
  • 8
    Vue class和style绑定：动态美化你的组件
    84
  • 9
    Vue 监听器：让你的应用实时响应变化
    202
  • 10
    vue3封装面包屑
    147

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 零基础入门Serverless：TodoList应用创建
    • 下一篇
    无影云桌面