vue基础知识

@路径的配置

chainWebpack: (config) => {
        config.resolve.alias.set("@", resolve("src"))
}

如果在css中,需引用~@

background: url(~@/imgs/icon-arrow.png) no-repeat 50%;

如果是在js中或网络路径,需使用require转成静态

require('@/imgs/loading-svg/loading-bars.svg')

 

过滤器filters的定义

toTypeString(value){
    const typeArr = [
          '1',
          '2',
          '3'
    ]
    return typeArr[value]
}

过滤器filters的使用

<!-- 在括号中 -->
{{ type | toTypeString}}

<!-- 在 v-bind 中 -->
<div v-bind:id="type | toTypeString"></div>

<!-- 在 el-table-column 中 -->
<el-table-column label="交易类型" align="center" >
    <template scope="scope">
         {{ scope.row.type | toTypeString }}
    </template>
</el-table-column>

修改第三方组件样式需要加deep

.offline-radio{border-left:1px solid #DCDFE6 !important; margin:0 10px 10px 0;}
.offline-radio /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner{
    background: #1890ff; border-radius:0;
}