VUE工具文件

Posted 2021-05-25 知青先生

目录

• • • • • 工具文件
        • 工具文件
        • 引用方式
        • 元素高度动态设置

工具文件

/*
 工具文件
 */
var app = {
  /**
   * 获取当前时间
   */
  getCurrentDateTime: function() {
    const year = new Date().getFullYear();
    const month = new Date().getMonth() + 1 < 10 ? "0" + new Date().getMonth() + 1 : new Date().getMonth() +
      1;
    const date = new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate();
    const hh = new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours();
    const mm = new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes();
    const ss = new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds();
    const dateTime = year + month + date + hh + mm + ss;
    return dateTime;
  },


  /**
   * 生成uuid 10
   */
  uuid: function() {
    var s = [];
    var hexDigits = "0123456789abcdefghijklnopqrstuwvsyzABCDEFGHIJKLNOPQRSTUWVSYZ";
    for (var i = 0; i < 10; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[5] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[8] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[6] = s[4] = s[8] = s[9];
    return s.join("");
  },

  /**
   * 生成指定格式的时间
   * @param {*} timeStemp 时间戳
   * @param {*} flag 格式符号
   */
  formatTime: function(timeStemp, flag) {
    let time = new Date(timeStemp);
    let timeArr = [time.getFullYear(), time.getMonth() + 1, time.getDate()];
    return timeArr.join(flag || '/')
  },


  /**
   * @param {Object} data 入参对象
   * 判空处理
   */
  isEmpty: function(data) {
    if (data == null || data == "" || data.length <= 0 || typeof(data) == "undefined") {
      return true;
    }
    return false;
  },
  /**
   * @param {Object} key 目录id
   * @param {Object} value  目录数组
   */
  isArrayVal: function(key, value) {
    if (app.isEmpty(value) && app.isEmpty(key)) {
      return;
    } else { //根据key返回value
      for (var index in value) {
        if (value[index].id === key) {
          return value[index].topicName;
        }
      }
      return "";
    }
  },
  /**
   * @param {Object} key 主题key | 样式key --返回key
   * @param {Object} value 主题数组|样式数组
   */
  getIsSubjectId: function(key, value) {
    if (app.isEmpty(key) || app.isEmpty(value)) {
      return "";
    }
    return value.get(key);
  },
  /**
   * @param {Object} key 主题key | 样式key  移除key
   * @param {Object} value 主题数组|样式数组
   */
  removeIsSubjectId: function(key, value) {
    if (app.isEmpty(key) || app.isEmpty(value)) {
      return "";
    }
    return value.delete(key);
  },
  /**
   * @param {Object} key 主题key | 样式key --跟新key
   * @param {Object} value 主题数组|样式数组
   */
  setIsSubjectId: function(key, value, obj) {
    /* if (app.isEmpty(key) || app.isEmpty(value)) {
      return "";
    } */
    return obj.set(key, value);
  },
  clearshowWayListId: function(data) {
    if (app.isEmpty(data)) {
      return "";
    }
    if (data.length < 32) {
      return "";
    }
    return data;
  },
  /**
   * 获取对应的中文相等符号
   * @param {Object} data
   */
  compachToData: function(data) {
    if (app.isEmpty(data)) {
      return;
    }
    switch (data) {
      case "大于":
        return ">";
        break;
      case "大于等于":
        return ">=";
        break;
      case "小于":
        return "<";
        break;
      case "小于等于":
        return "<=";
        break;
      case "等于":
        return "==";
        break;
      default:
        "";
    }
  },
  /**
   * @param {Object} rgba 16进制颜色转换
   */
  hexify: function(rgba) {
    if (app.isEmpty(rgba)) {
      return;
    }
    var values = rgba
      .replace(/rgba?\\(/, '')
      .replace(/\\)/, '')
      .replace(/[\\s+]/g, '')
      .split(',');
    var a = parseFloat(values[3] || 1),
      r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
      g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
      b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
    return "#" +
      ("0" + r.toString(16)).slice(-2) +
      ("0" + g.toString(16)).slice(-2) +
      ("0" + b.toString(16)).slice(-2);

  },
  /**
   * @param {Object} data rgpa中获取透明度
   */
  tmdToData: function(data) {
    if (app.isEmpty(data)) {
      return;
    }
    return data.split(",")[3].substring(0, data.split(",")[3].length - 1)
  },
  /**
   * @param {Object} arrayData 显示方式 数组
   * @param {Object} displayId 显示方式code
   */
  toDisplayIdArray: function(arrayData, displayId) {
    if (app.isEmpty(arrayData) || app.isEmpty(displayId)) {
      return "";
    }
    for (var i = 0; i < arrayData.length; i++) {
      if (arrayData[i].code == displayId) {
        return arrayData[i].name;
      }
    }
    return "";
  },
 //消息提醒  info|success|warning|error
      msgSubDialog: function(_this,type, content) {
            _this.$Message[type]({
              background: true,
              content: content
            });
      },
}
export default app;

工具文件

/*
 常量文件
 */
var config={
    //自定义key
    SHO_WWAY_KEY:"xxxx"
};
export default config;

引用方式

import Tool from '../../assets/js/tools';
import Constant from '../../assets/js/config';
--全局绑定
Vue.prototype.$tool = Tool;
Vue.prototype.$constant = Constant;

元素高度动态设置

模板标签

<Col span='8'  ref="page" :style="styleVal">

JS

参数
clientHeight: '',
styleVal:{
            height:'',
            'border:border': '1px solid #dcdee2',
          }
mounted:function(){获取浏览器可视区域高度
this.clientHeight = document.documentElement.clientHeight;
            let that = this;
            window.onresize = function(){//窗口事件：onresize 事件会在窗口或框架被调整大小时发生。
               that.clientHeight =  document.documentElement.clientHeight;
                if(that.$refs.page){
                    that.styleVal.height= (that.clientHeight - 280 )+'px';
                }
            }
},
 watch:{
       clientHeight(){     //如果clientHeight值 发生改变，这个函数就会运行
             this.changeFixed(this.clientHeight)
          }
    },
    methods: {//执行的方法体
      changeFixed(clientHeight){
　　　　if(this.$refs.page){
　　　　　　 this.styleVal.height= clientHeight  - 280  + 'px';
　　　　}
　　}