svelte3.x网页聊天实例|svelte.js仿微信pc版聊天svelte-凯发娱发k8

基于svelte3 sveltekit sass仿微信mac界面聊天实战项目sveltewebchat。

基于svelte3 sveltekit sass mescroll.js svelte-layer svelte-scrollbar等技术搭建仿微信网页天案例svelte-webchat。全新的dock菜单(可拖拽排序/鼠标滚轮左右滚动)，整体macos风格毛玻璃背景虚化效果。

一、使用技术

编辑器：vscode
框架技术：svelte^3.46.5 sveltekit
状态管理：svelte/store
下拉刷新：mescroll.js
滚动条组件：svelte-scrollbar
对话框组件：svelte-layer
sass预处理：sass^1.50.1 svelte-preprocess
iconfont图标：阿里巴巴字体图标库

svelte-webchat：支持发送消息 emoj表情、图片/视频查看、链接预览、粘贴截图发送图片、红包/朋友圈、全屏/主题换肤等功能。

二、项目层级结构

◆ 效果预览

◆ svelte.config.js配置文件

svelte项目配置文件，可配置alias别名路径、sass预编译等功能。

import adapter from '@sveltejs/adapter-auto'

import path from 'path'

import svelteprocess from 'svelte-preprocess'
/** @type {import('@sveltejs/kit').config} */

const config = {

    kit: {

        adapter: adapter(),

        vite: {

            resolve: {

                alias: {

                    '@': path.resolve('./src'),

                    '@assets': path.resolve('./src/assets'),

                    '@utils': path.resolve('./src/utils')

                }

            }

        }

    },

    // 禁用 svelte 警告 未使用的 css 选择器(css-unused-selector)

    onwarn: (warning, handler) => {

        const { code, frame } = warning

        if (code === "css-unused-selector")

            return

        handler(warning)

    },

    preprocess: svelteprocess()

};
export default config;

◆ svelte公共模板及错误页

vue.js中有router-view路由管理页面。sveltekit提供了 __layout.svelte 布局模板和 __error.svelte 错误处理模板。

    


        {#if $userinfo}

        


            

            


                

                

                


                    

                    

                


            


            

        


        {:else}

        


            


                

            


        


        {/if}

    

    




    


        


            

        


        


            
┗| {status} |┛  page error~~


            
{error.message}


            
 返回凯发娱发k8首页


        


    

◆ svelte3.x自定义pc弹窗组件

为了项目ui效果整体一致性，所有弹窗功能均是基于svelte.js自定义svelte-layer对话框组件实现效果。

对于sveltelayer组件，之前有过一篇分享文章，感兴趣的可以去看下。

https://www.cnblogs.com/xiaoyan2017/p/16158044.html

◆ svelte3.x自定义虚拟美化滚动条组件

为了替代系统原生滚动条，于是基于svelte.js开发了一款网页模拟系统美化滚动条svelte-scrollbar组件。

sveltescrollbar 支持自定义滚动条尺寸/颜色/间距、垂直/水平滚动、自动隐藏、动态dom监测等功能。

https://www.cnblogs.com/xiaoyan2017/p/16240547.html

◆ svelte自定义dock菜单

如上图：底部dock菜单结合svelte-scrollbar组件实现左右滚动(支持鼠标mousewheel滚轮滑动)

    


        

            


                

                {#each menu as item,index}

                    {#if item.type == 'divider'}

                        


                    {:else}

                        


                            {#if item.icon}{/if}

                            {#if item.img}{/if}

                            {#if item.badge}{item.badge}{/if}

                            {#if item.dot}{/if}

                        


                    {/if}

                {/each}

            


        

    

◆ svelte.js表单验证

svelte3中实现登录表单及获取验证码60s倒计时功能。

◆ svelte聊天功能模块

聊天编辑框限制最大高度、支持多行文本 emoj混排、光标处插入内容、粘贴/拖拽发送图片。

其中表情弹窗是基于svelte-layer实现效果。

    bind:open={isvisibleopenface}

    anim="fadein"

    type="popover"

    follow="#popover_face"

    placement="top"

    shade="false"

    area="475px"

>

    

    
null}>

        


            {#each emojlist as item,index}

            
handleemojtab(index)}>


            {/each}

            


        


        


            

                {#each emojlist as item,index}

                


                    


                        {#each item.nodes as item2}

                        


                            {#if item.type=='emoj'}

                            

                            {:else}

                            handlegifclicked(item2)} alt="" />

                            {/if}

                        


                        {/each}

                    


                


                {/each}

            

        


    

    title="视频预览"

    opacity=".9"

    area={['360px', '450px']}

    xclose

    xcolor="#aaa"

    maximize

    resize

    layerstyle="background: #333;"

>

    


        

        {#if isvisiblevideopopup}

        
            bind:this={videoel}

            src={videodata.videosrc}

            autoplay

            controls

            x5-video-player-fullscreen="true"

            webkit-playsinline="true"

            x-webkit-airplay="true"

            playsinline="true"

            x5-playsinline

            style="height:100%;width:100%;object-fit:contain;outline:none;"

        />

        {/if}

    

okay，以上就是svelte.js开发网页版聊天实例的一些分享。希望对大家有所帮助哈~✍

最后附上一个uniapp uview手机端后台管理系统

https://www.cnblogs.com/xiaoyan2017/p/15836112.html

svelte3.x网页聊天实例|svelte.js仿微信pc版聊天svelte-webchat的相关教程结束。