【CSS小例】像素ICON再-搞成小组件

在上一篇文章【CSS小例】像素ICON续（js版）-CSDN博客的基础上，制作一个小组件，在我们的项目中用起来。

实现效果

代码

icon像素矩阵数据：

const PIXEL_DATA: { [key: string]: any } = {
  article: {
    gridSize: 12,
    data: [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 0],
      [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 0],
      [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 0],
      [0, 2, 2, 2, 1, 1, 1, 1, 2, 2, 2, 0],
      [0, 2, 2, 2, 1, 1, 1, 1, 2, 2, 2, 0],
      [0, 2, 2, 2, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ]
  },
  article1: {
    gridSize: 12,
    data: [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
      [0, 2, 2, 2, 1, 1, 2, 2, 2, 2, 0, 0],
      [0, 2, 2, 2, 1, 1, 1, 1, 2, 2, 0, 0],
      [0, 2, 2, 1, 1, 1, 1, 1, 2, 2, 0, 0],
      [0, 2, 2, 1, 1, 1, 1, 2, 2, 2, 0, 0],
      [0, 2, 2, 2, 2, 1, 1, 2, 2, 2, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ]
  }
}
export default PIXEL_DATA

创建一个PixelArt组件，通过key和size属性，用于指定显示样式和大小： 

import PIXEL_DATA from '../enum/pixelData'

/**
 * @param pixelKey  关联icon矩阵数据的key
 * @param size      单位尺寸
 */
const props = defineProps(['pixelKey', 'size'])

// 像素尺寸
const pixelSize: number = props.size
// 矩阵尺寸
const gridSize: number = PIXEL_DATA[props.pixelKey].gridSize
// 计算容器尺寸
const boxSize: number = props.size * gridSize

// 颜色表
const colors = ['#000000', '#f7f7f7', '#f96000']
// 矩阵数据
const data_p_icon = PIXEL_DATA[props.pixelKey].data
// 存放样式结果
const boxShadow = ref('')
// 计算样式
const setPixel = () => {
  const res = []
  for (let y = 0; y < data_p_icon.length; y++) {
    for (let x = 0; x < data_p_icon.length; x++) {
      if (data_p_icon[y][x] > 0) {
        res.push(`${x * pixelSize}px ${y * pixelSize}px 0 ${colors[data_p_icon[y][x]]}`)
      }
    }
  }
  boxShadow.value = res.join(', ')
}
setPixel()

  <div
    class="pixel-art-box"
    :style="{
      width: `${boxSize}px`,
      height: `${boxSize}px`
    }"
  >
    <div
      class="pixel"
      :style="{
        width: `${size}px`,
        height: `${size}px`,
        'box-shadow': boxShadow
      }"
    ></div>
  </div>

 在其他组件中使用：

<PixelArt pixelKey="article" :size="5" />
<PixelArt pixelKey="article" :size="3" />
<PixelArt pixelKey="article" :size="2" />

<PixelArt pixelKey="article1" :size="5" />
<PixelArt pixelKey="article1" :size="3" />
<PixelArt pixelKey="article1" :size="2" />

完结散花

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。