基于vue+网格grid布局的calculator
来，一起完成一个新拟态计算器吧。
使用的编辑器codepen 是一个浏览器在线编辑器，有兴趣的小伙伴，网上可自行了解
首先看完成后的效果，也可点击这里尝试一下demo演示
看这篇文章的小伙伴，跟着文章弄，就可以完成一个新拟态计算器啦
文章分三步，跟我一起吧:four_leaf_clover:
1、页面布局 HTML部分
首先我们先把主要的页面布局写好 我们需要19个按钮
<button >AC/±/%/+/-/×/÷/=</button>
<button >1/2/3/4/5/6/7/8/9/0/.</button>
当然我们还需要一个结果区，用来展示输入的数字和计算后的结果
<div class="result">
0
</div>
初始化为‘0’，是因为后面写逻辑代码需要
看页面
看基本的样式已经完成啦，接下来我们要来写css部分，再写这部分之前，我们先给html元素button便签加上style，等下使用grid布局。:hibiscus:
<div class="calculator">
<div class="result" style="grid-area: result">
{{ equation }}
</div>
<button style="grid-area: ac" >AC</button>
<button style="grid-area: plus-minus" >±</button>
<button style="grid-area: percent" >%</button>
<button style="grid-area: add" >+</button>
<button style="grid-area: subtract" >-</button>
<button style="grid-area: multiply" >×</button>
<button style="grid-area: divide" >÷</button>
<button style="grid-area: equal">=</button>
<button style="grid-area: number-1" >1</button>
（1--9）
<button style="grid-area: number-0" >0</button>
<button style="grid-area: dot" >.</button>
</div>
2、页面样式 CSS部分
开始写样式了，该小demo是使用grid布局来实现的，所以让我们先来讲讲这个项目需要用到的grid布局属性:leaves:
目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。
基本概念
1.容器和项目:eggplant: 采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”
2 容器属性:cucumber: display属性
display:grid指定一个容器为网格布局
3 grid-template-columns和 grid-template-rows:carrot:
grid-template-columns：用来指定行的宽度
grid-template-rows：用来指定行的高度
.wrapper{
width:450px;
background: #e5e5e5;
text-align:center;
display: inline-grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px
}
上面这段代码指定的宽高各为150px
当然，出来能指定具体的数值之外，也可以使用百分比来表示
.wrapper {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
3.1 repeat 有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下
.wrapper {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
repeat接受两个参数：第一个数重复的次数（上面的例子是重复3次），第二个是重复的值（上面例子是33.33%）
grid属性不只这些，但我们暂时需要的就是以上的，想要了解更多的，可以看看这篇文章 手把手教你grid布局:pouting_man:
好了，让我们开始写计算器的样式 1、计算器整体样式
.calculator {
//设置小格子的宽高
--button-width: 80px;
--button-height: 80px;
//设置网格布局
display: grid;
//设置网格具体的放置，和之前html设置的style="grid-area: "有关
grid-template-areas:
"result result result result"
"ac plus-minus percent divide"
"number-7 number-8 number-9 multiply"
"number-4 number-5 number-6 subtract"
"number-1 number-2 number-3 add"
"number-0 number-0 dot equal";
//看文章3.1，有解释哦
grid-template-columns: repeat(4, var(--button-width));
grid-template-rows: repeat(6, var(--button-height));
//实现拟态效果
box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1), 8px 8px 16px -10px rgba(0, 0, 0, .15);
padding: 24px;
border-radius: 20px;
}
2、按钮样式
.calculator button {
margin: 8px;
padding: 0;
border: 0;
display: block;
outline: none;
border-radius: calc(var(--button-height) / 2);
font-size: 24px;
font-family: Helvetica;
font-weight: normal;
color: #999;
background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);
//拟态实现
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);
}
3、点击后的按钮效果
这里只是加了inset
.calculator button:active {
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;
}
4、最后是结果区
.result {
text-align: right;
line-height: var(--button-height);
font-size: 48px;
font-family: Helvetica;
padding: 0 20px;
color: #666;
}
3、逻辑书写 JS部分
首先我们需要设置一下vue的环境
点击setting
在搜索框里查找vue，选择保存就可以
之后我们在html文件body里面的元素外层包裹
<div id="app">
代码。。
</div>
同时，我们先为html的button元素加上 @click事件
绑定的几个函数 isOperator() append() calculate() calculateToggle() calculatePercentage() clear()
new Vue({
el: '#app',
data: {
equation: '0',
isDecimalAdded: false,
isOperatorAdded: false,
isStarted: false,
},
methods: {
// Check if the character is + / - / × / ÷
isOperator(character) {
return ['+', '-', '×', '÷'].indexOf(character) > -1
},
// When pressed Operators or Numbers
append(character) {
// Start
if (this.equation === '0' && !this.isOperator(character)) {
if (character === '.') {
this.equation += '' + character
this.isDecimalAdded = true
} else {
this.equation = '' + character
}
this.isStarted = true
return
}
// If Number
if (!this.isOperator(character)) {
if (character === '.' && this.isDecimalAdded) {
return
}
if (character === '.') {
this.isDecimalAdded = true
this.isOperatorAdded = true
} else {
this.isOperatorAdded = false
}
this.equation += '' + character
}
// Added Operator
if (this.isOperator(character) && !this.isOperatorAdded) {
this.equation += '' + character
this.isDecimalAdded = false
this.isOperatorAdded = true
}
},
// When pressed '='
calculate() {
let result = this.equation.replace(new RegExp('×', 'g'), '*').replace(new RegExp('÷', 'g'), '/')
this.equation = parseFloat(eval(result).toFixed(9)).toString()
this.isDecimalAdded = false
this.isOperatorAdded = false
},
// When pressed '+/-'
calculateToggle() {
if (this.isOperatorAdded || !this.isStarted) {
return
}
this.equation = this.equation + '* -1'
this.calculate()
},
// When pressed '%'
calculatePercentage() {
if (this.isOperatorAdded || !this.isStarted) {
return
}
this.equation = this.equation + '* 0.01'
this.calculate()
},
// When pressed 'AC'
clear() {
this.equation = '0'
this.isDecimalAdded = false
this.isOperatorAdded = false
this.isStarted = false
}
}
})
运行就可以实现啦 快来动手试试吧
