实现5*5正方形网格x轴和y轴显示对应数值组件封装

实现5*5正方形网格x轴和y轴显示对应数值组件封装

需求:按5*5的正方形网格,根据目标数据的x和y轴值显示对应的文字,实现效果图如下:(当前目标数值:x=2,y=2)

代码如下:

vue 复制代码
<template>
  <div class="box">
    <div class="box-item" v-for="(item, index) in itemList" :key="index" :class="item.className">
      {{ (x === item.x && y === item.y) ? item.label : '' }}
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  x?: number,
  y?: number
}>(), {
  x: 2,
  y: 2
})

interface itemType {
  className: string;
  label: string;
  x: number;
  y: number;
}
let itemList: itemType[] = Array.from({ length: 25 }).map((_, index) => {
  let result = {
    className: '',
    label: '中',
    x: 0,
    y: 0
  }
  if ([3, 4, 8, 9, 14].includes(index)) {
    result.className = 'blue'
    result.label = '高'
  } else if ([10, 15, 16, 20, 21].includes(index)) {
    result.className = 'orange'
    result.label = '低'
  }
  result.className += ` xy-${index}`
  return result
})
let Y = 10
for (let j = 0; j < 25; j += 5) {
  for (let i = j; i < j + 5; i++) {
    if ([0, 5, 10, 15, 20].includes(i)) {
      itemList[i].x = 2
    } else {
      itemList[i].x = itemList[i - 1].x + 2
    }
    itemList[i].y = Y
  }
  Y -= 2
}
</script>

<style lang="scss" scoped>
.box {
  width: 270px;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  &::after {
    content: 'x轴';
    position: absolute;
    bottom: -20px;
    right: -10px;
  }
  &::before {
    content: 'y轴';
    position: absolute;
    top: -10px;
    left: -20px;
    // transform: rotate(-90deg);
		writing-mode:vertical-lr;
  }
}

.box-item {
  width: 20%;
  height: 50px;
  border: 1px solid #ff0000;
  box-sizing: border-box;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  &.xy-0::after {
    content: '10';
    position: absolute;
    left: -20px;
  }
  &.xy-5::after {
    content: '8';
    position: absolute;
    left: -20px;
  }
  &.xy-10::after {
    content: '6';
    position: absolute;
    left: -20px;
  }
  &.xy-15::after {
    content: '4';
    position: absolute;
    left: -20px;
  }
  &.xy-20::after {
    content: '2';
    position: absolute;
    left: -20px;
  }
  &.xy-20::before {
    content: '2';
    position: absolute;
    bottom: -20px;
  }
  &.xy-21::before {
    content: '4';
    position: absolute;
    bottom: -20px;
  }
  &.xy-22::before {
    content: '6';
    position: absolute;
    bottom: -20px;
  }
  &.xy-23::before {
    content: '8';
    position: absolute;
    bottom: -20px;
  }
  &.xy-24::before {
    content: '10';
    position: absolute;
    bottom: -20px;
  }
}

.blue {
  background-color: skyblue;
}

.orange {
  background-color: orange;
}
</style>
相关推荐
怪只怪满眼尽是人间烟火2 分钟前
Linux端口监控脚本
运维·javascript
阿金要当大魔王~~14 分钟前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
hey_ner19 分钟前
页面PDF文件格式预览(不使用pdf.js)
前端·javascript
over69740 分钟前
JavaScript恋爱物语:当代码学会送花,对象字面量也能当红娘!
javascript
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
三小河1 小时前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字1 小时前
ESLint 导入语句的分组排序
前端·javascript
Lazy_zheng1 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆1 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
Asort1 小时前
JavaScript设计模式(十七)——中介者模式 (Mediator):解耦复杂交互的艺术与实践
前端·javascript·设计模式