vue+ElementUI使用筆記

時間 2019-12-10

標籤 vue+elementui vue elementui 使用筆記简体版

原文原文鏈接

1，使用表單驗證：javascript

//定義驗證規則
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") css

vm.$refs['user'].validateField("mobile",function(msg){
                        if(msg!=null&&msg!="")return
                        else
                        {
                            alert("asdasd")
                        }

                    })

①文本驗證 {required: true, message: '請輸入項目名稱', trigger: 'blur'} html

②下拉框驗證 {required: true, message: '請選擇項目類型', trigger: 'change'} vue

③自定義驗證java

{ 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'} jquery

⑤日期選擇驗證 { type: 'date', required: true, message: '請選擇時間', trigger: 'change' } ajax

⑥金額驗證（可有小數點）：cookie

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;
}

View Code

⑦值下拉框驗證：app

[{required: true,type:"number",message: '請選擇項目', trigger: 'change'}]

2，返回上一級echarts

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

引入jse

<!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

<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案例

<!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軸字體顏色

 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'
                                    }
                                }
                            }
                        ],

demo

5，JSLINQ使用

官網：https://archive.codeplex.com/?p=jslinq

包/案例下載：https://pan.baidu.com/s/14QZvQ7gcEmhxoFV1fT-Mvw

①引入js

<script src="../../lib/JSLINQ.js"></script>

View Code

②簡單使用

var natives= JSLINQ(res.data).Select(x=>x.native).ToArray();

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。