如何使用qqweb进行聊天 -z6尊龙旗舰厅

luoluo • 2023年 8月 9日 04:19:54 • 知识百科

今天给大家分享的是vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。

先上效果图

这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了elementplus组件库。

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

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

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实现朋友圈及表单验证的相关分享，希望大家能喜欢~

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

如何使用qqweb进行聊天 -z6尊龙旗舰厅

相关推荐

12369实名举报的后果（实名举报12369后果）

全国茶叶店加盟店排行榜(茶叶品牌加盟店排行榜全国)