Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat

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;

<div class="sv__container flexbox flex-alignc flex-justifyc" style="--themeSkin: {$skin}">     <div class="sv__wrapper" class:maximize={$isWinMaximize}>         {#if $userinfo}         <div class="sv__board flexbox flex-col">             <!-- <div class="sv__topbar">顶部模块</div> -->             <div class="sv__mainwrap flex1 flexbox">                 <!-- <div class="sv__sidebar">侧边栏</div> -->                 <Middle />                 <div class="sv__mainbx flex1 flexbox flex-col">                     <Winbar />                     <slot />                 </div>             </div>             <Dock />         </div>         {:else}         <div class="sv__board flexbox flex-col">             <div class="sv__mainwrap flex1 flexbox">                 <slot />             </div>         </div>         {/if}     </div> </div>

<script context="module">     export function load({ error, status }) {         return {             props: { error, status }         }     } </script>  <script>     import { goto } from '$app/navigation'     export let status     export let error      function goBack() {         // history.go(-1)         goto('/')     } </script>  <svelte:head>     <title>{status} Error!</title> </svelte:head>  <div class="sv__scrollview flex1">     <div class="sv__page-error flexbox flex-col flex-alignc flex-justifyc">         <div class="sv__page-error-img">             <img src="404.png" alt="" />         </div>         <div class="sv__page-error-content">             <div class="c-red fs-18">┗| {status} |┛  Page Error~~</div>             <div class="c-999 mt-10">{error.message}</div>             <div class="sv__btn sv__btn-default" on:click={goBack}><i class="iconfont icon-arrL"></i> 返回首页</div>         </div>     </div> </div>

<div class="sv__dockbar flexbox flex-justifyc">     <div class="sv__dock-scroll" style="background: {bgcolor};">         <Scrollbar autohide size={2} mousewheel>             <div class="sv__dock-wrap" bind:this={dockEl}>                 <!-- dock菜单项 -->                 {#each menu as item,index}                     {#if item.type == 'divider'}                         <div class="sv__dock-divider"></div>                     {:else}                         <div class="sv__dock-item flexbox" class:cur={currentTabIndex == index} on:click={changeTab(index, item)}>                             {#if item.icon}<span class="iconfont {item.icon}" style="color: {item.color}; font-size: {item.iconSize}"></span>{/if}                             {#if item.img}<img class="iconimg" src={item.img} alt="" style="font-size: {item.iconSize};" />{/if}                             {#if item.badge}<span class="sv__badge sv__dock-badge">{item.badge}</span>{/if}                             {#if item.dot}<span class="sv__badge-dot sv__dock-badgeDot"></span>{/if}                         </div>                     {/if}                 {/each}             </div>         </Scrollbar>     </div> </div>

<script>     import { onMount } from 'svelte'     import { goto } from '$app/navigation'     import Layer, { svLayer } from '$lib/Layer'     import { userinfo } from '@/store'     import util from '@/utils'      let formObj = {}     let vcodeText = '获取验证码'     let disabled = false     let time = 0      let agree = false     let vcodeLG = true      let telEl     onMount(() => {         userinfo.useStorage()         telEl.focus()     })      function Message(content) {         svLayer.message({content, icon: 'warning', time: 0, xclose: true, shade: true})     }      // 60s倒计时     function getVcode() {         let { tel } = formObj         if(!tel) {             Message('手机号不能为空')         }else if(!util.checkTel(tel)) {             Message('手机号不正确')         }else {             time = 60             disabled = true             countDown()         }     }     function countDown() {         if(time > 0) {             vcodeText = '获取验证码('+ time +')'             time--             setTimeout(countDown, 1000)         }else {             vcodeText = '获取验证码'             time = 0             disabled = false         }     }          function handleSubmit() {         console.log('——+——+——表单数据：', formObj)          let { tel, vcode, pwd } = formObj         if(!tel) {             Message('手机号不能为空')         }else if(!util.checkTel(tel)) {             Message('手机号不正确')         }else if(vcodeLG && !vcode) {             Message('验证码不能为空')         }else if(!vcodeLG && !pwd) {             Message('密码不能为空')         }else {             svLayer({                 type: 'toast',                 icon: 'success',                 content: '登录成功',                 shadeClose: false,                 time: 2,                 onClose: () => {                     userinfo.set({                         user: tel,                         token: util.setToken()                     })                     goto('/')                 }             })         }     } </script>

<!-- 表情弹窗 --> <Layer      bind:open={isVisibleOpenFace}     anim="fadeIn"     type="popover"     follow="#popover_face"     placement="top"     shade="false"     area="475px" >     <!-- 表情 -->     <div class="vui__emotion" on:click|stopPropagation={()=>null}>         <div class="vui__emotion-tabs flexbox">             {#each emojList as item,index}             <div class="item" class:on={item.selected} on:click={()=>handleEmojTab(index)}><img src={item.pathLabel} alt="" /></div>             {/each}             <div class="more flex1"></div>         </div>         <div class="vui__emotion-wrap">             <Scrollbar gap={2} size={2}>                 {#each emojList as item,index}                 <div class="vui__emotion-cells" class:cur={item.selected}>                     <div class="{item.type == 'emoj' ? 'face__sm_list' : 'face__lg_list'}">                         {#each item.nodes as item2}                         <div class="item">                             {#if item.type=='emoj'}                             <img src={item2} class="emoj" on:click={handleEmojClicked} alt="" />                             {:else}                             <img src={item2} on:click={()=>handleGifClicked(item2)} alt="" />                             {/if}                         </div>                         {/each}                     </div>                 </div>                 {/each}             </Scrollbar>         </div>     </div> </Layer>

<!-- 视频预览模板 --> <Layer bind:open={isVisibleVideoPopup}     title="<span style='color:#aaa;'>视频预览<span>"     opacity=".9"     area={['360px', '450px']}     xclose     xcolor="#aaa"     maximize     resize     layerStyle="background: #333;" >     <div class="flex-c" style="background:#333;height: 100%;">         <!-- //视频video -->         {#if isVisibleVideoPopup}         <video              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}     </div> </Layer>