037纯CSS实现网格背景及点阵背景，及空白点击复位功能

037纯CSS实现网格背景及点阵背景，及空白点击复位功能

纯CSS实现网格背景及点阵背景

// 实现点阵背景
background: radial-gradient(circle, #5a5a5a 0.5px, transparent 0.5px);
background-size: 10px 10px;
// 实现网格背景，方法一：
background: linear-gradient(to right, #f5f5f5 1px, transparent 1px),
linear-gradient(to bottom, #f5f5f5 1px, transparent 1px);
background-repeat: repeat; /* 默认为 repeat */
background-size: 10px 10px;
// 实现网格背景，方法二：
background-image: repeating-linear-gradient(
    0deg,
    #f5f5f5 0 0.5px,
    transparent 0.5px 20px
),
repeating-linear-gradient(90deg, #f5f5f5 0 0.5px, transparent 0.5px 20px);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

点击空白处切换选中program状态

• @click.stop.self.prevent这个核心

    <el-main
      class="as-area-content"
      @click.stop.self.prevent="handleClick($event, programs)"
    >
1
2
3
4

点击空白处执行选中项初始化

function handleClick(e: any, item: any) {
  e.preventDefault();
  pointCurrent.item = item;
}
1
2
3
4