電子屏數字
組件將數字轉化成電子屏數字的形式展示，效果圖如下：
效果圖
預覽地址
預覽地址
組件開發
設計思路
數字的主體是一個二維陣列組成的圖形，通過陣列中的值來控制具體塊的展示形式，
//如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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304950.html
標籤：其他
上一篇：jQuery01基礎語法