投稿
  1. 商川网首页
  2. 知识百科

如何使用QQWeb进行聊天

luoluo • • 知识百科

今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。
基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
先上效果图
基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus组件库。
基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时

使用了v3layer弹窗组件，内容区域是自定义插槽template模板。
另外朋友圈内容区滚动条是使用v3scroll美化滚动条组件来实现。
滚动条内容区…
图片预览使用到了element-plus的Image组件。

基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
如下图：使用了vue3+vuex实现登录验证。
基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
vue3注册form表单

已有账号，去登录

同样的通过getCurrentInstance来获取上下文，通过reactive来定义响应式数据。
import { reactive, toRefs, inject, getCurrentInstance } from ‘vue’export default { setup() { const { ctx } = getCurrentInstance() const v3layer = inject(‘v3layer’) const utils = inject(‘utils’) const formObj = reactive({}) const data = reactive({ vcodeText: ‘获取验证码’, disabled: false, time: 0, }) const VTips = (content) => { v3layer({ content: content, layerStyle: ‘background:#ff5151;color:#fff;’, time: 2 }) } const handleSubmit = () => { if(!formObj.tel){ VTips(‘手机号不能为空！’) }else if(!utils.checkTel(formObj.tel)){ VTips(‘手机号格式不正确！’) }else if(!formObj.pwd){ VTips(‘密码不能为空！’) }else if(!formObj.vcode){ VTips(‘验证码不能为空！’) }else{ ctx.$store.commit(‘SET_TOKEN’, utils.setToken()); ctx.$store.commit(‘SET_USER’, formObj.tel); // … } } // 60s倒计时 const handleVcode = () => { if(!formObj.tel) { VTips(‘手机号不能为空！’) }else if(!utils.checkTel(formObj.tel)) { VTips(‘手机号格式不正确！’) }else { data.time = 60 data.disabled = true countDown() } } const countDown = () => { if(data.time > 0) { data.vcodeText = ‘获取验证码(‘+ data.time +’)’ data.time– setTimeout(countDown, 1000) }else{ data.vcodeText = ‘获取验证码’ data.time = 0 data.disabled = false } } return { formObj, …toRefs(data), handleSubmit, handleVcode } }}
以上就实现了带60s倒计时的表单验证功能。
总体实现起来还是比较简单的，只是vue3和vue2写法有些不一样而已。
Vue3.0桌面端聊天｜vue3仿微信/QQ网页版聊天实例
基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
好了，以上就是vue3.0实现朋友圈及表单验证的相关分享，希望大家能喜欢~
基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时

本文来自投稿，不代表商川网立场，如若转载，请注明出处：http://www.sclgvs.com/zhishi/61394.html

赞 (0)
luoluoluoluo
0
上一篇 2023年 8月 9日 04:19:53
下一篇 2023年 8月 9日 04:19:58

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。