赞
踩
GitHub:https://github.com/baiyuliang/Qrobot_Vue
布局大致是这样的:
我们至少要定义三个组件:
1.主界面组件:Chat.vue
2.左侧对话框item组件:LeftItem.vue
3.右侧对话框item组件:RightITem.vue
可能有同学觉得,这个简单的小项目又不用路由,所以根本不需要去定义这么多组件,直接在App.vue里就可以全部搞定!这个确实是的,但这样做,会导致项目的可读性变差,而且给人一种非常粗鲁的感觉,一点也不优雅!
Chat.vue:
<template> <div class="container"> <div class="list" id="list" ref="list" > <ul> <li v-for="(item,index) in msglist" :key="index"> <RightItem :id="item.id" :type="item.type" :content="item.content" v-if="item.me"></RightItem> <LeftItem :id="item.id" :type="item.type" :content="item.content" v-else></LeftItem> </li> </ul> </div> <div class="bottom"> <div class="line"></div> <div class="input-send"> <van-field v-model="text" placeholder="请输入聊天内容..." class="input" @keyup.enter="send"/> <van-button plain type="info" class="send" @click="send">发送</van-button> </div> </div> </div> </template> <style scoped lang="scss"> .container { ul { padding: 0; margin: 0; } li { list-style: none; } .list { width: 100%; height: 100%; margin-bottom: 45px; } .bottom { width: 100%; position: fixed; bottom: 0; .line { width: 100%; height: 1px; background-color: #ddd; } .input-send { display: flex; justify-content: space-between; background-color: #fff; .input { padding-right: 10px; } .send { width: 80px; height: 30px; margin-top: 7px; margin-right: 10px; } } } } </style>
很简单,上边li,底部输入框!
LeftItem.vue:
<template> <div class="container"> <img class="head" src="https://pp.myapp.com/ma_icon/0/icon_42284557_1517984341/96"/> <div class="content"> <div class="text" v-if="type===1"> {{content}} </div> <img class="img" :src="content" v-else-if="type===2" @click="preview(content)"/> </div> </div> </template> <script> import ImagePreview from "vant/lib/image-preview"; export default { name: "LeftItem", props: ['id', 'type', 'content'], methods: { preview(url){ ImagePreview([url]) } } } </script> <style scoped lang="scss"> .container { display: flex; padding: 10px 15px; margin-right: 60px; .head { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eee; } .content { margin-left: 10px; margin-top: 10px; .text { background-color: deepskyblue; border-bottom-right-radius: 10px; padding: 5px 5px; font-size: 14px; color: #fff; } .img { width: 100px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; } } } </style>
其中,当style语法选择scss时,是需要安装node-sass和sass-loader插件的:
npm i node-sass sass-loader -D
布局方法主要使用了flex,flex-direction默认row,水平左向为基准,有同学可能想到用float或者position来布局,这两种布局都会导致其父布局高度无法被撑开(塌陷),而引起整个界面内容显示错乱,解决起来也相当麻烦,因此,要避免使用这两种布局方式!
另外,该组件使用了自定义属性:
props: ['id', 'type', 'content']
type为消息类型:1位文字,2为图片,content则为文字内容或图片链接,当v-if="type=1"时显示文字内容,当v-else-if="type=2"时显示图片内容!
在使用该组件时:
<LeftItem :id="item.id" :type="item.type" :content="item.content"></LeftItem>
":"必不可少!
RightItem.vue:
<template> <div class="container"> <img class="head" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1068485212,3292662520&fm=111&gp=0.jpg"/> <div class="content"> <div class="text" v-if="type===1" style="word-break: break-all;"> {{content}} </div> <img class="img" :src="content" v-else-if="type===2"/> </div> </div> </template> <script> export default { name: "RightItem", props: ['id', 'type', 'content'] } </script> <style scoped lang="scss"> .container { display: flex; padding: 10px 15px; margin-left: 60px; flex-direction: row-reverse; .head { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eee; } .content { margin-right: 10px; margin-top: 10px; .text { background-color: #eee; border-bottom-left-radius: 10px; padding: 5px 5px; font-size: 14px; color: #000; } .img { width: 100px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; } } } </style>
跟LeftItem差别不大,只是flex-direction为row-reverse,意思就是水平轴为基准,右对齐!
组件编写完成,替换App中的HelloWorld.vue:
<template> <div id="app"> <Chat></Chat> </div> </template> <script> import Chat from './components/Chat.vue' export default { name: 'App', components: { Chat } } </script> <style scoped> </style>
然后,你就可以在data中伪造一些数据,查看效果:
msglist: [{
id: 1,
type: 1,
content: '欢迎你!',
me: false
},...]
万事俱备只欠东风,下一篇接入接口数据后,就可以完成本项目了!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。