Project introduction

Vue3.0-webchat based on Vue3.x family bucket technology + elemet-plus + V3Layer + V3Scroll construction of imitation wechat /QQ interface actual combat chat room project. Support edit box paste send picture, drag upload picture.

Some time ago there was a vue3.0 mobile phone end imitation wechat APP chat actual case.

As shown in the picture above: The effect of QQ and wechat skin respectively.

Implementation technology

  • Technical framework: Vue3.0.5 +vue-router@4+vuex4
  • UI Component library: elementPlus (Ele. me PC VuE3 component library)
  • Popover components: V3Layer (vuE3 based custom popover components)
  • Scroll bar component: V3Scroll (vuE3 based custom virtual scroll bar component)
  • Font icon: Ali iconfont icon

The project structure

Vue3. X beautify the scrollbar component

Before using VUE2 to develop a version of the custom scroll bar component, in order to project effect more unified, on the development of a VUE3 version of the custom beautify scroll bar V3Scroll component.

Vue3.0 simulation scrollbar component | vue3 v3scroll custom along with the scroll bar

Vue3. X Custom global dialog box

V3layer Custom pop-up components based on vuE3 multi-functional PC desktop. Also evolved from the previous vue2 version. Support up to 30+ parameters, support drag, zoom, maximize, full screen and custom styles and top functions.

Vue3 custom dialog box | global vue3.0 imitation layer. The js v3layer pop-up components

Main.js entry configuration

/** * Vue3.0 entry configuration */ import {createApp} from 'vue' import App from './ app. vue' // Import vuex and address route import store from './store' import router from './router' // import public components import Plugins from './ Plugins' /* Import public styles */ import '@assets/fonts/iconfont.css' import '@assets/css/reset.css' import '@assets/css/layout.css' const app = createApp(App) app.use(store) app.use(router) app.use(Plugins) app.mount('#app')Copy the code

App.vue template layout

<div :class="['vui__wrapper', store.state.isWinMaximize&&'maximize']"> <div class="vui__board flexbox"> <div class="flex1 flexbox"> <! --> <WinBar v-if="! route.meta.hideWinBar" /> <! <SideBar v-if="! route.meta.hideSideBar" class="nt__sidebar flexbox flex-col" /> <! --> <Middle v-show="! route.meta.hideMiddle" /> <! <router-view ></ div> </div> </div> </div> </div>Copy the code

Vue3 form validation + 60S countdown

Vue3.0 implements registration verification form and 60s countdown control.

<script> import { reactive, toRefs, inject, getCurrentInstance } from 'vue' export default { components: {}, setup() { const { ctx } = getCurrentInstance() const v3layer = inject('v3layer') const utils = inject('utils') const FormObj = reactive({}) const data = reactive({vcodeText: reactive, disabled: false, time: 0, }) const VTips = (content) => { v3layer({ content: content, layerStyle: 'background:#ff5151; color:#fff; ', time: 2 }) } const handleSubmit = () => { if(! Formobj.tel){VTips(' Mobile phone number cannot be empty! ') }else if(! CheckTel (formobj.tel)){VTips(' Phone number format is not correct! ') }else if(! Formobj.pwd){VTips(' Password cannot be empty! ') }else if(! Formobj.vcode){VTips(' CaptCha cannot be empty! ') }else{ ctx.$store.commit('SET_TOKEN', utils.setToken()); ctx.$store.commit('SET_USER', formObj.tel); / /... } // 60s countdown const handleVcode = () => {if(! Formobj.tel) {VTips(' Mobile phone number cannot be empty! ') }else if(! CheckTel (formobj.tel)) {VTips(' Phone number format is not correct! ') }else { data.time = 60 data.disabled = true countDown() } } const countDown = () => { if(data.time > 0) { Data. vcodeText = 'Get verification code ('+ data.time +')' data.time-- setTimeout(countDown, 100)}else{data.vcodeText = 'data.time = 0 data.disabled = false}} return {formObj,... toRefs(data), handleSubmit, handleVcode } } } </script>Copy the code

Background blurred ground glass effect

<! <div class="vui__bgblur"> < SVG width="100%" height="100%" class=" "blur- SVG "viewBox="0 0 1920 875" preserveAspectRatio="none"> <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter> <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image> </svg> <div class="blur-cover"></div> </div>Copy the code

Preview picture

Here we use the image component from the Element-Plus component library.

Element – plus. Gitee. IO / # / useful – CN/com…

<el-image class="img__pic" 
    :src="item.imgsrc"
    :preview-src-list="[item.imgsrc]"
    hide-on-click-modal
/>
Copy the code

Video preview

The V3Layer component is used to implement popover preview videos.

<! <v3-layer v-model="isShowVideoPlayer" title="< I class='iconfont iconfont bofang'></ I > layerStyle="background:#f9f9f9" opacity=".2" :area="['550px', '450px']" xclose resize :maximize="true" > <video class="vplayer" ref="playerRef" autoplay preload="auto" controls :src="videoList.videosrc" :poster="videoList.imgsrc" x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline /> </v3-layer>Copy the code

Url preview

/ / match the links in the message box const transferHTML = (HTML) = > {let reg = / (HTTP: / / \ | HTTPS: \ \ /) (\ w | = | \? |\.|\/|&|-)+)/g return html.replace(reg, "<a href='$1$2'>$1$2</a>") } let msg = transferHTML(data.editorText)Copy the code

Click on the chat content to determine whether the link was clicked.

Const handleMsgClicked = (e) => {let target = e.target // link if(target.tagName === 'A') {e.preventdefault () // Console. log(' trigger link click event! ') v3Layer ({type: 'iframe', title: '< I class="iconfont icon-link"></ I > url preview ', content: target.href, opacity:.2, area: ['860px', '600px'], xclose: true, resize: true, maximize: True})} / / picture if (target. The tagName = = = 'IMG' && target. The classList. The contains (' IMG - view ')) {/ /... }}Copy the code

Send a red envelope

This is the V3Layer used to introduce external component implementations.

import SendRedPacket from './redPacket.vue' <! -... <v3-layer v-model="isShowSendRedPacketLayer" layerStyle="background:# fff8F4 "opacity=".2" :area="['400px', '480px']" xclose xcolor="#ffdccb" drag='.ntDrag__head' > <SendRedPacket /> </v3-layer>Copy the code

Ok, based on _vue3+elementPlus_ to develop a web side chat example to share here. ✍

Finally, post a NuxtJs instance project

Nuxt. | js chat instance nuxt + Vue mobile end imitation WeChat/circle of friends

I am punching in the popularity list, dear ones, support one, maybe one of your support can help me to the top!!

The 2020 Popular Creators list