vue.js 常用方法及事件

最新推荐文章于 2024-09-12 11:43:08 发布

脑花一朵朵

最新推荐文章于 2024-09-12 11:43:08 发布

阅读量603

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/T643685558/article/details/105929532

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

记录一些自己常用的方法，后面继续补充

v-html中使用过滤器

v-html="$options.filters.htmlFormat(dataList.Description)"

方法

1.数组转成树形结构，适用于element树绑定格式

// 数组转成树形结构
export const toTree = function (arr) {
    let result = []
    let data = JSON.parse(JSON.stringify(arr))
    if (!Array.isArray(data)) {
        return result
    }
    data.forEach(item => {
        delete item.children;
    });
    let map = {};
    data.forEach(item => {
        map[item.id] = item;
    });
    data.forEach(item => {
        let parent = map[item.pid];
        if (parent) {
            (parent.children || (parent.children = [])).push(item);
        } else {
            result.push(item);
        }
    });
    return result;
}

2.金额大写转换

//金额大写转换
export const changeMoneyToChinese = (n) => {
    let fraction = ['角', '分'];
    let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
    let unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']];
    let head = n < 0 ? '欠' : '';
    n = Math.abs(n);
    let s = '';
    for (let i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i])
            .replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);

    for (let i = 0; i < unit[0].length && n > 0; i++) {
        let p = '';
        for (let j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    }
    return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
}

3.计算开始时间和结束时间之间的天数

// 计算开始时间和结束时间之间的天数
export const differenceNum = function (sDate1, sDate2) {
    const date1 = new Date(sDate1); //开始时间
    const date2 = new Date(sDate2) //结束时间
    let date3 = date2.getTime() - date1.getTime() //时间差的毫秒数
    let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
    let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
    let params = {
        days: Math.floor(date3 / (24 * 3600 * 1000)),
        hours: Math.floor(leave1 / (3600 * 1000)),
        minutes: Math.floor(leave2 / (60 * 1000)),
    }
    return params
}

4.时间格式异常转换。

console.log(formatDate(43320, ‘-’)) // 2018-8-7

formatDate(numb, format = "/") {
      if (!numb) return;
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        return year + format + month + format + date
      }
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
    },

过滤器

1.内容中包含回车字符 ↵ 进行转换

//内容中包含 回车字符 ↵  进行转换
Vue.filter('htmlFormat', function (value) {
    if (value) {
        return value.replace(/\n/g, '<br/>');
    }
})

2.手机号码中间几位转换为*****

//手机号码转换
Vue.filter('formatPhone', function (value) {
    if (value) {
        return value.substring(0, 3) + '*****' + value.substring(value.length - 2);
    }
})