智慧查验Vue、elementUI使用总结

官方网站

Vuejs: https://cn.vuejs.org/v2/guide/installation.html
elementUI: http://element-cn.eleme.io/#/zh-CN/component/installation

全局引入

SEVS.Web/App_Start/BundleConfig.cs

SEVS.Web/Views/Shared/_Layout.cshtml

结合cshtml使用的经验

1、绑定事件: @click 要写成@@click --原因是@符号在cshtml中是个特殊值

2、按键修饰符: 官方文档是这样用的 @keyup.enter (enter键释放时触发事件),但是结合elementUI使用需要加一个关键词native.所以应该这样写 @keyup.native.enter

<el-input style="width: inherit;" id="searchId" value="" v-bind:minlength="3" :disabled="searchInput" @@keyup.native.enter="searchBtn">
    <el-select v-model="searchSelect" slot="prepend" placeholder="请选择" @@change="searchChange">
        <el-option label="集装箱号" value="container"></el-option>
        <el-option label="报关单号" value="entry"></el-option>
        <el-option label="查验单号" value="examin"></el-option>
        <!-- <el-option label="关员工号" value="officer"></el-option> -->
    </el-select>
    <el-button @@click="searchBtn" slot="append" icon="el-icon-search"></el-button>
</el-input>

3、基于第2条的代码,让下拉框默认选择集装箱号的方法就是直接赋予searchSelect一个container值

//搜索下拉框类型
searchSelect: "container",

4、v-for 使用索引index

<template v-for="(plat,index) in platDatas.examFields" v-cloak>

</template>

5、elementUI 组件中的属性值如果是布尔类型，可以直接绑定字符串true | false

<!-- 注意：不能直接写 enterable="false" --默认当作字符串来处理 -->
<el-tooltip class="item" effect="dark" placement="top" :enterable="false"></el-tooltip>

6、动态选择class

 <i :class="data.id === selectedExamSiteId ? 'fa fa-check-square fa-3x highlight':'fa fa-check-square fa-3x'" style="color: #00a65a" aria-hidden="true" v-else-if="data.statusCode=='examing'"></i>

注意书写格式，非绑定的值用单引号括起来

7、动态设置style

item.thumbnail是动态的

<div :style="'background-image:url('+ item.thumbnail + ');width:178px; height:100px; background-size: cover;text-align:center;vertical-align:central;'">
    <i class="fa fa-play-circle-o fa-3x " style="margin-top: 28px;" aria-hidden="true"></i>
</div>

8、过滤器

Vue 2.x 中，过滤器只能用在 mustache 绑定和 v-bind 表达式。

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

项目实例：

{{snippet.startTime | S}}


//S 定义在SEVS.Web/js/main.js
Vue.filter("F",
    function (value, formatString) {
        formatString = formatString || 'LL HH:mm:ss';
        return moment(value).format(formatString);
    });

Vue.filter("S",
    function (value, formatString) {
        formatString = formatString || 'LL';
        return moment(value).format(formatString);
    });



Vue.filter("T",
    function (value, formatString) {
        formatString = formatString || 'HH:mm:ss';
        return moment(value).format(formatString);
    });

Vue.filter("TS",
    function (value, formatString) {
        formatString = formatString || 'HH:mm';
        return moment(value).format(formatString);
    });

9、 element、vue 1.x版本的时候，<template></template> 标签中的范围属性使用的是scope,升级为2.x后变成了slot-scope
现在elementUI的官方示例已全部使用slot-scope。

10、 使用el-dialog时建议加上属性before-close，用于清理资源

<el-dialog :title="examDialogField.examFieldName" :before-close="closeDialog" :visible.sync="spDialog" v-cloak>
</el-dialog>

10、 日期时间组件，默认的格式可能不是我们想要的，所以我们需要指定一个value-format属性

<el-date-picker type="datetime" placeholder="选择开始日期" v-model="complexSearchObj.from" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

11、 watch使用实践：

//检测浏览器窗口的变化
screenWidth:document.body.clientWidth,


watch:{
    screenWidth:function(val){
        //限制频繁触发
        if (!this.timer) {
            this.timer = true;
            var that = this;
            setTimeout(function(){
                that.timer = false;
            },1000);

            //业务处理
            playBtnCenter();
        }
    }
},