前言：
如今兄弟们对“x-webkit-airplay”大概比较注重，看官们都想要知道一些“x-webkit-airplay”的相关文章。那么小编在网络上搜集了一些有关“x-webkit-airplay””的相关资讯，希望小伙伴们能喜欢，各位老铁们一起来了解一下吧！最近一直在捣鼓Next项目，Next.js是一个基于React.js的服务端ssr渲染框架，能够让你的react页面拥有SEO功能。
Next.js的star高达58.8K+。一款非常受开发者青睐的React SSR框架。
https://www.nextjs.cn/https://github.com/vercel/next.js项目简介
Next-WebChat 基于next.js+react+redux+antd+rlayer等技术开发的PC桌面端聊天实例。实现了发现消息/表情gif、图片/视频预览、弹窗菜单、红包/朋友圈等功能。
效果预览
项目中用到的所有弹窗功能均是自己开发的RLayer.js弹出框组件。
前段时间有分享过一篇关于react.js实现自定义弹窗组件，感兴趣的可以去看看。
React.js PC桌面端自定义弹出框组件
项目中用到的滚动条均是基于react.js构建的轻量级美化滚动条组件RScroll。支持原生滚动条、是否自动隐藏、滚动条尺寸/层级/颜色等功能。
由于之前有过一篇分享文章，这里就不作过多的介绍了。
React.js轻量级虚拟滚动条组件
next.js中自定义公共布局模板，在layouts目录下的index.js页面。
function Layout(props) { // console.log(props) const router = useRouter() // 登录验证拦截 useEffect(() => { // ... }, []) return ( <> {/* 配置公共头部信息 */} <Head> <title>Next.js聊天室</title> <link rel="icon" href="/favicon.ico" /> <meta name="keywords" content="Next.js|React.js|Next.js聊天室|Next.js仿微信|React聊天实例"></meta> <meta name="description" content="Next-WebChat 基于Next.js+React+Redux构建的服务端渲染聊天应用程序"></meta> </Head> <div className="next__container flexbox flex-alignc flex-justifyc"> <div className={utils.classNames('next__wrapper', props.isWinMaximize&&'maximize')} style={{ backgroundImage: `url(${props.skin})` }}> <div className="next__board flexbox"> {/* 右上角按钮 */} <WinBar {...props} /> {/* 侧边栏 */} <Sidebar {...props} /> {/* 中间栏 */} <Middle /> {/* 主体布局 */} <div className="nt__mainbox flex1 flexbox flex-col"> {props.children} </div> </div> </div> </div> </> )}Head组件里配置一些页面头部信息，如：标题、关键词、描述及图标等信息。
Next.js聊天模块聊天编辑器区域单独抽离了一个组件，用来进行聊天输入处理。
// react实现contenteditable功能return ( <div ref={editorRef} className="editor" contentEditable="true" dangerouslySetInnerHTML={{__html: state.editorText}} onClick={handleClicked} onInput={handleInput} onFocus={handleFocus} onBlur={handleBlur} style={{userSelect: 'text', WebkitUserSelect: 'text'}}> </div>)编辑器支持多行文本输入、光标处插入表情、粘贴截图发送、输入链接等功能。
如上图：视频播放是基于rlayer弹窗实现。
handlePlayVideo = (item, e) => { rlayer({ content: ( <div className="flexbox flex-col" style={{height: '100%'}}> <div className="ntDrag__head" style={{color:'#696969',padding:'0 60px 0 15px',lineHeight:'42px'}}><i className="iconfont icon-bofang"></i> 视频预览</div> <div className="ntMain__cont flex1 flexbox flex-col"> {/* 视频video */} <video className="vplayer" src={item.videosrc} poster={item.imgsrc} autoPlay preload="auto" controls x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsInline x5-playsinline="true" style={{height: '100%', width: '100%', objectFit: 'contain', outline: 'none'}} /> </div> </div> ), layerStyle: {background: '#f6f5ef'}, opacity: .2, area: ['550px', '450px'], drag: '.ntDrag__head', resize: true, maximize: true, })}聊天区域还支持拖拽发送图片功能。
handleDragEnter = (e) => { e.stopPropagation() e.preventDefault()}handleDragOver = (e) => { e.stopPropagation() e.preventDefault()}handleDrop = (e) => { e.stopPropagation() e.preventDefault() console.log(e.dataTransfer) this.handleFileList(e.dataTransfer)}// 获取拖拽文件列表handleFileList = (filelist) => { let files = filelist.files if(files.length >= 2) { rlayer.message({icon: 'error', content: '暂时支持拖拽一张图片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}}) return false } for(let i = 0; i < files.length; i++) { if(files[i].type != '') { this.handleFileAdd(files[i]) }else { rlayer.message({icon: 'error', content: '目前不支持文件夹拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}}) } }}handleFileAdd = (file) => { if(file.type.indexOf('image') == -1) { rlayer.message({icon: 'error', content: '目前不支持非图片拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}}) }else { let reader = new FileReader() reader.readAsDataURL(file) reader.onload = function() { let img = this.result console.log(img) } }}大家如果感兴趣的话，可以试一试。
好了，今天就分享到这里。希望对大家有所帮助哈！
基于Nuxt.js+Vue仿微信App聊天实例
本站所有软件信息均由用户上传发布，版权归原著所有。如有侵权/违规内容，敬请来信告知邮箱：764327034@qq.com，我们将及时撤销！ 转载请注明出处：https://www.ssyg068.com/kuaixun/2284.html
微信扫一扫 
支付宝扫一扫 
发表回复
评论列表（0条）