项目小需求之聊天气泡可展开内容

  • 因为某些信息内容太长或者某种原因必须分行输出,这就导致了有时候一个气泡占据了一整个聊天区域
  • 所以我打算实现一个在该气泡加载的时候判断其气泡长度,并在长度过长的情况下进行可展开的选择功能
  • 下面是实现截图



难点

  1. 动态获取控件并获得高度
  2. 动态定位可展开按钮
  3. 每次获取信息的时候必须循环遍历初始化

过程

  1. 先把循环展示的控件的key绑定为唯一值(很重要,后面功能实现不了浪费很多时间就是这个bug,搞得我心态爆炸
  2. 选择在哪个事件进行循环遍历,这里我选择在了时间信息调整上(这个功能我以后可能会写日记,这是实现效果
  3. 给控件绑定个唯一值之后,通过id获取该控件,并且通过offsetHeight属性获取高度,判断过于200px就进行可展开选择
  4. 写个可展开的标签,并且通过上面控件得到的offsetWidth进行动态定位,并且赋予可展开该标签的功能
  5. 进行用户区分动态定位,这里是less样式

收获

  • 一个key值没绑定还得我一直扒原理一直调试获取消息过程的代码,头发都要无了,这个小细节特别重要,别像我一样给key值给个index,这点解决了就很好实现这个需求
  • 动态绑定的位置不是那么完美,这是因为我的整体样式没设计好,一个用了浮动,一个没用,所以我不好浮动定位,到时候有更好的再说吧

vue日记之可展开的消息气泡的更多相关文章

  1. reactnative实现qq聊天消息气泡拖拽消失效果

    前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...

  2. 仿QQ消息气泡提醒

    https://github.com/dkmeteor/Bubble-Notification   感谢这位作者,本例子只是封装了一下源码. 这是jar下载地址 下载之后只要引用就好.下面是一个最简单 ...

  3. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  4. vue实现点击展开,点击收起

    安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...

  5. 【Unity】UGUI聊天消息气泡 随文本内容自适应

    游戏中需要用做UGUI做聊天界面.其中聊天气泡ChatItem的UI要求能随着聊天内容文本的长度自适应的. 网上搜了一下聊天气泡的UI,发现都不太符合咱的需求,具体来说是文本宽度不足一行时,文本宽度自 ...

  6. Vue多个元素展开收起

    html: <div class="helpPages_main"> <div class="read" v-for="(item, ...

  7. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  8. WPF 精准大小的消息气泡生成

    在其他网站发布过,都是这里写的. 全部为Wpf方式,生成的气泡宽度高度较为精确. 适用任意字体以及字号,可设置图像字体.字号.行间距.字间距.阴影.气泡宽度等,在RichtextboxHelper.c ...

  9. vue | vue实现列表同时展开与单独展开

    需求:每个li标签在点击的时候,都同时展开. 但是碰见几个问题: 1.如果点第一个li 所有li都会展开: 2.点击第一个li,第一个li展开,点击第二个li,第一个li闭合,第二个li展开 这两种情 ...

随机推荐

  1. JMeter定时器种类+详细教程举例

    首先,我们先了解一下定时器的常见种类以及它的作用. 原文地址:https://www.cnblogs.com/istart/p/11184533.html 一.定时器种类+作用 上面是我截图的自己有道 ...

  2. Java行为参数化的演进

    首先感谢<java8实战>一书作者某某某. 需求场景: 为一位果农设计一款软件,可以根据果农的需求筛选出相应的水果. 例如: 根据颜色筛选 根据重量筛选 根据颜色和重量筛选 准备工作 定义 ...

  3. 32、JavaScript介绍

    32.1.JavaScript概述: 1.JavaScript的历史: 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名Scr ...

  4. 【Azure 应用服务】Azure Function App 执行PowerShell指令[Get-Azsubscription -TenantId $tenantID -DefaultProfile $cxt]错误

    问题描述 使用PowerShell脚本执行获取Azure订阅列表的指令(Get-Azsubscription -TenantId $tenantID -DefaultProfile $cxt).在本地 ...

  5. 资源：mysql下载路径

    mysql的下载路劲 https://dev.mysql.com/downloads/mysql/

  6. linux学习之路第三天

    开机,重启和用户登陆注销 关机&重启命令 shutdown shutdown -h now :表示立即关机 shutdown -h 1 :表示一分钟后关机 shutdown -r now :表 ...

  7. WPF教程六：理解WPF中的隧道路由和冒泡路由事件

    WPF中使用路由事件升级了传统应用开发中的事件,在WPF中使用路由事件能更好的处理事件相关的逻辑,我们从这篇开始整理事件的用法和什么是直接路由,什么是冒泡路由,以及什么是隧道路由. 事件最基本的用法 ...

  8. 盘点linux操作系统中的10条性能调优命令，一文搞懂Linux系统调优

    原文链接:猛戳这里 性能调优一直是运维工程师最重要的工作之一,如果您所在的生产环境中遇到了系统响应速度慢,硬盘IO吞吐量异常,数据处理速度低于预期值的情况,又或者如CPU.内存.硬盘.网络等系统资源长 ...

  9. Python单元测试框架unittest之断言(assert)

    unittest中断言主要有三种类型: 1.基本的布尔断言,即:要么正确,要么错误的验证 2.比较断言,如比较两个变量的值(跟上面的布尔断言区别不大,主要是通过比较两个变量的值得出布尔值) 3.复杂断 ...

  10. C++ 标准模板库（STL）——算法（Algorithms）的用法及理解

    C++ STL中的算法(Algorithms)作用于容器.它们提供了执行各种操作的方式,包括对容器内容执行初始化.排序.搜索和转换等操作.按照对容器内容的操作可将STL 中的算法大致分为四类: (1) ...