vue 实践中的一些小技巧

1 数据过滤：

经常会在项目中用到数据过滤，如何让代码更优雅？以下是在项目中使用到的一些小技巧：

场景。

codeArr:[

{projectNum:'123123123312',name:'coco',age:20,gender:'formale',applayNum:'24124126417'},

{projectNum:'123123123345',name:'joco',age:20,gender:'formale',applayNum:'212312312313'},

{projectNum:'123123123234',name:'koco',age:22,gender:'formale',applayNum:'24124126417'},

{projectNum:'123123123312',name:'aoco',age:34,gender:'formale',applayNum:'54666456456'},

{projectNum:'123123123302',name:'poco',age:34,gender:'formale',applayNum:'345345345345'},

]

以上数据，当我们要展示时。如果当前的projectNum的结尾是312，则显示projectNum，而如果不是312结尾，则会显示applayNum。

技巧一：利用filters（过滤器）

 <p v-for='(item,index) in codeArr' :key='index'>

<span>项目单号{{ item | getNum(item) }}</span>

<span>姓名{{item.name}}</span>

<span>年龄{{item.age}}</span>

</p> 

在export default{}中添加filters过滤器选项

filters:{

getNum(item){

return Number(item.projectNum.substring(item.projectNum.length-3))===312?item.projectNum:item.applayNum

}

},

然后在html结构中通过管道 | ,前面是参数，后面是过滤的函数。这样就能在模板语法{{  }}中显示过滤以后的数据

方法2：重新改造数据。我们给数据添加一个新的字段newCode计算其最后的值，然后在v-for循环后直接取newCode即可

<p v-for='(item,index) in filteredArr' :key='index'>

<span>项目单号{{ item.newCode }}</span>

<span>姓名{{item.name}}</span>

<span>年龄{{item.age}}</span>

</p>

然后在export default {}对象中设置

computed:{

filteredArr(){

return this.codeArr.map(item=>{

return {...item,newCode:Number(item.projectNum.substring(item.projectNum.length-3))===312?item.projectNum:item.applayNum }

})

}

}

2 如何实现flex布局下多行显示最后一行居左对其？

.upload_wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.upload_wrapper:after {
    content: "";
    flex: auto;
 }

3 如何实现一个结构多种样式展现？

 

如图：左侧的缩略图，如果有3中展示方式。如果只有一张图片。全屏展示。两张图片则采用上下排列同时固定大小为70，三张以上则采用左侧田字格方式展示？如何实现这个效果？

这里我们采用computed去设置一个objClass，然后根据不同的图片数量。返回不同的样式。我们封装了一个缩略图组件，代码如下：

  <div class="thumb-box">

        <div :class="objClass" :style="{width:width+'px',height:height+'px'}">

            <li v-for="(item,index) in imgData" :key="index">

                <img :src="item" alt="">

            </li>

        </div>

    </div>

export default {

  name:"thumbImg",

  components: {},

  computed:{

      objClass(){

          console.log("this.imgData.length:",this.imgData)

        if(this.imgData.length==1){

            return "thumb-one center"

        }else if(this.imgData.length==2){

            return "thumb-two"

        }else{

            return "thumb-three"

        }

      }

  },

  props: {

    width:{

          type:[Number,String],

          default:160,

    },

    height:{

        type:[Number,String],

        default:160,

    },

    imgData:{

        type:Array,

        default:[]

    }

  },

<style scoped lang="scss">

 

.item{

    width: 100%;

    height: 100%;

}

img{object-fit: contain;width: 100%; height: 100%;;}

.thumb-one{

    

}

.thumb-two{

    display: flex;

    flex-direction: column;

    align-items: center;

    li{width: 70px; height: 70px;margin: 5px;} 

 

}

.thumb-three{

    display: flex;

    box-sizing:border-box;

    justify-content: space-between;

    flex-wrap: wrap;

    flex-direction: row;

    overflow: hidden;

    li{width:40%; height: 45%;margin: 5px;} 

}

3 全局组件的使用。避免过多import->component->

导入组件的一般步骤：

（1）import navBar from “@component/navBar”

（2）在当前组件的component上挂载 

 export default{

   components:{navBar }

 }

(3)在页面结构中引用组件

<template>

<div>

<navBar></navBar>

</div>

</template>

如果有一个页脚的结构我们写成了一个组件。需要在页面很多地方都引用。如果还按照这三个步骤来。整个项目将会多出很多代码。这时候我们可以考虑全局组件

步骤：（1）在项目结构中新建一个文件夹，专门用来处理这类全局组件。比如globalComps。

           （2）新建一个js文件用来封装这类全局组件的注册

import Vue from "vue"

function capitalizeFirstLetter(string) {

    return string.charAt(0).toUpperCase() + string.slice(1);

}

// / 找到globalComps文件夹下以.vue命名的文件

const requireComponent = require.context("../../globalComps", false, /\.vue$/); 

requireComponent.keys().map((fileName) => {

    const componentConfig = requireComponent(fileName);

    const name = fileName.replace(/^\.\//, "").replace(/\.\w+$/, "");

    const componentName = capitalizeFirstLetter(name);

    Vue.component(componentName, componentConfig.default || componentConfig);

});

注意引用的路径，const requireComponent = require.context("../../globalComps", false, /\.vue$/); 这里面的globalComps是用来存放全局组件的目录

（3）把这个文件在main.js里导入即可

import "./common/js/globalComps.js"