电子屏数字
组件将数字转化成电子屏数字的模式展现，效果图如下：
效果图
预览地址
预览地址
组件开发
设计思路
数字的主体是一个二维数组组成的图形，通过数组中的值来管制具体块的展现模式。
//如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