在Liveview页面添加资源过期提醒时，设计了一个包含关闭按钮和文字提示的长条组件。遇到文字过多时如何保持布局不变以及文字少时背景色覆盖问题。经过一天半的努力，发现Element UI的Feedback Alert组件已满足需求，简化了实现。同时，通过CSS调整Alert组件样式。反思工作中缺乏耐心，想提升前端或后端技能，但难以平衡工作和娱乐。
今日任务，在liveview页面给每个liveview加上一个提示，用于提醒用户储存的资源要过期了。
想法：一个宽度合适的长条，七八成用来写提示内容，剩下的部分做关闭按钮，两部分间有个细小白色竖条做分割。然后需要更换waring是黄色，必须马上更换是红色。
做了好几天，卡在文字和文字显示的部分。一是当文字很多的时候，我想让它不要打破这个我划定的文字部分的大小，要么换行要么隐藏，隐藏的话，hover会显示所有字节。二是文字较少的时候它的文字部分的背景颜色要覆盖我设定的部分。
难过的是做了一天半我还是没有搞完，更难过得是使用现成组件即可：Element的Feebback部分中有一个叫Alert的组件满足了我大部分需求。像下面这个样子：
然后我还发现（毕竟没学过），这个组件的优先权在CSS之后。
比如这是本来的样子，
然后在CSS中加入 background-color: #000（就是黑色），然后它就会变成黑色底了
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
