vue+ElementUI使用笔记
1,使用表单验证:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//定义验证规则 window.varifyUtil = { //验证数字 validateNumber: function(rule, value, callback){ if (!isGreaterZero(value)) { return callback(new Error("请输入数字类型")); } callback(); }, //验证身份证号 validateIdcard: function(rule, value, callback){//身份证验证 var reg = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/ if (value && !reg.test(value)) { return callback(new Error('身份证号码格式有误')); } callback(); }, validateIdcardRequired: function(rule, value, callback){//身份证验证 var reg = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/ if (!value || !reg.test(value)) { return callback(new Error('身份证号码格式有误')); } callback(); }, //验证手机 validateMobile: function(rule, value, callback){ var reg = /^1\d{10}$/ if (value && !reg.test(value)) { return callback(new Error('电话号码格式有误')); } callback() }, //验证手机 validateMobileRequired: function(rule, value, callback){ var reg = /^1\d{10}$/ if (!reg.test(value)) { return callback(new Error('电话号码格式有误')); } callback() }, //验证电话号码 validateTel: function(rule, value, callback){ var reg = /^[\d\+\*-]+$/ if (value && !reg.test(value)) { return callback(new Error('电话号码格式有误')); } callback() }, //验证电话号码 validateTelRequired: function(rule, value, callback){ var reg = /^[\d\+\*-]+$/ if (!reg.test(value)) { return callback(new Error('电话号码格式有误')); } callback() }, //验证邮箱 validateEmail: function(rule, value, callback){ var reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/ if (value && !reg.test(value)) { return callback(new Error('Email地址格式有误')); } callback() }, //验证密码 validatePwd: function(rule, value, callback){ var reg = /^(\w){6,16}$/ //'[A-Za-z0-9_]' if(!value){ return callback(new Error('请输入密码')); }else if (!reg.test(value)) { return callback(new Error('密码由字母、数字、下划线组成,长度为6~16个字符')); } callback() }, validateBankNo: function(rule, value, callback){ var reg = /^\d{16,19}$/ if(value && !reg.test(value)) { return callback(new Error('银行卡号格式有误')) } callback(); } }
<!--from表单:--> <el-dialog title="补全机构信息" :visible.sync="dialogEnterpriseVisible"> <el-form :model="enterpriseForm" :rules="enterpriseFormRules" ref="enterpriseForm"> <el-form-item label="机构类型:" prop="func_type"> <el-select v-model="enterpriseForm.func_type" placeholder="机构类型"> <el-option v-for="ft in functypes" :key="ft.name" :value="ft.name" :value="ft.name"></el-option> </el-select> </el-form-item> <el-form-item label="机构名称:" prop="name"> <el-input v-model="enterpriseForm.name" placeholder="机构名称"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogEnterpriseVisible = false">取 消</el-button> <el-button type="primary" @click="AddEnterprise">继续</el-button> </div> </el-dialog> <!--数据:--> functypes:[], enterpriseForm:{ func_type:'', name:'' }, enterpriseFormRules:{ func_type:[{required: true, message: '请选择机构类型', trigger: 'change'}], name:[{required: true, message: '请输入机构名称', trigger: 'blur'}] }, <!--方法:--> AddEnterprise:function(){ var vm = this vm.$refs['enterpriseForm'].validate(function (valid) { if(valid){ }else{ } }) }
单独对一个input验证: vm.$refs['user'].validateField("name")
vm.$refs['user'].validateField("mobile",function(msg){ if(msg!=null&&msg!="")return else { alert("asdasd") } })
①文本验证 {required: true, message: '请输入项目名称', trigger: 'blur'}
②下拉框验证 {required: true, message: '请选择项目类型', trigger: 'change'}
③自定义验证
{ required: true, validator: validateRegion, trigger: 'change' }
function validateRegion(rule, value, callback) {
if (!VM.selectedProvince || !VM.selectedCity || !VM.selectedArea) {
return callback(new Error('请选择省市区'));
}
callback();
};
④长度验证 {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
⑤日期选择验证 { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
⑥金额验证(可有小数点):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function validatorApplyAmountRequired(rule, value, callback) { if (value == '' || value == null) { return callback(new Error("输入不能为空")); } if (!isGreaterZeroNumber(value)) { return callback(new Error("请输入格式有误")); } callback(); }; //验证V是否是大于0 function isGreaterZeroNumber(v) { if (isNaN(v) || !v) { return false; } if (v < 0) { return false; } return true; }
⑦值下拉框验证:
[{required: true,type:"number",message: '请选择项目', trigger: 'change'}]
2,返回上一级
handleBack: function(obj){ window.location.href = document.referrer; //window.history.go(-1) 不刷新 }
3,调用子iframe里面的方法
<!-- page content begin --> <div class="main" id="main"> <iframe id="mainFrame" name="mainFrame" src="" width="100%" height="100%" frameborder=0 style="background-color: transparent;"></iframe> </div> <!-- page content end --> //调用子页面flushSubData方法 try{ $(window.parent.document).contents().find("#mainFrame")[0].contentWindow.flushSubData(); }catch(err){}
3,input效果
<el-input class="input-m" type="number" min="0" v-model.trim="formProject.months"> <template slot="append"> 月 </template> </el-input>
4,使用Echarts
①快速使用Echarts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
②使用主题
下载主题:http://echarts.baidu.com/download-theme.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script src="echarts.js"></script> <!-- 引入 vintage 主题 --> <script src="theme/vintage.js"></script> <script> // 第二个参数可以指定前面引入的主题 var chart = echarts.init(document.getElementById('main'), 'vintage'); chart.setOption({ ... }); </script>
③vue使用Echarts案例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta content="瓯云" name="description"> <meta content="瓯云" name="author"> <link href="/favicon.ico" rel="icon" type="image/x-icon" /> <title>劳动力分析</title> <link rel="stylesheet" href="../../lib/elementui/elementui-1.4.1.css"> <link rel="stylesheet" href="../../css/common.css?v=20171219001" /> <link rel="stylesheet" href="../../css/console.css?v=20171219001" /> <script src="../../lib/jquery-1.9.1.min.js"></script> <script language="javascript" src="../../lib/jquery.base64.js"></script> <script src="../../lib/jquery.cookie.js"></script> <script src="../../lib/elementui/vue-2.4.2.js"></script> <script src="../../lib/elementui/elementui-1.4.1.js"></script> <script src="../../lib/echarts/echarts-3.6.2.min.js"></script> <script src="../../lib/echarts/macarons.js"></script> <script src="../../lib/JSLINQ.js"></script> <script src="../../js/console.js?v=20171219001"></script> <script src="../../js/utils.js?v=20171219001"></script> </head> <body class="frame-body"> <div class="wrap" id="oyunVue" v-loading.fullscreen.lock="loading" element-loading-text=""> <!-- 导航条 --> <div class="breadcrumb clearfix"><h2>劳动力分析</h2></div> <!-- 搜索条件 start --> <div class="clearfix"> <el-form :model="searchForm" :inline="true" class="demo-form-inline"> <el-form-item> <el-select v-model="searchForm.org_name" clearable placeholder="请选择"> <el-option v-for="item in groupData" :key="item.ent_name" :label="item.ent_name" :value="item.ent_name"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button :loading="searchLoading" type="primary" icon="search" @click="fnSearch">搜索</el-button> </el-form-item> </el-form> </div> <el-tabs v-model="activeName"> <el-tab-pane label="工种分布表" name="first"> <div id="worktype" style="width: 800px;height:400px;margin-left: 100px;margin-top: 20px"></div> </el-tab-pane> <el-tab-pane label="籍贯分布表" name="second"> <div id="native" style="width: 800px;height:400px;margin-left: 100px;margin-top: 20px"></div> </el-tab-pane> <el-tab-pane label="年龄段分布表" name="third"> <div id="age" style="width: 800px;height:400px;margin-left: 100px;margin-top: 20px"></div> </el-tab-pane> </el-tabs> </div> <script> var vueOptions = { data: { activeName: 'first', getGroupDataApi:"ProjectEnterprise/GetList", groupData:[], searchForm: { prj_id: '', org_name: '', }, worktypeData:[], worktypeChart:{}, nativeChart:{} }, mounted: function() { this.pageAuth(747981802455041) this.projectAuth() this.getgroups() this.fnSearch() this.worktypeChart = echarts.init(document.getElementById('worktype'),"macarons"); this.nativeChart = echarts.init(document.getElementById('native'),"macarons"); this.ageChart = echarts.init(document.getElementById('age'),"macarons"); }, methods: { //查询班组 getgroups:function(){ var vm=this var option={ data:{ pageindex:1, pagesize:9999, parameter:{ prj_id:getCurrentProjectId() } }, route:vm.getGroupDataApi, success:function(res){ vm.groupData=res.data } } $.ajaxExt(option) }, fnSearch:function(){ this.getgroups() this.fnGetWorktype() this.fnNative() this.fnAge() }, fnAge:function(){ var vm=this vm.searchForm.prj_id=getCurrentProjectId() var option={ data:{ parameter:vm.searchForm }, route:'UsrEmployee/GetEmployeeAgeStatistics', success:function(res) { if(res.ret!=0||res.data==''||res.data==null||res.data.length<=0) { vm.ageChart.setOption(vm.fnAgeChart("年龄段分布统计",[],[])) return; } var fullnames= JSLINQ(res.data).Select(x=>x.fullname).ToArray(); var data= JSLINQ(res.data).Select(x=>x.age).ToArray(); // var data= new Array() // for(var i=0;i<res.data.length;i++) // { // data.push({value:res.data[i].age,name:res.data[i].fullname}) // } vm.ageChart.setOption(vm.fnAgeChart("年龄段分布统计",fullnames,data)) } } $.ajaxExt(option) }, fnNative:function(){ var vm=this vm.searchForm.prj_id=getCurrentProjectId() var option={ data:{ parameter:vm.searchForm }, route:'UsrEmployee/GetEmployeeNativeStatistics', success:function(res) { if(res.ret!=0||res.data==''||res.data==null||res.data.length<=0){ vm.nativeChart.setOption(vm.fnPieChart("籍贯分布统计",[],[])) return; } var natives= JSLINQ(res.data).Select(x=>x.native).ToArray(); var data= new Array() for(var i=0;i<res.data.length;i++) { data.push({value:res.data[i].count,name:res.data[i].native}) } vm.nativeChart.setOption(vm.fnPieChart("籍贯分布统计",natives,data)) } } $.ajaxExt(option) }, fnGetWorktype:function(){ var vm=this vm.searchForm.prj_id=getCurrentProjectId() var option={ data:{ parameter:vm.searchForm }, route:'UsrEmployee/GetEmployeeWorktypeStatistics', success:function(res) { if(res.ret!=0||res.data==''||res.data==null||res.data.length<=0) { vm.worktypeChart.setOption(vm.fnPieChart("工种分布统计",[],[])) return; } var worktypes= JSLINQ(res.data).Select(x=>x.worktype).ToArray(); var data= new Array() for(var i=0;i<res.data.length;i++) { data.push({value:res.data[i].icount,name:res.data[i].worktype}) } vm.worktypeChart.setOption(vm.fnPieChart("工种分布统计",worktypes,data)) } } $.ajaxExt(option) }, fnPieChart:function(title,names,datas){ var option = { title : { text: title, x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:names }, calculable : true, series : [ { name:'访问来源', type:'pie', radius : '55%', center: ['50%', '60%'], data:datas } ] }; return option; }, fnAgeChart:function(title,names,datas) { var option = { title : { text: title, }, tooltip : { trigger: 'axis' }, legend: { data:['年龄'] }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : names } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value}岁' } } ], series : [ { name:'年龄', type:'line', data:datas, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ] }; return option; } } } var VM = createVue(vueOptions); $(function(){ $('#advancedSearch').on('keypress',function(e){ if(e.keyCode == '13') { VM.fnSearch(); return false; } }) }) function flushSubData(){ VM.fnSearch() VM.projectAuth() } </script> </body> </html>
④设置x、y轴字体颜色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
xAxis : [
{
type : 'category',
data : ['木工', '水泥工', '瓦工', '钢筋工', '油漆工', '塔吊工', '后勤人员'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
}
],
yAxis : [
{
type : 'value',
splitLine: {
show: false
},
axisLabel : {
formatter: '{value}',
textStyle: {
color: '#fff'
}
}
}
],
5,JSLINQ使用
官网:https://archive.codeplex.com/?p=jslinq
包/案例下载:https://pan.baidu.com/s/14QZvQ7gcEmhxoFV1fT-Mvw
①引入js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script src="../../lib/JSLINQ.js"></script>
②简单使用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var natives= JSLINQ(res.data).Select(x=>x.native).ToArray();
学习永不止境,技术成就梦想。