利用js实现手工调薪输入表达式代码



8 30 11



特效描述:利用js实现 手工调薪 输入表达式 代码,利用js实现手工调薪输入表达式代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="element-ui.css">
<link rel="stylesheet" type="text/css" href="element-ui.css">

2. 引入JS

<script src="vue.js"></script>
<script src="element-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="vue.js"></script>
<script src="element-ui.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--不需要引入-->
<!--不需要引入-->
<script src="vue.js"></script> 
<!--不需要引入-->
<style>
	/*必须写的样式样式*/
   .handSalary_wrap {
		background: #fff;
   }
   .handSalary_tittle {
		text-indent: 20px;
		line-height: 56px;
		font-size: 16px;
		color: #333333;
		letter-spacing: 0;
		border-bottom: 1px solid #D1DAE4;
   }
   .handSalary_content {
	padding: 20px;
   }
   .clearfix:after{
		display: block;
		clear: both;
		content:"";
   }
   .handSalary_content_left{
	float: left;
	margin-left: 130px;
	margin-right: 20px;
   }
   .handSalary_content_right{
	float: left;
   }
   .handSalary_content_money{
	font-family: "微软雅黑";
	font-size: 14px;
	color: #666666;
	letter-spacing: 0;
	line-height: 14px;
	margin-right: 10px;
	float: left;
   }
   .handSalary_content_reasons {
	font-family: "微软雅黑";
	font-size: 14px;
	color: #666666;
	letter-spacing: 0;
	line-height: 14px;
	margin-right: 10px;
	margin-top: 20px;
   }
   .handSalary_content_computed {
	float: left;
	width: 60px;
	height: 34px;
	margin-right: 10px;
	/*border: 1px solid  #D2D2D7;*/
	margin-bottom: 10px;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
   }
   .handSalary_content_computed:hover {
		transform: scale(1.1);
   }
</style>
</head>
<body style="background: #eee;margin: 0px;">
<div id="root">
	<!--复制DOM begin-->
		<div class="handSalary_wrap">
			<div class="handSalary_tittle">
        			手工调整
        		</div>
			<div class="handSalary_content clearfix">
        			 <div class="handSalary_content_left clearfix"> 
						<div class="clearfix">
							<span class="handSalary_content_money">金额:</span>
							<textarea  rows="9" cols="76" style="height: 202px;border-radius: 4px;border: none;border: 1px solid #D2D2D7; float: left;" v-model="textareaData"></textarea>
						</div>
						<div class="handSalary_content_reasons">
							说明:公式内容只支持由半角字符{()0-9+-*/[原薪薪额]}组成的表达式。例如:(10+20)*8-[原薪资额]
						</div>
				 </div>
				 <div class="handSalary_content_right">
					<div style="width: 288px;" class="clearfix">
						<div class="handSalary_content_computed" @click="selectionValue(item.content)" :style="{background:item.background,color:item.color}" v-for="item in calculatorData">{{item.content}}</div>
					</div>
				 </div>
        		</div>
		</div>
	<!--复制DOM over-->
</div>
<script>
	new Vue({
		el: '#root',
		data(){
			return{
				calculatorData:[
					{
						content:"(",
						background:"#DBDBDB",
						color: "#333333"
					},
					{
						content:")",
						background:"#DBDBDB",
						color: "#333333"
					},{
						content:"{",
						background:"#DBDBDB",
						color: "#333333"
					},{
						content:"}",
						background:"#DBDBDB",
						color: "#333333"
					},{
						content:"7",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"8",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"9",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"",
						background:"#DBDBDB",
						color: "#333333"
					},{
						content:"4",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"5",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"6",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"*",
						background:"#DBDBDB",
						color: "#333333"
					},{
						content:"1",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"2",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"3",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"-",
						background:"#DBDBDB",
						color: "#333333"
					},{
						content:"0",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:".",
						background:"#F5F5F5",
						color: "#333333"
					},{
						content:"原金额",
						background:"#3896FC",
						color: "#fff"
					},{
						content:"+",
						background:"#DBDBDB",
						color: "#333333"
					}
				],
				textareaData:""
			}
		},
		methods: {
			selectionValue(data){
				if(data=="原金额"){
					this.textareaData+="[原薪资额]";
				}else{
					this.textareaData+=data;
				}
			}
		}
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到