关于vue.js:电子屏数字展示组件开发

电子屏数字

组件将数字转化成电子屏数字的模式展现，效果图如下：

效果图

预览地址

预览地址

组件开发

设计思路

数字的主体是一个二维数组组成的图形，通过数组中的值来管制具体块的展现模式。

// 如 0 的实质是这样的一个二维数组
[[1,1,1],
[1,0,1],
[1,0,1],
[1,0,1],
[1,1,1]]

入参

// 要转化的数字
numbers: {
    type: Array,
    default: [0,22]
},
// 数字主体色彩
numberColor: {
     type: String,
     default: 'black'
},
// 数字尺寸
numberSize:{
      type: String,
      default: '1rem'
}

次要函数

将数字转换为二维数组

getNumber(num){switch (num.toString()){
        case '0':
          return [[1,1,1],
            [1,0,1],
            [1,0,1],
            [1,0,1],
            [1,1,1],
          ];
          break;
        case '1':
          return [[0,1,0],
            [0,1,0],
            [0,1,0],
            [0,1,0],
            [0,1,0],
          ];
          break;
          ………………
          ………………
        
        default :
          break;
      }
      return [];}

批改块元素款式

rowStyle(row){let res = `width:calc(${this.numberSize}/5);height:calc(${this.numberSize}/5);`;
      if(row == 1){res += `background-color: ${this.numberColor};`;
      }
      return res;
    },

将字符串转换成二维数组

getShowNum(num){num = num.toString();
      let res = [];
      for(let i = 0; i < num.length; i++){let temp = this.getNumber(num[i]);
        if(num[i] != 1){for(let j = 0; j < temp.length; j++){temp[j].push(0);
          }
        }
        if(res.length == 0) res = temp;
        else{for(let j = 0; j < res.length; j++){res[j] = res[j].concat(temp[j]);
          }
        }
      }
      return res;
    }

残缺代码

html

<template>
  <div class="numbers-style">
    <div v-for="(number,numberIndex) in numbers"
         :key="numberIndex"
         class="number-style">
      <div v-for="(column,columnIndex) in getShowNum(number)"
           :key="columnIndex"
           class="column" >
        <div v-for="(row,rowIndex) in column"
             :key="rowIndex"
             class="cell"
             :style="rowStyle(row)">
        </div>
      </div>
    </div>
  </div>
</template>

JavaScript

<script>
export default {
  name: "electronicNumber",
  props: {
    numbers: {
      type: Array,
      default: [0,22]
    },
    numberColor: {
      type: String,
      default: 'black'
    },
    numberSize:{
      type: String,
      default: '1rem'
    }
  },
  data() {
    // 这里存放数据 ",
    return {showNum:[]
    };
  },
  // 监听属性 相似于 data 概念 ",
  computed: {},
  // 监控 data 中的数据变动 ",
  watch: {},
  mounted(){},
  // 办法汇合 ",
  methods: {getNumber(num){switch (num.toString()){
        case '0':
          return [[1,1,1],
            [1,0,1],
            [1,0,1],
            [1,0,1],
            [1,1,1],
          ];
          break;
        case '1':
          return [[0,1,0],
            [0,1,0],
            [0,1,0],
            [0,1,0],
            [0,1,0],
          ];
          break;
        case '2':
          return [[1,1,1],
            [0,0,1],
            [1,1,1],
            [1,0,0],
            [1,1,1],
          ];
          break;
        case '3':
          return [[1,1,1],
            [0,0,1],
            [1,1,1],
            [0,0,1],
            [1,1,1],
          ];
          break;
        case '4':
          return [[1,0,1],
            [1,0,1],
            [1,1,1],
            [0,0,1],
            [0,0,1],
          ];
          break;
        case '5':
          return [[1,1,1],
            [1,0,0],
            [1,1,1],
            [0,0,1],
            [1,1,1],
          ];
          break;
        case '6':
          return [[1,1,1],
            [1,0,0],
            [1,1,1],
            [1,0,1],
            [1,1,1],
          ];
          break;
        case '7':
          return [[1,1,1],
            [0,0,1],
            [0,0,1],
            [0,0,1],
            [0,0,1],
          ];
          break;
        case '8':
          return [[1,1,1],
            [1,0,1],
            [1,1,1],
            [1,0,1],
            [1,1,1],
          ];
          break;
        case '9':
          return [[1,1,1],
            [1,0,1],
            [1,1,1],
            [0,0,1],
            [1,1,1],
          ];
          break;
        case ':':
          return [[0,0,0],
            [0,1,0],
            [0,0,0],
            [0,1,0],
            [0,0,0],
          ];
          break;
        case '.':
          return [[0,0,0],
            [0,0,0],
            [0,0,0],
            [0,0,0],
            [0,1,0],
          ];
          break;
        case '/':
          return [[0,0,0],
            [0,0,1],
            [0,1,0],
            [1,0,0],
            [0,0,0],
          ];
          break;
        case '\\':
          return [[0,0,0],
            [1,0,0],
            [0,1,0],
            [0,0,1],
            [0,0,0],
          ];
          break;
        case '+':
          return [[0,0,0],
            [0,1,0],
            [1,1,1],
            [0,1,0],
            [0,0,0],
          ];
          break;
        case '-':
          return [[0,0,0],
            [0,0,0],
            [1,1,1],
            [0,0,0],
            [0,0,0],
          ];
          break;
        case '=':
          return [[0,0,0],
            [1,1,1],
            [0,0,0],
            [1,1,1],
            [0,0,0],
          ];
          break;
        case ' ':
          return [[0],
            [0],
            [0],
            [0],
            [0],
          ];
          break;
        default :
          break;
      }
      return [];},
    rowStyle(row){let res = `width:calc(${this.numberSize}/5);height:calc(${this.numberSize}/5);`;
      if(row == 1){res += `background-color: ${this.numberColor};`;
      }
      return res;
    },
    getShowNum(num){num = num.toString();
      let res = [];
      for(let i = 0; i < num.length; i++){let temp = this.getNumber(num[i]);
        if(num[i] != 1){for(let j = 0; j < temp.length; j++){temp[j].push(0);
          }
        }
        if(res.length == 0) res = temp;
        else{for(let j = 0; j < res.length; j++){res[j] = res[j].concat(temp[j]);
          }
        }
      }
      return res;
    }
  },
}
</script>

CSS

<style lang="scss" scoped>
  .numbers-style{
    display: flex;
    flex-wrap: wrap;
    .number-style{
      flex-wrap: wrap;
      .column{
        display: flex;
        .black{background-color: black;}
      }
    }
  }
</style>

代码地址

Gitee