杂论：工作遇见的可服用代码块（vue项目）

1.代码请求参数封装📦

const defaultParam = {
  paramsA:'',
  paramsB:'',
};
objectParams: Object.assign({}, defaultParam),

2.检测输入框中参数都不为空

/*
watch里监听，常结合动态类实现不同输入情况按钮样式变化，遇见问题如：未检测到所有数据，
*/
objectParamsInfo:{
  handler(val, oldVal){
    let  params  = val
    this.isnotEmptyAuth  = this.checkAttrs(params)
  },
  deep:true

 //检测所有都不为空,检测方法很多，欢迎评论区留言
    checkAttrs(obj) {
      let flag = true;
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] === null || obj[key] === "") {
            flag = false;
          }
        }
      }
      if (flag) {
        return true;
      } else {
        return false;
      }
    },

解决倒计时，刷新之后清除问题

//利用sessionStorage存时间防止丢失，页面create就从sessionStorage拿取时间，之后触发倒计时方法，别忘了先自定义一个60s。
//流程：页面最初先取页面内自定义的倒计时时间，之后按钮触发倒计时方法，把倒计时时间往sessionStorage存，可以看到sessionStorage中也在同时变化，刷新触发获取倒计时时间的方法，获取到在触发倒计时时间，从而实现。

this.gettimesCode() //获取倒计时时间

 //倒计时
    getCode() {
      this.showTimes = false
      this.timer = setInterval(()=>{
        this.times--
        window.sessionStorage.setItem('timeCode',this.times)
        if(this.times===0){
          this.showTimes = true
          clearInterval(this.timer)
          this.times = 60
        }
      },1000)
    },

 //获取倒计时时间
    gettimesCode(){
      let timeCode = window.sessionStorage.getItem('timeCode')
      if (timeCode !=null && timeCode != 0){
        this.times = timeCode
        this.getCode()
      }
    },

//props ✍️规范

props: {
    demoString: {
      type: String,
      default: ''
    },
    demoNumber: {
      type: Number,
      default: 0
    },
    demoBoolean: {
      type: Boolean,
      default: true
    },
    demoArray: {
      type: Array,
      default: () => []
    },
    demoObject: {
      type: Object,
      default: () => ({})
    },
    demoFunction: {
      type: Function,
      default: function () { }
    }
  }

//flex布局封装 📦 

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-around{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
p{
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

elm分页组件的封装

import Pagination from "@/components/Pagination";

// 全局组件挂载
Vue.component('Pagination', Pagination)


<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to' //为了实现请求完置顶效果，也可以自行实现

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  /*padding: 32px 16px;*/
}
.pagination-container.hidden {
  display: none;
}

</style>

//使用方式
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

vue动态添加style样式
规范书写：
凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff

html :style="{color:( 判断 ?conFontColor:'#000')}"
例子：
html :style="{color:(index==0?conFontColor:'#000')}"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"
<i class="iconfont"  :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>

//超出隐藏

    display: -webkit-box;
    -webkit-line-clamp:2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;

//js倒计时

 //倒计时
      countdown() {
        let day = parseInt(this.msec / 1000 / 60 / 60 / 24);
        let hr = parseInt((this.msec / 1000 / 60 / 60) % 24);
        let min = parseInt((this.msec / 1000 / 60) % 60);
        let sec = parseInt((this.msec / 1000) % 60);
        this.day = day;
        this.hr = hr > 9 ? hr : "0" + hr;
        this.min = min > 9 ? min : "0" + min;
        this.sec = sec > 9 ? sec : "0" + sec;
        const that = this;
        this._interval = setTimeout(function() {
          that.countdown();
          that.msec=that.msec-1000;
        }, 1000);
      }

export default {
    phone:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    password:/^[\s\S]{6,18}$/,
    authCode:/^[0-9]{6}$/,
    url:/(^https?:)|(^\.)/,//合法url，http或https
}