文字比较难解释，直接看图应该就懂是要做什么了。 工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。 首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 …

Vue 文本超过三行展示省略号，并加上展开和收起的功能 具体实现思路如下： 1、判断当前内容是否超过三行。此处可以给每行设置一个行高line-height,渲染完后超过三倍的行高即认为是内容超过了三行

0. 知识储备 :only-child 匹配属于其父元素的唯一子元素的每个元素。 :last-child 选择属于其父元素最后一个匹配子元素。 :first-child 选择属于其父元素最后一个匹配子元素。 :nth-child(n) 选择属于其父元素的第n个子元素。 :nth…

随着智能手机普及，有越来越多的手机网页和网页版游戏，手机触摸、移动、旋转等等，多种操作。一般电脑的人机交互靠的是鼠标，而手机用的就是触摸。区别有： PC 端一个电脑只能有一个鼠标，而移动端有多点触摸。

最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。 ps: 为了做个gif还下了app，还得通过邮件发到电脑上，脑瓜疼。。 在touchend中清除这个定时器，这样如果…

最近的一个项目做的是vue组件中的一个应用，「处理滚动列表」，这个应该是很常见的需求了，在项目中遇到的痛点，难点，如何一步步解决的，以及小细节一些优化。 经常会遇到的问题就是初始化了，「还是不能滚动」。那么对于这个而言，我最近用到一些经验是什么呢？ wrapper是父容器，它一…

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

可以直接在弹层组件的最外层标签上写上 @touchmove='stopScroll'，直接阻止默认的滚动事件。 在弹窗打开的时候：给body的全局滚动设置 position:fixed 属性，并设置top值；由于设置了fixed属性，那在弹窗的时候body就没有滚动条了。此时如…

这样的话我只要在mounted中判断这两个高度就知道是不是应该展示展开收起按钮了，后面的点击事件什么的都是浮云，有了思路，那就简单很多了。 其实还有一个小问题，那就是列表中这么多数据，我怎么一个一个的判断呢？其实非常简单，封装成一个组件在组件中的mounted中判断就好了。下面…