VUE：用vue实现的计算器实例

1. 闲暇时间做的vue计算器小实例。2. <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel=&qu

Koon_AgueroAgnis

3794人浏览 · 2018-05-09 17:37:53

Koon_AgueroAgnis · 2018-05-09 17:37:53 发布

1. 闲暇时间做的vue计算器小实例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="1122.css"/>
	</head>
	<body>
		
		<div id="ad">
			<gxx-calculator></gxx-calculator>
		</div>
		
		<template id="key">
			<button :class="keyClass" @click="clickBtn">{{keyNumber}}</button>
		</template>
		
		<template id="keyGroup">
			<div>
				<div id="" class="keyShell" v-for="tmp in showArr">
					<gxx-key :key-number="tmp"></gxx-key>
				</div>
			</div>
		</template>
		
		<template id="keyGroups">
			<div class="keyGroup">
				<div v-for="tmp in showArrs">
					<gxx-key-group :show-arr="tmp"></gxx-key-group>
				</div>
			</div>
		</template>
		
		<template id="calculator">
			<div class="calculatorState">
				<div>
					<input type="text" :class="screenClass" v-model="showScreen" />
				</div>
				<gxx-key-groups></gxx-key-groups>
			</div>
		</template>
		
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js" type="text/javascript" charset="utf-8"></script>
		<script src="1122.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

/*
 	
 * */

	.keyState {
		width: 80px;
		height: 80px;
		border-radius: 20%;
		outline: none;
		font-size: 2em;
		margin: 5px;
		vertical-align: top;
	}
	
	.keySmallShow {
		font-size: 1em;
	}
	
	.keyShell {
		display: inline-block;
	}
	
	.keyGroup {
		display: inline-block;
		margin: 10px;
	}
	
	.screenState {
		display: inline-block;
		box-sizing: border-box;
		margin: 20px 10px;
		padding: 1rem;
		font-size: 1.5rem;
		text-align: right;
		width: 360px;
		height: 60px;
		border-radius: 10px;
		outline: none;
		box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075);
	}
	
	.calculatorState {
		display: inline-block;
		padding: 20px 10px 10px 10px;
		border: 4px solid #dddddd;
		border-radius: 5%;
		background-color: rgba(221, 221, 221, 0.5);
	}

/*
 
 * */
	
	var store = new Vuex.Store({
		state: {
			screenShow: 0,
			initNum: 0,
			computedSymbol: '',
			resultCount: 0,
			computedNum: '',
			addFlag: false
		},
		mutations: {
			addNum: function(state, n) {
				
				if(state.computedSymbol !== '' && !state.addFlag) {
					state.screenShow = 0
					state.addFlag = true
				}
				
				//限制位数
				var val = state.screenShow + ''
				var integer = val.split('.')[0]
				var decimal = val.split('.')[1]
				
				if(!/\./g.test(val) && integer.length > 7 && !/\./.test(n))
					return false
				if(decimal !== undefined &&　decimal.length > 5)
					return false

				if(state.screenShow == 0)
					state.screenShow += n
				else
					state.screenShow += '' + n
			},
			clearNum: function(state) {
				state.screenShow = 0
				state.initNum = 0
				state.computedSymbol = ''
				state.resultCount = 0
				state.computedNum = ''
				state.addFlag = false
			},
			computeNum: function(state, n) {
				state.initNum = state.screenShow
				state.computedSymbol = n
				
				//继续计算
				state.addFlag = false
				state.resultCount = 0
				
			},
			resultNum: function(state) {
				
				function comput(num1, num2, sym) {
				
					var l1 = (num1 + '').indexOf('.') > -1 ? (num1 + '').split('.')[1].length : 0
					var l2 = (num2 + '').indexOf('.') > -1 ? (num2 + '').split('.')[1].length : 0
				
					var flag = Math.pow(10, Math.max(l1, l2))
				
					var result = eval('(num1*flag' + sym + 'num2*flag)/flag')
					if(/\*|\//.test(sym))
						result = result/flag
			
					return result
				}
				
				if(state.resultCount === 0) {
					state.computedNum = state.screenShow
					state.screenShow = comput(state.initNum, state.computedNum, state.computedSymbol)
				} else {
					state.screenShow = comput(state.screenShow, state.computedNum, state.computedSymbol)
				}
				state.resultCount ++
			},
			backSpace: function(state) {
				var tmp = state.screenShow
				state.screenShow = tmp.slice(0, tmp.length - 1)
			},
			precentNum: function(state) {
				state.screenShow = state.screenShow / 100
			},
			forMyLove: function(state) {
				state.screenShow = 'For My Love XiangXiang.'
			}
		}
	})

	var key = {
		props: ['keyNumber'],
		data: function() {
			return {
				keyClass: {
					keyState: true,
					keySmallShow: false
				}
			}
		},
		template: '#key',
		mounted: function() {
			var len = (this.keyNumber + '').length
			if(len > 2)
				this.keyClass.keySmallShow = true
		},
		computed: {
			screenShow: function() {
				return store.state.screenShow
			}
		},
		methods: {
			clickBtn: function(e) {
				console.log(this.keyNumber)
				if(typeof this.keyNumber == 'number' || !/\./g.test(this.screenShow) && this.keyNumber == '.') {
					if(store.state.resultCount > 0)
						store.commit('clearNum')
					store.commit('addNum', this.keyNumber)
				}
				if(/AC/.test(this.keyNumber))
					store.commit('clearNum')
				if(/[+|\-|*|/]/g.test(this.keyNumber))
					store.commit('computeNum', this.keyNumber)
				if(/=/.test(this.keyNumber))
					store.commit('resultNum')
				if(/X/.test(this.keyNumber))
					store.commit('backSpace')
				if(/%/.test(this.keyNumber))
					store.commit('precentNum')
				if(/by c/.test(this.keyNumber))
					store.commit('forMyLove')
			}
		}
	}
	
	var keyGroup = {
		props: ['showArr'],
		components: {
			'gxx-key': key
		},
		template: '#keyGroup'
	}
	
	var keyGroups = {
		data: function() {
			return {
				showArrs: {
					showArr1: ['AC', 'X', '/', '*'],
					showArr2: [7, 8, 9, '-'],
					showArr3: [4, 5, 6, '+'],
					showArr4: [1, 2, 3, '='],
					showArr5: ['%', 0, '.', 'by c']
				}
			}
		},
		template: '#keyGroups',
		components: {
			'gxx-key-group': keyGroup
		}
	}
	
	var calculator = {
		template: '#calculator',
		data: function() {
			return {
				screenClass: {
					screenState: true
				}
			}
		},
		computed: {
			showScreen: function() {
				return store.state.screenShow
			}
		},
		components: {
			'gxx-key-groups': keyGroups
		}
	}

	var vue = new Vue({
		el: '#ad',
		components: {
			'gxx-calculator': calculator
		}
	})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^