网站 手机验证码 实例,中国企业500强最新排名2021,企业网站的cms,wordpress文本块字体大小实现5*5正方形网格x轴和y轴显示对应数值组件封装
需求#xff1a;按5*5的正方形网格#xff0c;根据目标数据的x和y轴值显示对应的文字#xff0c;实现效果图如下#xff1a;#xff08;当前目标数值#xff1a;x2#xff0c;y2#xff09; 代码如下#xff1a;
按5*5的正方形网格根据目标数据的x和y轴值显示对应的文字实现效果图如下当前目标数值x2y2 代码如下
templatediv classboxdiv classbox-item v-for(item, index) in itemList :keyindex :classitem.className{{ (x item.x y item.y) ? item.label : }}/div/div
/templatescript setup langts
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 blueresult.label 高} else if ([10, 15, 16, 20, 21].includes(index)) {result.className orangeresult.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
}
/scriptstyle langscss 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
