vue+vuex实现一个计算器效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue+vuex实现一个计算器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuex.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ionicons.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,600,700,900,200");
	html {
	box-sizing:border-box;
	color:#222;
	font-size:1rem;
	font-family:Source Sans Pro;
	line-height:1.5;
	text-rendering:optimizeLegibility
}
*,*:before,*:after {
	box-sizing:inherit
}
body {
	background-size:cover;
	background-repeat:no-repeat;
	background-color:#B6B2AB;
	background-image:linear-gradient(135deg,#B6B2AB 0,#B3AFA7 25%,#B8B5AF 25%,#78736B 50%,#6F6862 50%,#58504B 75%,#5F574E 75%,#625A51 100%);
	min-height:100vh
}
.App {
	opacity:0;
	transition:opacity .3s
}
.Calculator {
	box-shadow:12px 18px 45px 0 rgba(0,0,0,0.25);
	cursor:default;
	margin:0 auto;
	transform:translate(-50%,-50%);
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	position:absolute;
	top:50%;
	left:50%;
	width:260px
}
.Calculator-header {
	background:white;
	overflow:hidden;
	padding:20px 20px;
	position:relative;
	text-align:right
}
.Calculator-expressions {
	color:rgba(158,158,158,0.76);
	display:block;
	float:right;
	font-size:15px;
	line-height:22px;
	min-height:22px;
	position:relative;
	white-space:nowrap;
	width:100%;
	word-wrap:normal
}
.Calculator-expressionsList {
	display:block;
	float:right
}
.Calculator__expressionsOverflow {
	color:#333;
	box-shadow:5px 0 20px 4px rgba(0,0,0,0.3);
	font-weight:700;
	opacity:0;
	padding-right:0;
	text-align:center;
	transition:opacity .5s;
	transform:translate(0,-50%);
	position:absolute;
	top:50%;
	left:-24px;
	height:17px;
	width:2px
}
.Calculator__expressionsOverflow:before {
	content:""
}
.Calculator__expressionsOverflow.is-showing {
	opacity:1
}
.Calculator-operands {
	color:#151515;
	font-size:60px;
	font-weight:200;
	line-height:1.1;
	clear:both
}
.Calculator-currentOperand {
	display:block;
	overflow:visible;
	min-height:60px;
	line-height:60px;
	float:right;
	transition-duration:.2s;
	transition-property:font-size
}
.Calculator-currentOperand.has-error {
	color:#ef5334
}
.Calculator-body {
	background:white
}
.Calculator-buttonsContainer {
	display:flex;
	flex-wrap:wrap;
	overflow:visible;
	position:relative
}
.Calculator-buttonsContainer:before {
	background-color:rgba(90,95,114,0.76);
	background-image:linear-gradient(to bottom,rgba(90,95,114,0.76),rgba(29,32,37,0.8));
	box-shadow:17px 27px 72px 1px rgba(0,0,0,0.3);
	filter:drop-shadow(0px 0 7px rgba(0,0,0,0.2));
	content:"";
	position:absolute;
	top:0;
	right:-18px;
	bottom:0;
	left:-18px
}
.Calculator-button {
	color:rgba(255,255,255,0.8);
	cursor:pointer;
	font-size:24px;
	font-weight:300;
	flex:25%;
	line-height:70px;
	text-align:center;
	position:relative;
	z-index:1
}
.Calculator-button {
	cursor:pointer;
	transition:box-shadow .2s,background-color .15s;
	text-shadow:1px 1px 2px rgba(0,0,0,0.15)
}
.Calculator-button:hover {
	background:rgba(0,0,0,0.08)
}
.Calculator-button:active,.Calculator-button.is-active {
	box-shadow:inset 0 3px 15px 0 rgba(0,0,0,0.3)
}
.Calculator-button.has-children:hover,.Calculator-button.has-children:active {
	background:initial;
	box-shadow:none;
	cursor:default
}
.Calculator-button>span {
	display:block
}
.Calculator-button--negation,.Calculator-button--modulo {
	font-size:18px
}
.Calculator-button--square {
	font-size:16px
}
.Calculator-button--division {
	font-size:20px
}
.Calculator-button--multiplication {
	font-size:30px
}
.Calculator-button--addition {
	font-size:26px
}
.Calculator-button--subtraction {
	font-size:25px
}
.Calculator-button--paren {
	display:flex;
	font-size:18px
}
.Calculator-button--paren:hover,.Calculator-button--paren:active {
	background:initial!important;
	box-shadow:none!important;
	cursor:default!important
}
.Calculator-button--paren>span {
	flex:50%
}
.Calculator-button--paren>span {
	cursor:pointer;
	transition:box-shadow .2s,background-color .15s;
	text-shadow:1px 1px 2px rgba(0,0,0,0.15)
}
.Calculator-button--paren>span:hover {
	background:rgba(0,0,0,0.08)
}
.Calculator-button--paren>span:active,.Calculator-button--paren>span.is-active {
	box-shadow:inset 0 3px 15px 0 rgba(0,0,0,0.3)
}
.Calculator-button--paren>span.has-children:hover,.Calculator-button--paren>span.has-children:active {
	background:initial;
	box-shadow:none;
	cursor:default
}
.Calculator-equals {
	background-color:#FF8D4B;
	background-image:linear-gradient(to right,#FF8D4B,#FF542E);
	cursor:pointer;
	padding:26px 0;
	position:relative;
	z-index:-1
}
.Calculator-equalsLine {
	background:white;
	display:block;
	margin:0 auto 6px;
	box-shadow:0 0 2px rgba(0,0,0,0.4);
	height:1px;
	width:20px
}
.Calculator-equalsLine:last-child {
	margin-bottom:0
}

</style>
</head>

<body>
    <!-- partial:index.partial.html --><template data-template="calculatorbutton"><div class="Calculator-button" v-bind:class="className"><span v-bind:class="['btest', button.icon ? button.icon : '']" v-if="button.children == null" v-text="button.text" @click.stop="emitAction($event, button)"></span><span v-for="childButton in button.children" v-bind:class="[childButton.className || ' btest ', 'btest']" v-text="childButton.text" @click.stop="emitAction($event, childButton)"></span></div></template>
    <div
        class="App js-app" v-bind:style="{ opacity: appLoaded ? 1 : 0 }">
        <div class="Calculator">
            <header class="Calculator-header">
                <div class="Calculator-expressions"><span class="Calculator-expressionsOverflow"></span><span class="Calculator-expressionsList">{{expressionList}}</span></div>
                <div class="Calculator-operands"><span class="Calculator-currentOperand" v-bind:class="{ 'has-error': error }" v-bind:style="{ 'font-size': font..........完整代码请登录后点击上方下载按钮下载查看