【项目难点】禁止滚动、文本溢出省略号、css实现三角形、动态样式（使用vue）

这三个是最近做移动端项目遇到的一些比较小的需求。
1、禁止滚动
背景：手动实现了一个压屏窗（可以理解成带遮罩的弹窗），发现在弹窗出现后，依然可以通过鼠标滚轮上下滑动来使下面的列表进行滑动，要解决这个问题。
实现一：利用betterscroll插件，将列表彻底做成只能被touch或者tap类事件触发滚动的组件。
实现二：如果弹窗没有滚动需求的话，可以在弹窗弹出时，禁用touchmove事件
实现三：如果弹窗没有滚动需求的话，可以把body的overflow设置为hidden，直接就没有滚动这一说了
2、文本溢出
背景：实现文本溢出时，显示省略号
实现一：通过css的相关属性实现
单行

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;//设定行数
-webkit-box-orient:vertical;

实现二：数一下大概多少字会溢出，提前将后面的字符串替换成三个点
实现三：设置成overflow:hidden，然后使用::after伪属性的content加三个点
3、css实现三角形

当然最后一个三角形也可以通过transform函数来进行旋转得到

<div id="top-triangle">div>
<div id="left-triangle">div>
<div id="right-triangle">div>
<div id="bottom-triangle">div>
<div id="bottom-right-triangle">div>
<style>
    #top-triangle{
        height:0;
        width:0;
        border-width:10px;
        border-color:black transparent transparent transparent;
        border-style:solid;
    }
    #right-triangle{
        height:0;
        width:0;
        border-width:10px;
        border-color:transparent black transparent transparent;
        border-style:solid;
    }
    #left-triangle{
        height:0;
        width:0;
        border-width:10px;
        border-color:transparent transparent transparent black;
        border-style:solid;
    }
    #bottom-triangle{
        height:0;
        width:0;
        border-width:10px;
        border-color:transparent transparent black transparent;
        border-style:solid;
    }
    #bottom-right-triangle{
        height:0;
        width:0;
        border-width:10px;
        border-color:transparent black black transparent;
        border-style:solid;
    }
style>

4、动态样式
直接去看官网，这里推荐使用类名直接使用字符串