iview DatePicker 最近一周最近一天 cookies函数过期时间使用自定义指令控制权限

最新推荐文章于 2023-12-15 17:58:33 发布

原创最新推荐文章于 2023-12-15 17:58:33 发布 · 940 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了一系列实用的JavaScript工具函数，包括操作cookies、日期处理、时间范围选择、权限控制等，适用于各种前端项目需求。

Util.js是对常用函数的封装，方便在实际项目中使用。

保存cookies函数

module.exports = {

    /*
     功能：保存cookies函数
     参数：name, cookie名字; value, 值; time(天), 过期时间
     */
    setCookie: function (name, value, time) {
        var days = time;   //cookie 保存时间
        var exp = new Date();  //获得当前时间
        exp.setTime(exp.getTime() + days * 24 * 3600 * 1000);  //换成毫秒
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    },
    /*
     功能：获取cookies函数
     参数：name, cookie名字
     */
    getCookie: function (name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) {
            return unescape(arr[2]);
        } else {
            return null;
        }
    },
    /*
     功能：删除cookies函数
     参数：name, cookie名字
     */
    delCookie: function (name,domain) {
        var exp = new Date();  //当前时间
        exp.setTime(exp.getTime() - 1);//当前时间减去一,相当于立即过期(可以增减)
        var cval = this.getCookie(name);
        if (cval != null) document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+"; path=/;domain="+domain;////expires是对应过期时间的设置,不设这个值,cookie默认在关闭浏览器时失效
    }

}

获取两个日期之间的所有日期

// 获取两个日期之间的所有日期
getAllDate: function (begin, end) {
    let results = [];
    var ab = begin.split("-");
    var ae = end.split("-");
    var db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    var de = new Date();
    de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    var unixDb = db.getTime();
    var unixDe = de.getTime();
    for (var k = unixDb; k <= unixDe;) {
        results.push((new Date(parseInt(k))).format('yy-MM-dd'));
        k = k + 24 * 60 * 60 * 1000;
    }
    return results;
},

获取两个日期之间的所有小时

getAllDateHour: function (begin, end) {
    let results = [];
    var ab = begin.split("-");
    var ae = end.split("-");
    var db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    var de = new Date();
    de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    var unixDb = db.getTime();
    var unixDe = de.getTime();
    for (var k = unixDb; k <= unixDe;) {
        for (var i = 0; i < 24; i++) {
            if (i < 10) {
                results.push((new Date(parseInt(k))).format('yy-MM-dd') + " 0" + i+":00");
            } else {
                results.push((new Date(parseInt(k))).format('yy-MM-dd') + " " + i+":00");
            }
        }
        k = k + 24 * 60 * 60 * 1000;
    }
    return results;
},

获取初始化时间，默认最近一周

// 获取初始化时间，默认最近一周
getDefaultDate() {
  let start = this.getDays(-7);
  let end = this.getDays(0);
  start.setStart();
  end.setEnd();
  // let start = this.getHoursTime(-1);
  // let end = this.getHoursTime(0);
  start = this.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
  end = this.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
  this.selectDate = [start, end];
},
getHoursTime(hours) {
  const today = new Date().getTime();
  const date = new Date(today + (hours * 60 * 60 * 1000));
  return date;
},
// 初始化日期
getDays(days) {
  const today = new Date().getTime();
  const date = new Date(today + (days * 24 * 60 * 60 * 1000));
  return date;
},
formatDate(date, type) {
  const yy = date.getFullYear();
  const dateM = date.getMonth() + 1;
  const mm = dateM > 9 ? dateM : `0${dateM}`;
  const dateD = date.getDate();
  const dd = dateD > 9 ? dateD : `0${dateD}`;
  if (type) {
    return `${yy}${type}${mm}${type}${dd}`;
  }
  return `${yy}${mm}${dd}`;
},

获取当前时间上个月前12个月的第一天

//获取当前时间上个月前12个月的第一天
getCurrentMonthFirst(date){
  var date = new Date(date);
  date.setDate(1);
  var month = parseInt(date.getMonth() + 2);
  var day = date.getDate();
  if (month < 10) {
      month = '0' + month
  }
  if (day < 10) {
      day = '0' + day
  }
  return (date.getFullYear() - 1) + '-' + month + '-' + day;
},

获取当前时间上个月的最后一天

//获取当前时间上个月的最后一天
getCurrentMonthLast(date){
   var nowdays = new Date(date);
   var year = nowdays.getFullYear();
   var month = nowdays.getMonth();
   if(month==0){
       month=12;
       year=year-1;
   }
   if (month < 10) {
       month = "0" + month;
   }
   var lastDay = new Date(year, month, 0);
   var lastDayOfPreMonth = year + "-" + month + "-" + lastDay.getDate();//上个月的最后一天
   return lastDayOfPreMonth;
},

近一年的日期

// 近一年的日期
getPassYearFormatDate(date) {
  var nowDate = date;
  var date = new Date(nowDate);
  date.setDate(date.getDate()-365);
  var seperator1 = "-";
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
      month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
  }
  var currentdate = year + seperator1 + month + seperator1 + strDate;
  return currentdate;
},

上个月的日期

// 上个月的日期
getPreMonth(date) {
  var arr = date.split('-');
  var year = arr[0]; //获取当前日期的年份
  var month = arr[1]; //获取当前日期的月份
  var day = arr[2]; //获取当前日期的日
  var days = new Date(year, month, 0);
  days = days.getDate(); //获取当前日期中月的天数
  var year2 = year;
  var month2 = parseInt(month) - 1;
  if (month2 == 0) {
      year2 = parseInt(year2) - 1;
      month2 = 12;
  }
  var day2 = day;
  var days2 = new Date(year2, month2, 0);
  days2 = days2.getDate();
  if (day2 > days2) {
      day2 = days2;
  }
  if (month2 < 10) {
      month2 = '0' + month2;
  }
  var t2 = year2 + '-' + month2 + '-' + day2;
  return t2;
},

vue iview table 点击表格行，触发checkbox

1、stopPropagation方法简言之，只能阻止父类元素的冒泡,
2、stopImmediatePropagation方法，简言之，既能阻止父类元素冒泡，也能阻止同类事件的执行。父元素不会执行同类事件，该元素执行完当前事件，绑定的同类事件也不会执行。
举例

setTimeout(() => { // 点击表格行，触发checkbox
 const trList = Array.from(document.getElementsByClassName('ivu-table-row'));
 console.log(trList);
 trList.forEach((tr) => {
   console.log(tr);
   tr.addEventListener('click', (e) => {
     e.stopImmediatePropagation();
     console.log(e);
     if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'A') {
       if (tr.getElementsByTagName('label')[0]) {
         const ttr = tr.getElementsByTagName('label')[0];
         console.log(ttr);
         ttr.click();
       }
     }
   });
 });
}, 500);

iview DatePicker options shortcuts 自定义时间范围

datePickOpt: {
  shortcuts: [
    {
      text: '最近一周',
      value() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 7));
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 30));
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 90));
        return [start, end];
      },
    },
  ],
},

datePickOpt: {
  shortcuts: [
    {
      text: '最近两小时',
      value () {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 2));
        return [start, end];
      },
    },
    {
      text: '最近一天',
      value () {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24));
        return [start, end];
      },
    },
    {
      text: '最近一周',
      value () {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - (3600 * 1000 * 24 * 7));
        return [start, end];
      },
    },
  ],
},

JavaScript数组倒序函数reverse() 多次调用结果不一致

不能用reverse(), 因为数组是按引用传递的，要想多次运行得到一样的排列顺序，必须在某一地方打断引用传递

const chartDataRel = [];
// 倒序数据, 不能用reverse(), 因为数组是按引用传递的
for (let i = 0; i < chartData.length; i += 1) {
  chartDataRel[i] = chartData[chartData.length - i - 1];
}

下面的方法没有测试

const dataBeforeReverse = [...chartData];
const chartDataRel = dataBeforeReverse.reverse();

高精度权限控制自定义指令directive

我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。
针对这种情况，我们可以通过全局自定义指令来处理：我们先在新建个 array.js 文件，用于存放与权限相关的全局函数：

// array.js
export function checkArray (key) {
  let arr = ['1', '2', '3', '4', 'demo']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

然后在将 array 文件挂载到全局中:

// main.js
  import { checkArray } from "./common/array";
  Vue.directive("permission", {
    inserted (el, binding) {
      let permission = binding.value; // 获取到 v-permission的值
      if (permission) {
        let hasPermission = checkArray(permission);
        if (!hasPermission) { // 没有权限 移除Dom元素
          el.parentNode && el.parentNode.removeChild(el);
        }
      }
    }
  });

最后我们在页面中就可以通过自定义指令 v-permission 来判断：

<div class="btns">
  <button v-permission="'1'">权限按钮1</button>  // 会显示
  <button v-permission="'10'">权限按钮2</button>  // 无显示
  <button v-permission="'demo'">权限按钮3</button> // 会显示
</div>