当前位置:首页 » 《随便一记》 » 正文

前端电子屏数字展示效果组件开发_Twinkle_sone的博客

28 人参与  2022年02月24日 13:59  分类 : 《随便一记》  评论

点击全文阅读


电子屏数字

组件将数字转化成电子屏数字的形式展示,效果图如下:

img

效果图

预览

预览地址

预览地址

组件开发

设计思路

数字的主体是一个二维数组组成的图形,通过数组中的值来控制具体块的展示形式。

//如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


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/35276.html

数字  数组  地址  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (番外)+(全书)霍沉洲沈青禾(此去经年人未还霍沉洲沈青禾)完结_(霍沉洲沈青禾)列表_笔趣阁(此去经年人未还霍沉洲沈青禾)
  • 「重回八零,拒绝替嫁冲喜」章节彩蛋限时释出‌_卫东玉兰苏夏人气小说未删减节选
  • 重生七零祁同伟不再是农民儿子结局+番外纯净版全书免费重生七零祁同伟不再是农民儿子结局+番外纯净版全书免费
  • 傅雅宁的神女老婆,却在背地承欢作乐顾尘傅雅宁全书在线
  • 全文神女老婆,却在背地承欢作乐全局(顾尘傅雅宁)列表_全文神女老婆,却在背地承欢作乐全局
  • (番外)+(全书)此去经年人未还全书+番外+后续免费下载_(沈青禾霍沉洲)此去经年人未还全书+番外+后续列表_笔趣阁(沈青禾霍沉洲)
  • 完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续列表_完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续(林梦婉)
  • 妻子辱我爸受贿自杀,我掏出一等军功章节选推荐_[陈素云辰朋友]小说精彩章节分享
  • 全书浏览苔藓爬满旧日诺言新上(顾砚廷慕晚夏)_苔藓爬满旧日诺言新上(顾砚廷慕晚夏)全书结局
  • 顾尘傅雅宁(神女老婆,却在背地承欢作乐+后续+结局)结局_(顾尘傅雅宁神女老婆,却在背地承欢作乐+后续+结局全书结局)结局列表_笔趣阁(顾尘傅雅宁)
  • 「老婆怀上助理的孩子后,助理要求我净身出户」章节限时抢先看‌_「黄秋雅秋雅姐刘嘉铭」后续完结版
  • 此去经年人未还,沈青禾霍沉洲_此去经年人未还,沈青禾霍沉洲

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1