admin 管理员组文章数量: 1184232
nuxt
Nuxt-Chatroom 基于Nuxt.js+Vue.js仿微信|探探App界面聊天社交
运用nuxt.js+vue.js+vuex+vpopup+vant+webpack等技术架构开发的社交聊天室项目。实现了类Tinder翻牌左右滑动、消息发送|表情gif、图片|视频预览、消息记录下拉刷新、长按弹窗、红包|朋友圈等功能。
使用技术
- 技术框架：nuxt.js+vue.js+vuex
- UI组件库：vant: ^2.10.4
- iconfont图标：阿里字体图标库
- 弹窗组件：vpopup（基于vue封装自定义弹框）
- 本地存储：cookie-universal-nuxt: ^2.1.4
项目结构
vue|nuxt自定义Navbar+Tabbar组件
顶部导航 / 底部标签栏是自定义组件实现。可以去参看这篇分享文章。
Vue|Nuxt自定义导航条/底部TabBar组件|vue仿咸鱼凸起Tab
vue|nuxt自定义弹出框组件
本来是考虑使用vant的弹出框功能，后来慎重考虑决定自己整一个弹框组件VPopup。
大家有兴趣的话，可以去看看这篇分享文章。
Vue+Nuxt自定义弹窗|vue.js仿微信/ios弹层组件
vue|nuxt仿陌陌卡片滑动
翻一翻页面参考了探探/陌陌卡片拖拽堆叠效果。
如果对实现方式有兴趣的话，可以去看看下面这篇文章。
nuxt.config.js默认配置
nuxt的配置文件，更多详细配置参数大家可以去官网查看。
/
export default {// 端口配置（可选）server: {port: 3000,host: '192.168.101.69'},/*** 页面头部meta信息配置*/head: {title: process.env.npm_package_name || '',meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },{ hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt仿微信'},{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },{ rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' },],script: [{ src: '/js/fontSize.js' },{ src: '/js/wcPop/wcPop.js' },]},/*** 全局css配置*/css: ['~/assets/css/reset.css','~/assets/css/layout.css','~/assets/fonts/iconfont.css',],/*** 全局插件列表*/plugins: ['~/plugins/vue-global.js',// 通过这种方式引入本地js也可以（需设置ssr:false）// {src: '~/assets/js/fontSize.js', ssr: false}],// ...
}页面中SEO功能配置，既可以在nuxt.config.js中全局配置meta标签，也可以单独页面配置。
<script>
export default {// 用于配置页面的 meta 信息head() {return {title: '这里是标题信息 - 标题信息',meta: [{name:'keywords',hid: 'keywords',content: '关键字1 | 关键字2 | 关键字3'},{name:'description',hid:'description',content: '描述1 | 描述2 | 描述3'}]}},// 自定义布局模板layout: 'xxx.vue',// 中间件验证middleware: 'auth',// 异步数据处理async asyncData({app, params, query, store}) {let uid = params.uidlet cid = query.cidreturn {uid: uid,cid: cid,}},// ...
}
</script>聊天模块
编辑框部分做成公共组件chatEditor.vue。运用了div的可编辑功能contenteditable来插入图文内容。
<template><divref="editor"class="editor"contentEditable="true"v-html="editorText"@click="handleClick"@input="handleInput"@focus="handleFocus"@blur="handleBlur"style="user-select:text;-webkit-user-select:text;"></div>
</template>/*** @Desc Vue编辑器实现* @Time andy by 2020-10-06* @About Q：282310962 wx：xy190310*/
<script>export default {props: {value: { type: String, default: '' }},data () {return {editorText: this.value,isChange: true,// 记录光标最后位置lastCursor: null,}},watch: {value() {if(this.isChange) {this.editorText = this.value}}},methods: {handleInput() {this.$emit('input', this.$el.innerHTML)this.lastCursor = this.getLastCursor()},// 点击编辑器handleClick() {this.$emit('clickFn')this.lastCursor = this.getLastCursor()},// 获取焦点handleFocus() {this.isChange = falsethis.$emit('focusFn')this.lastCursor = this.getLastCursor()},// 失去焦点handleBlur() {this.isChange = truethis.$emit('blurFn')},// 获取光标最后位置getLastCursor() {let sel = window.getSelection()if(sel && sel.rangeCount > 0) {return sel.getRangeAt(0)}},insertHtmlAtCursor(html) {let sel, rangeif(window.getSelection) {// IE9及其它浏览器sel = window.getSelection()// *注意：判断最后光标位置if(this.lastCursor) {sel.removeAllRanges()sel.addRange(this.lastCursor)}if(sel.getRangeAt && sel.rangeCount) {range = sel.getRangeAt(0)range.deleteContents()let el = document.createElement('div')el.appendChild(html)var frag = document.createDocumentFragment(), node, lastNodewhile ((node = el.firstChild)) {lastNode = frag.appendChild(node)}range.insertNode(frag)if(lastNode) {range = range.cloneRange()range.setStartAfter(lastNode)range.collapse(true)sel.removeAllRanges()sel.addRange(range)}}} else if(document.selection && document.selection.type != 'Control') {// IE < 9document.selection.createRange().pasteHTML(html)}}}}
</script>好了，基于Vue.js+Nuxt.js开发聊天室项目就分享到这里。希望对大家有所帮助！💪💪
最后附上一个项目实例
react+redux网页版聊天实例|react聊天室
本文标签： nuxt
版权声明：本文标题：nuxt 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1697966690a279353.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论