前端|前端电子屏数字展示效果组件开发
电子屏数字 【前端|前端电子屏数字展示效果组件开发】组件将数字转化成电子屏数字的形式展示，效果图如下：
文章图片
效果图
文章图片
预览地址
预览地址
组件开发
设计思路 数字的主体是一个二维数组组成的图形，通过数组中的值来控制具体块的展示形式。
//如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
JavaScript
>
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;
}
},
}
CSS
.numbers-style{display: flex;
flex-wrap: wrap;
.number-style{flex-wrap: wrap;
.column{display: flex;
.black{background-color: black;
}
}
}
}代码地址 Gitee
推荐阅读
- 最喜6.8.9
- Jsr303做前端数据校验
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- 《数字反应出性格》李莉原创分享第96天|《数字反应出性格》李莉原创分享第96天 昆明
- 何以解忧，企业信息化、数字化选型焦虑之五·系统安全隐患大
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01
- js保留自定义小数点
- 前端开发|Vue2.x API 学习