vue日记之可展开的消息气泡
项目小需求之聊天气泡可展开内容
- 因为某些信息内容太长或者某种原因必须分行输出,这就导致了有时候一个气泡占据了一整个聊天区域
- 所以我打算实现一个在该气泡加载的时候判断其气泡长度,并在长度过长的情况下进行可展开的选择功能
- 下面是实现截图
难点
- 动态获取控件并获得高度
- 动态定位可展开按钮
- 每次获取信息的时候必须循环遍历初始化
过程
- 先把循环展示的控件的key绑定为唯一值(很重要,后面功能实现不了浪费很多时间就是这个bug,搞得我心态爆炸
- 选择在哪个事件进行循环遍历,这里我选择在了时间信息调整上(这个功能我以后可能会写日记,这是实现效果
- 给控件绑定个唯一值之后,通过id获取该控件,并且通过offsetHeight属性获取高度,判断过于200px就进行可展开选择
- 写个可展开的标签,并且通过上面控件得到的offsetWidth进行动态定位,并且赋予可展开该标签的功能
- 进行用户区分动态定位,这里是less样式
收获
- 一个key值没绑定还得我一直扒原理一直调试获取消息过程的代码,头发都要无了,这个小细节特别重要,别像我一样给key值给个index,这点解决了就很好实现这个需求
- 动态绑定的位置不是那么完美,这是因为我的整体样式没设计好,一个用了浮动,一个没用,所以我不好浮动定位,到时候有更好的再说吧
vue日记之可展开的消息气泡的更多相关文章
- reactnative实现qq聊天消息气泡拖拽消失效果
前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
- 仿QQ消息气泡提醒
https://github.com/dkmeteor/Bubble-Notification 感谢这位作者,本例子只是封装了一下源码. 这是jar下载地址 下载之后只要引用就好.下面是一个最简单 ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- vue实现点击展开,点击收起
安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...
- 【Unity】UGUI聊天消息气泡 随文本内容自适应
游戏中需要用做UGUI做聊天界面.其中聊天气泡ChatItem的UI要求能随着聊天内容文本的长度自适应的. 网上搜了一下聊天气泡的UI,发现都不太符合咱的需求,具体来说是文本宽度不足一行时,文本宽度自 ...
- Vue多个元素展开收起
html: <div class="helpPages_main"> <div class="read" v-for="(item, ...
- Vue 实现点击展开收起
Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...
- WPF 精准大小的消息气泡生成
在其他网站发布过,都是这里写的. 全部为Wpf方式,生成的气泡宽度高度较为精确. 适用任意字体以及字号,可设置图像字体.字号.行间距.字间距.阴影.气泡宽度等,在RichtextboxHelper.c ...
- vue | vue实现列表同时展开与单独展开
需求:每个li标签在点击的时候,都同时展开. 但是碰见几个问题: 1.如果点第一个li 所有li都会展开: 2.点击第一个li,第一个li展开,点击第二个li,第一个li闭合,第二个li展开 这两种情 ...
随机推荐
- theUnforgiven-冲刺第一天
每天的冲刺博客分为scrum和PM报告两部分 吴邦天 负责项目整体构思以及对任务安排,承担项目具体设计,编码: 唐嘉诚 负责项目前端页面设计,承担整个项目的后端数据库搭建以及编码 周游 项目美化以及细 ...
- Android集合中对象排序
如果将集合中的对象进行排序,最近使用了一个简单的方法解决了,随笔记下来. 主要思路: 首先,新建类实现Comparator<?>,这个类是做比较的关键类,一般做比较的类型 int 或 St ...
- Go语言获取Ubuntu所有网卡名
Go语言获取Ubuntu所有网卡名 需求 获取当前机器下所有网卡名,以字符串数组的形式返回 实现demo package main import ( "fmt" "os/ ...
- 浙江大学计算机程序设计能力考试（PAT）简介
计算机程序设计能力考试(Programming Ability Test,简称 PAT)旨在通过统一组织的在线考试及自动评测方法客观地评判考生的算法设计与程序设计实现能力,科学地评价计算机程序设计人才 ...
- 即时通信之 SignalR
即时通信在日常的web开发场景中经常使用,本篇主要回顾一下SignalR的实现原理和通过例子说明如何在.NET Core 中使用. SingnalR 应用 需要从服务器进行高频更新的应用程序.例如游戏 ...
- 18、linux文件属性
文件的描述信息: [root@centos6 /]# ls -lih 总用量 118K 3538945 drwxr-xr-x 3 root root 4.0K 8月 23 17:12 app 3276 ...
- hdu 1394 线段树计算逆序数
线段树计算逆序数的原理: 用线段树来统计已插入的数的个数(所以要保证最大的那个数不能太大,否则数组都开不了),然后每插入一个数,就查询比插入的数大的个数,累加即可. 这个题还有一个特点就是,题目给的是 ...
- hdu 6034 贪心模拟 好坑
关键在排序!!! 数组间的排序会超时,所以需要把一个数组映射成一个数字,就可以了 #include <bits/stdc++.h> using namespace std; typedef ...
- Vue style与css的var()
vue绑定style直接给css的var变量传递一个值,然后结合css的var()函数使用这个值. 在data里面定义一个变量然后给定一个值,后期修改这个值之后,所有依赖这个变量的css样式都会被响应 ...
- SpringMVC的注解关键词解释
SpringMVC的注解关键词解释 @Controller控制器定义 和Struts1一样,Spring的Controller是Singleton的.这就意味着会被多个请求线程共享.因此,我们将控制器 ...