Vue实现app中搜索页面的炫酷搜索热词布局样式

首先是效果图

• 可以自适应屏幕大小

• 可以每次刷新改变热词底色

在电脑显示如下

下面是实现过程

• 数据准备：原始数据为["**********"]

• 布局：

其中hotWords是上面的数据。以上代码是根据原始数据的个数自动生成hotWords.length个span元素

• 样式：

用到的是flex-wrap的特性：在一行排版拍不下的时候，可以根据屏幕大小自适应换行。

• 背景色每次刷新动态变化

实现这个功能只需要每次刷新的时候，返回的style的background-color的rgba的值每次动态变化就可以。

关键代码：

bcColor.push(`background-color: rgba(` + Math.ceil(Math.random() * 255) + `, ` + Math.ceil(Math.random() * 255) + `, ` + Math.ceil(Math.random() * 255) + `, ` + Math.random() + `)`)

每次刷新的时候rgb的每个值都是随机的255以下，a是1以下的数

---

以上就是此组件实现的基本思路

​