VUE之常用复用方法封装

2023-10-27

步骤:
将方法封装进js文件

const utilFiltra = {
  // 过滤合同名称为空(jexcel使用)
  filtraName: function(arr) {
    for (let i = 0; i < arr.length; i++) {
      if ((arr[i]['materialName']) === '') {
        arr.splice(i, 1)
        i--
      }
    }
    return arr
  },
  // 计算字符串长度,英文1个字符,中文2个字符
  computedStrLen: function(str) {
    var len = 0
    for (var i = 0; i < str.length; i++) {
      var c = str.charCodeAt(i)
      // 单字节加1
      if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
        len++
      } else {
        len += 2
      }
    }
    return len
  },
  // 计算对象数组中某个属性合计
  countTotal: function(arr, keyName) {
    let $total = 0
    $total = arr.reduce(function(total, currentValue, currentIndex, arr) {
      return currentValue[keyName] ? (total + currentValue[keyName]) : total
    }, 0)
    return $total
  },
    // 时间戳转日期
  formatDate: function(now) {
    var year = now.getFullYear() // 取得4位数的年份
    var month = now.getMonth() + 1 // 取得日期中的月份,其中0表示1月,11表示12月
    month = (month < 10 ? '0' + month : month)
    var date = now.getDate() // 返回日期月份中的天数(1到31)
    date = (date < 10 ? '0' + date : date)
    var hour = now.getHours() // 返回日期中的小时数(0到23)
    var minute = now.getMinutes() // 返回日期中的分钟数(0到59)
    var second = now.getSeconds() // 返回日期中的秒数(0到59)
    return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
  },
  // 前端导出excel
  exportExcel: function(id, excelName) {
    // 生成Excel工作簿对象
    var xlsxParam = { raw: true } // 只导出不解析
    var wb = XLSX.utils.table_to_book(document.querySelector('#' + id), xlsxParam)
    // 获取二进制字符串作为输出
    var wbout = XLSX.write(wb, {
      bookType: 'xlsx',
      book: true,
      type: 'array'
    })
    try {
      FileSaver.saveAs(
      // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
      // File: 基于Blob,继承了blob的功能并将其扩展使其支持用户系统上的文件。
        new Blob([wbout], { type: 'appliction/octet-stream' }),
        // 设置导出的文件名称可随意
        `${excelName}` + '.xlsx'
      )
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, wbout)
    }
    // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联组成。
    return wbout
  },
  // 数组去重
  unique: function(arr) {
    var newArr = []
    for (var i = 0; i < arr.length; i++) {
      if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
      }
    }
    return newArr
  },
  // 获取时间范围[本月第一天, 当前天]
  getNowDate: function() {
    // 获取当前日期
    var date = new Date()
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var nowMonth = (month < 10 ? '0' + month : month)
    day = (day < 10 ? '0' + day : day)
    var myDate = (year.toString() + '-' + nowMonth.toString() + '-' + day.toString())
    // 获取当前月第一天
    // const yesYear = (month > 1 ? year : year - 1)
    // const yesMonth = (month > 1 ? month - 1 : 12)
    const oneDay = '01'
    var yesDate = (year.toString() + '-' + nowMonth.toString() + '-' + oneDay)
    return [yesDate, myDate] //当月第一天至当前天
  },
  // 获取时间范围[上个月当前天, 本月当前天]
  getMonthDate: function() {
    // 获取当前日期
    var date = new Date()
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var nowMonth = (month < 10 ? '0' + month : month)
    day = (day < 10 ? '0' + day : day)
    var myDate = (year.toString() + '-' + nowMonth.toString() + '-' + day.toString() + ' 23:59:59')
    // 获取上个月的今天
    const yesYear = (month > 1 ? year : year - 1) // 1月、12月需特殊处理
    const yesMonth = (month > 1 ? month - 1 : 12)
    var yesDate = (yesYear.toString() + '-' + yesMonth.toString() + '-' + day.toString() + ' 00:00:00')
    return [yesDate, myDate]
  }
}

module.exports = utilFiltra

组件中引用:

import utilFiltra from '@/api/privateIp'

使用:

var amount = utilFiltra.countTotal(newArr, 'amount')
//只需传入json对象及要合计的字段即可,复用性更高。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE之常用复用方法封装 的相关文章

  • Vuetify:v-ripple 只能用于块级元素

    我今天刚开始收到此错误 它破坏了我的整个网站 因为我像个傻瓜一样在页面加载时加载 Vuetify 有谁知道这意味着什么或如何解决它 谷歌搜索没有发现任何有用的信息 Edit 对于因网站也损坏而发现此问题的任何人 这可能是因为您加载的位置vu
  • 如何在 Vuejs 中加载 Pixi 实例?

    我正在 VueJS 组件中学习 PixiJS 如下所示Pixi教程 https github com kittykatattack learningPixi我控制台显示此错误 vue runtime esm js 2b0e 619 Vue
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 如何减少 WEBPACK + VUEJS 中的包大小

    我遵循了很多有关如何减小捆绑包大小的教程 但没有任何内容对捆绑包大小产生任何影响 我不知道为什么 每次当我向 webpack 添加一些新代码时 我的包大小都保持与以前相同 我的应用程序是使用 vue cli 3 pwa 插件 webpack
  • 在 Vue.js 2.0 中实现 v-model 格式化的正确方法是什么

    举个简单的例子 输入货币数据的文本框 要求是以 1 234 567 格式显示用户输入并删除小数点 我尝试过 vue 指令 当 UI 由于其他控件而刷新时 不会调用指令的 update 方法 因此文本框中的值将恢复为没有任何格式的值 我还尝试
  • Vue.JS 可以与 AJAX http 调用一起使用吗?

    我正在尝试从 HTML 中执行以下操作 var vm new Vue el loginContent data main message Login isLoggedIn false loginError loginButton Login
  • 如何为 VueJS 项目设置根/基 URL

    我已经部署了一个VueJS项目到像这样的域www example com 但是 我想将其移动到子文件夹 以便我可以像这样访问它www example com v1 如何设置基础 URL 或根 URLVueJS项目 注意 这与基本 URL 无
  • Vue:单个网站可以使用多个 Vue 应用程序吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我有一个 Hugo 静态网站 我正在使用 Vue 使其动态化 我们正在转型 长期计划尚未确定 但在中期阶段我们正在使用 Vue 我已经在一个页面
  • 将 VueJs 组件添加到 Django 模板中

    我正在开发一个 Django 网站 我希望将一些 Vue 组件 散布 到 Django 渲染的模板中 我正在单个存储库中工作 并使用 webpack 设置来创建我在 Django 模板中使用的 style js 包 我正在努力让功能按照我想
  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n
  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页
  • 如何在Vue3中对setup的内部函数(不是返回)进行单元测试?

    我想这样测试 情况1 错误 无法监视内部属性 因为它不是函数 改为未定义 组件 vue export default setup function outer inner function inner do something for on
  • Asyncdata 与 Fetch 之间的区别

    获取数据和异步数据之间的确切区别是什么 官方文档是这么说的 异步数据 您可能想要获取数据并在服务器端呈现它 Nuxt js 添加 asyncData 方法 让您可以在之前处理异步操作 设置元件数据 异步数据每次在加载组件之前调用 仅适用于
  • Laravel Echo 不监听推送事件

    尝试使用 laravel 和 vuejs 创建一种聊天应用程序 发送消息后 我会从 laravel 触发事件 该事件会使用正确的事件类反映在推送器调试控制台上 但根本不会调用来自 vuejs 的监听回调 created window Ech
  • 如何修复套接字 io 中的 400 错误错误请求?

    我有一个前端应用程序 VUE JS 我有一个后端 Nest JS Vue JS 应用程序使用 vue socket io extended 库通过 websockets 从后端获取数据 当 Vue JS 应用程序启动时 我在浏览器中看到错误
  • 如何在Vue中提交表单,重定向到新路由并传递参数?

    我正在使用 Nuxt 和 Vue 我正在尝试提交表单 将用户重定向到包含提交的参数的新路由 发送 API 请求以获取一些数据 然后渲染该数据 我通过简单地将表单操作设置为新路径并手动将所有 URL 参数添加到 API 请求来实现此目的 首先
  • Vuetify 自动完成类似项目未显示

    我的本地案例中有类似标题的自定义帖子API我尝试通过搜索查询显示帖子items array Data count 5 entries id 3 title Senior developer Python id 4 title Senior
  • 如何以编程方式启动 Vuetify 对话框并等待响应

    我对 Vue js 和 Vuetify 相当陌生 使用 AngularJS 好几年了 但我们公司正在转向 Vue js 我想要完成的是 当用户单击 登录 按钮时 它会执行一些检查 即用户名不能为空 并启动 Vuetify 对话框来提醒用户
  • 用变量字符串设置槽的简单方法?

    有许多slot例子 但没有克莱尔和简单 因为我需要 我需要类似的东西 var x Hello slot x 这就是我需要的 在一个具体的例子中 https jsfiddle net 2qdh3x3v https jsfiddle net 2
  • 在 Vue.js 中隐藏 div onclick

    以下 jQuery 的 Vue js 等价物是什么 btn click function hideMe hide jQuery 开箱即用 而 Vue js 则不然 要初始化 Vue js 组件或应用程序 您必须将该组件及其数据绑定到模板内的

随机推荐

  • Oracle SQL语句进行新建用户

    哈喽大家好 随着科技的发达 国家的强大 人类智慧的增长 我们的身边也越来越多所谓的人工智能 但是他们所谓的智能也是我们人类去进行编程代码 进行设定功能和各种精密的传感器来进行的 自然软件的开发也就成了不可缺少的重要部分 下面我们要讲的是or
  • 像梦一样

    近日 听说的小学同学的父亲去世了 好多年不见 印象中还是小学时的样子 没想到今年去世了 转念一想 跟我父亲差不多的年纪 还没有老啊 就已经到了有人离开的年纪啦 回头一想 好久没给我的父亲打电话了 上次好好打电话还是去年有宝宝的时候吧 最近半
  • 信息技术导论论文

    摘要 计算机系统对存储器的容量 速度和价格这三个基本性能指标都有一定的要求 存储容量应确保各种应用的需要 存储器速度应尽量与CPU的速度相匹配并支持I O操作 存储器的价格应比较合理 但是存储器的速度越快 则每位的价格就越高 存储器的容量越
  • kafka 一个topic 被多个group.id 自动创建

    多遍看关于kafka 的原理 group与partition 与topic 的关系 自我感觉理解没问题了 写了一个netty结合kafka 5秒发送一个心跳 拉取一次消息 得到相应的record 读取记录提交offset 我用的是 两个gr
  • Xadmin(踩坑)——cannot import name ‘pretty_name‘

    问题 ImportError cannot import name pretty name 解决问题 修改前 修改后
  • maven package Failed to collect dependencies at com.study:*****:jar:1.1-SNAPSHOT

    聚合父pom C集成A pom B pom 而A pom又依赖B pom 此时package打包A 报错Failed to collect dependencies at com study jar 1 0 SNAPSHOT 解决 先ins
  • Spring -- Spring boot Spring mvc 的区别

    spring boot与spring mvc的区别是什么 知乎如题https www zhihu com question 64671972 作者 潜龙勿用 链接 https www zhihu com question 64671972
  • kubectl get csr/node 提示:bash: kubectl: 未找到命令...

    报错信息 root master kubectl get csr 查看节点请求 bash kubectl 未找到命令 root master kubectl get node 查看集群节点 bash kubectl 未找到命令 解决方法 查
  • 关于Pictureselector相册全白、不显示图片的问题(附GlideEngine代码)

    关于Pictureselector相册全白 不显示图片的问题 文末附GlideEngine代码 前些日子要做一个用到相机相册剪裁照片的项目 用了网上比较火比较新的Pictureselector 发现相册能识别并且打开 但是整个相册预览都是空
  • Spring Boot整合dubbo+Nacos实战(二)

    文章目录 前言 新建父工程cloud alibaba demo 新建子工程dubbo demo service 新建子工程gtw 启动工程 测试 前言 nacos的实战在前面一章已经介绍到 Spring Cloud Alibaba Naco
  • BSC什么意思

    封装尺寸图的 BSC 先查Google 一说BSC是指基本值 Basic 其它还有TYP 典型值 REF参考值 单位一般会在资料里说明 二说是Basic Spacing between Centers 三说BSC不是单位 意思是没有误差的
  • 关于‘vue‘ 不是内部或外部命令,也不是可运行的程序或批处理文件的解决办法

    一般出现 vue 不是内部或外部命令 也不是可运行的程序或批处理文件的提示 一般有两种可能 一是当前环境无法找到Vue cli路径 二是没有配置npm环境变量 下面具体讲解解决办法 一 当前环境无法找到Vue cli路径 解决办法执行以下操
  • 【gdb】超详细介绍

    文章目录 搭建试验环境 QuickStart gdb基本命令 run或r 运行程序 list 查看源代码 b break打断点 info 查看断点 Print 打印变量 x打印地址 Step 进某一个具体函数的调试 Step i按汇编命令进
  • Mysql 调优记: INNER JOIN查询 Using temporary; Using filesort 问题优化

    近期笔者在生产环境中发现一条执行非常慢的sql 大概时间为5s左右 于是乎对改SQL场景进行EXPLAIN 分析 发现一个在执行过程中出现对 Using temporary Using filesort 即在执行过程中产生了临时表来存储结果
  • eureka配置心跳和剔除不可用服务

    开发十年 就只剩下这套Java开发体系了 gt gt gt 1 注意 改配置建议在开发和测试环境下使用 尽量不要在生产环境使用 2 背景 由于Eureka拥有自我保护机制 当其注册表里服务因为网络或其他原因出现故障而关停时 Eureka不会
  • 假设有五个IP地址A:131.107.256.80,B:231.222.0.11,C:126.1.0.0,D:198.121.254.255,E:202.117.34.32,找出不能分配给主机的IP地

    假设有五个IP地址A 131 107 256 80 B 231 222 0 11 C 126 1 0 0 D 198 121 254 255 E 202 117 34 32 找出不能分配给主机的IP地址 并说明原因 1 A的第三个数256大
  • 计算机中文件夹怎么上密码,怎样设置电脑文件夹密码

    怎么给电脑文件夹加密 如何加密电脑文件 有的时候会把一些私密文件想加密 那怎么加密文件呢 接下来是小编为大家收集的怎样设置电脑文件夹密码 欢迎大家阅读 设置电脑文件夹密码方法一 压缩软件法 首先压缩软件在电脑上是必备的软件 所以压缩软件加密
  • 人脸识别代码_七个步骤快速实现人脸识别(超级简单 代码全!!!)

    作者 柒末雪 一 项目结构如下 二 程序主流程 主流程代码 通过sqlite3保存人脸数据和信息 然后通过遍历数据库与之对比找出识别者信息 若识别不到 则会提示添加人脸信息至数据库 导入数据库驱动 import sqlite3 from t
  • 【攻防世界刷题】Misc-2-心仪的公司

    攻防世界刷题 Misc 2 心仪的公司 攻防世界刷题 Misc 2 心仪的公司 知识点 题解1 题解2 答案 攻防世界刷题 Misc 2 心仪的公司 出处 Tags 攻防世界 世安杯 流量分析 字符串查找 知识点 1 wireshark字符
  • VUE之常用复用方法封装

    步骤 将方法封装进js文件 const utilFiltra 过滤合同名称为空 jexcel使用 filtraName function arr for let i 0 i lt arr length i if arr i material