vue制作优雅的拟态化微立体计算器

Posted 2021-08-17 北极光之夜。

一.话不多，先看效果：

 这个效果是我在b站看到一个up写的，感觉拟态化微立体效果很简约却又有种优雅的感觉。😉而优雅又怎么能缺了我， <(￣︶￣)> ，所以话不多说，自己马上也整了一个，实现并不难，超详细的制作过程如下（最后附上完整代码）：

二.超级详细的制作过程：

1.首先自然是定义html标签（先别理标签里的vue语法），我定义一个父盒子.calculator，然后定义一个span标签放计算结果，其它按钮都用button标签包裹。计算器的布局采用grid布局，所以在每个按钮里绑定属性grid-area指定它将要放在哪一个区域：

 <div id="app">
      <div class="calculator">
        <span style="grid-area: num-0">{{result}}</span>
        <button @click="entry('1')" style="grid-area: num-1">1</button
        ><button @click="entry('2')" style="grid-area: num-2">2</button
        ><button @click="entry('3')" style="grid-area: num-3">3</button
        ><button @click="entry('4')" style="grid-area: num-4">4</button
        ><button @click="entry('5')" style="grid-area: num-5">5</button
        ><button @click="entry('6')" style="grid-area: num-6">6</button
        ><button @click="entry('7')" style="grid-area: num-7">7</button
        ><button @click="entry('8')" style="grid-area: num-8">8</button
        ><button @click="entry('9')" style="grid-area: num-9">9</button>
        <button @click="allClear" style="grid-area: num-10">AC</button
        ><button @click="different" style="grid-area: num-11">±</button
        ><button @click="entry('*')" style="grid-area: num-12">×</button
        ><button @click="entry('/')" style="grid-area: num-13">÷</button
        ><button @click="entry('+')" style="grid-area: num-14">+</button
        ><button @click="entry('-')" style="grid-area: num-15">-</button
        ><button @click="entry('.')" style="grid-area: num-16">.</button
        ><button @click="getResult()" style="grid-area: num-17">=</button
        ><button @click="percentage" style="grid-area: num-18">%</button
        ><button @click="entry('0')" style="grid-area: num-19">0</button>
      </div>
    </div>

2.定义好基本的全局css样式：

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(231, 231, 231);
      }

box-sizing：border-box；盒子边框和内边距的值是包含在width内；
display: flex; flex布局，让计算器整体在窗口居中显示。
background-color：给背景个不是那么纯白的色。

3.计算器父盒子.calculator的整体样式

 .calculator {
        display: grid;
        grid-template-areas:
          "num-0 num-0 num-0 num-0"
          "num-10 num-11 num-18 num-13"
          "num-7 num-8 num-9 num-14"
          "num-4 num-5 num-6 num-15"
          "num-1 num-2 num-3 num-12"
          "num-19 num-16 num-17 num-17";
        grid-gap: 15px;
        grid-template-columns: repeat(4, 55px);
        grid-template-rows: repeat(6, 55px);
        box-shadow: -5px -5px 15px -5px white,
          5px 5px 15px -5px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
        padding: 25px;
      }

grid-template-areas: 定义每个按钮所占的区域位置；
grip-gap：每个按钮间距离；
grid-template-columns: repeat(4, 55px);
grid-template-rows: repeat(6, 55px); 每个子项目行与列上占据的宽高。
利用阴影实现拟态化效果：
box-shadow: -5px -5px 15px -5px white,
5px 5px 15px -5px rgba(0, 0, 0, 0.15); 左上白，右下灰；

4.按钮的css样式，实现拟态化效果按钮：

 .calculator > button {
        text-align: center;
        font-family: "fangsong";
        font-weight: bold;
        font-size: 22px;
        border: none;
        color: rgb(114, 114, 114);
        background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1), white);
        box-shadow: -2px -2px 8px -2px white,
          2px 2px 8px -2px rgba(0, 0, 0, 0.15);
        border-radius: 20px;
      }

 .calculator > button:active {
        box-shadow: inset -2px -2px 8px -2px white,
          inset 2px 2px 8px -2px rgba(0, 0, 0, 0.15);
      }

背景渐变色加上阴影实现拟态化微立体风格按钮：
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1), white); 从左上到右下由白到灰；
box-shadow: -2px -2px 8px -2px white,
2px 2px 8px -2px rgba(0, 0, 0, 0.15); 左上白右下灰；
点击按钮时把外阴影改为内阴影：
box-shadow: inset -2px -2px 8px -2px white,
inset 2px 2px 8px -2px rgba(0, 0, 0, 0.15);

5.计算结果的span标签也同样实现拟态化效果：

div > span {
        color: rgb(70, 70, 70);
        padding: 0 8px 0 0;
        font-size: 25px;
        line-height: 55px;
        text-align: right;
        box-shadow: inset -2px -2px 10px -2px white,
          inset 2px 2px 10px -2px rgba(0, 0, 0, 0.15);
        overflow-x: auto;
      }

6.开始vue部分，实现计算器计算逻辑与功能，首先定义基本变量：

 data: { 
     // result为计算结果
          result: "0",
          //代表是否输入了小数点
          isDot: false,
          //代表是否输入了运算符（加减乘除）
          isOperator: false,
          //代表是否有了第一次次输入
          isFirst: false,
        },

7.给每个按钮绑定对应的点击事件，并传入参数，同时显示计算结果result：

<span style="grid-area: num-0">{{result}}</span>
        <button @click="entry('1')" style="grid-area: num-1">1</button
        ><button @click="entry('2')" style="grid-area: num-2">2</button
        ><button @click="entry('3')" style="grid-area: num-3">3</button
        ><button @click="entry('4')" style="grid-area: num-4">4</button
        ><button @click="entry('5')" style="grid-area: num-5">5</button
        ><button @click="entry('6')" style="grid-area: num-6">6</button
        ><button @click="entry('7')" style="grid-area: num-7">7</button
        ><button @click="entry('8')" style="grid-area: num-8">8</button
        ><button @click="entry('9')" style="grid-area: num-9">9</button>
        <button @click="allClear" style="grid-area: num-10">AC</button
        ><button @click="different" style="grid-area: num-11">±</button
        ><button @click="entry('*')" style="grid-area: num-12">×</button
        ><button @click="entry('/')" style="grid-area: num-13">÷</button
        ><button @click="entry('+')" style="grid-area: num-14">+</button
        ><button @click="entry('-')" style="grid-area: num-15">-</button
        ><button @click="entry('.')" style="grid-area: num-16">.</button
        ><button @click="getResult()" style="grid-area: num-17">=</button
        ><button @click="percentage" style="grid-area: num-18">%</button
        ><button @click="entry('0')" style="grid-area: num-19">0</button>

8.开始书写事件函数，实现计算逻辑，首先定义一个函数，判断当前输入是否为运算符（加减乘除）：

 //该方法返回当前是否输入的是运算符（加减乘除），是则返回真，反之
          operator(num) {
            //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
            return ["+", "-", "*", "/"].indexOf(num) > -1;
          },

9.输入函数entry，包括数字、小数点、等号与运算符：

 entry(num) {
   //是否是第一次输入,且第一次输入的不能运算符
            if (this.result == "0" && !this.operator(num)) {
              //第一次就输入小数点
              if (num == ".") {
                this.result += ".";
                //已输入小数点，次数用完了，只有再次输入运算符号后才能再次输小数点
                this.isDot = true;
              } else {
               //当前result为输入
                this.result = num;
              }
              // 已经有了第一次输入
              this.isFirst = true;
              // 返回
              return;
            }
 // 有了第一次输入,继续输入其它数字，不为运算符的情况下
            if (!this.operator(num)) {
              //如果小数点输入次数用完就不能再输入，只有输入运算符号后才能再次输小数点
              if (num == "." && this.isDot) {
                //直接返回
                return;
              }
              // 如果小数点输入次数没用完,程序可以继续往下走，不直接return
              if (num == ".") {
                this.isDot = true;
                //输入点后不能直接输入运算符,先把isOperator该为true
                this.isOperator = true;
              } else {
                //如果输入的是数字，证明还没输入运算符
                this.isOperator = false;
              }
              // 拼接输入字符
              this.result += num;
            }
 //如果输入为运算符(如果连第一次都没输入就输入运算符那就当你第一次输入的是0了)
            if (this.operator(num) && !this.isOperator) {
              // 拼接输入的运算符
              this.result += num;
              //可以再次输入小数点
              this.isDot = false;
              //已输入运算符，下一次输入不能再是运算符
              this.isOperator = true;
            }
          },

10.点击 =，输出结果：

 // 结果
          getResult() {
            //eval() 函数可计算某个字符串，并执行其中的的 javascript 代码。
            //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
            //parseFloat() 函数可解析一个字符串，并返回一个浮点数。
            //toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。
            this.result = parseFloat(eval(this.result).toFixed(12).toString());
            // 同时小数点和运算符改为没输入状态
            this.isDot = false;
            this.isOperator = false;
          },

//parseFloat() 函数可解析一个字符串，并返回一个浮点数。
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
//toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。

11. 当点击清空AC，正负±，百分比%时的事件处理函数：

 // 清空 AC
          allClear() {
          // 全部重置
            this.result = "0";
            this.isDot = false;
            this.isFirst = false;
            this.isOperator = false;
          },
          // 正负 ±
          different() 英特尔发布首个7nm芯片Loihi 2，用于神经拟态计算，可模拟100万神经元

 Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段
 如何使用Vegas制作电影级别5.1立体声道？
 《评人工智能如何走向新阶段》后记（再续24）
 如何在 C 中制作立体声？ [关闭]
 promise化微信小程序api