vue常用函数

已于 2022-12-27 17:20:42 修改
阅读量812 收藏 2
点赞数
分类专栏： ES6 element 文章标签： javascript html5 html elementui 前端
于 2022-09-19 14:41:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55876727/article/details/126933472
版权 
//上传文件大小转换   
 byteChange(byte) {
      if (!byte) return;
      let size = "";
      if (byte < 0.1 * 1024) {
        // 小于0.1KB 则转化成B
        size = byte.toFixed(2) + "B";
      } else if (byte < 0.1 * 1024 * 1024) {
        // 小于0.1MB 则转换成KB
        size = (byte / 1024).toFixed(2) + "KB";
      } else if (byte < 0.1 * 1024 * 1024 * 1024) {
        // 小于0.1GB 则转换成MB
        size = (byte / (1024 * 1024)).toFixed(2) + "MB";
      } else if (byte < 0.1 * 1024 * 1024 * 1024 * 1024) {
        // 小于0.1TB 则转换成GB
        size = (byte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      } else if (byte < 0.1 * 1024 * 1024 * 1024 * 1024 * 1024) {
        // 小于0.1PB 则转换成TB
        size = (byte / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB";
      } else if (byte < 0.1 * 1024 * 1024 * 1024 * 1024 * 1024 * 1024) {
        // 小于0.1EB 则转换成PB
        size = (byte / (1024 * 1024 * 1024 * 1024 * 1024)).toFixed(2) + "PB";
      } else if (byte < 0.1 * 1024 * 1024 * 1024 * 1024 * 1024 * 1024 * 1024) {
        // 小于0.1ZB 则转换成EB
        size =
          (byte / (1024 * 1024 * 1024 * 1024 * 1024 * 1024)).toFixed(2) + "EB";
      } else if (
        byte <
        0.1 * 1024 * 1024 * 1024 * 1024 * 1024 * 1024 * 1024 * 1024
      ) {
        // 小于0.1YB 则转换成ZB
        size =
          (byte / (1024 * 1024 * 1024 * 1024 * 1024 * 1024 * 1024)).toFixed(2) +
          "ZB";
      }
      return size;
    },

下载图片

downloadImage(imgsrc, name) {
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      //将资源链接赋值过去，才能触发image.onload 事件
      image.src = imgsrc;
    },

前端导出element ui表格

 // 导出 html-tabel
    tableToExcel() {
      let tabelStr;
      // element table中有两个表格一个是浮动的一个是不浮动的，如果没有设置浮动就不会有浮动的表格，就会只有一个表格
      let fixedDom = document.querySelector(".html-tabel .el-table__fixed");
      let tableDom = document.querySelector(".html-tabel");
      if (fixedDom) tabelStr = fixedDom.outerHTML;
      if (tableDom) tabelStr = tableDom.outerHTML;
      //根据正则表达式，把style='mso-number-format:"\@"' 塞入td中,将数据转成String
      tabelStr = tabelStr.replace(/<td/g, "<td STYLE='MSO-NUMBER-FORMAT:\\@'");
      //Worksheet名
      let worksheet = "乡镇专管员配置履职情况";
      let uri = "data:application/vnd.ms-excel;base64,";
      // 真正要导出（下载）的HTML模板
      let exportTemplate = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" 
                    xmlns="http://www.w3.org/TR/REC-html40">
                    <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                        <x:Name>${worksheet}</x:Name>
                            <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                    </head>
                    <body>
                      ${tabelStr}
                    </body>
                    </html>`;
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri + this.base64(exportTemplate);
      //对下载的文件命名
      link.download = `${worksheet}.xls`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    //输出base64编码
    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)));
    },

限制只能输入小数，整数，小数将保留两位

oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"

前端计算浮点数问题

//加法函数
function accAdd(arg1, arg2) {
    var r1, r2, m;
    try {
        r1 = arg1.toString().split(".")[1].length;
    } catch (e) {
        r1 = 0;
    }
    try {
        r2 = arg2.toString().split(".")[1].length;
    } catch (e) {
        r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2));
    return (arg1 * m + arg2 * m) / m;
} //给Number类型增加一个add方法，使用时直接用 .add 即可完成计算。  
Number.prototype.add = function (arg) {
    return accAdd(arg, this);
};
// console.log(0.1.add(0.2).add(0.3));//等价于0.1+0.2+0.3，输出0.6
// console.log(0.1 + 0.2 + 0.3);//输出0.6000000000000001

//减法函数 
function Subtr(arg1, arg2) {
    var r1, r2, m, n;
    try {
        r1 = arg1.toString().split(".")[1].length;
    } catch (e) {
        r1 = 0;
    }
    try {
        r2 = arg2.toString().split(".")[1].length;
    } catch (e) {
        r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2)); //动态控制精度长度            
    n = (r1 >= r2) ? r1 : r2;
    return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));
}
Number.prototype.sub = function (arg) {
    return Subtr(this, arg);
};
// console.log(0.6.sub(0.2).sub(0.3));//等价于0.6-0.2-0.3 输出0.1
// console.log(0.6 - 0.2 - 0.3);//输出：0.09999999999999998

//乘法函数
function accMul(arg1, arg2) {
    var m = 0,
        s1 = arg1.toString(),
        s2 = arg2.toString();
    try {
        m += s1.split(".")[1].length;
    } catch (e) { }
    try {
        m += s2.split(".")[1].length;
    } catch (e) { }
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}
Number.prototype.mul = function (arg) {
    return accMul(arg, this);
};
// console.log(0.1.mul(0.2).mul(0.3)); //等价于0.1 * 0.2 * 0.3 输出0.006
// console.log(0.1 * 0.2 * 0.3); //输出：0.006000000000000001

//除法函数
function accDiv(arg1, arg2) {
    var t1 = 0,
        t2 = 0,
        r1, r2;
    try {
        t1 = arg1.toString().split(".")[1].length;
    } catch (e) { }
    try {
        t2 = arg2.toString().split(".")[1].length;
    } catch (e) { }
    r1 = Number(arg1.toString().replace(".", ""));
    r2 = Number(arg2.toString().replace(".", ""));
    return accMul((r1 / r2), Math.pow(10, t2 - t1));
}
Number.prototype.div = function (arg) {
    return accDiv(this, arg);
};
// console.log(0.6.div(0.2).div(0.1)); //等价于0.6 / 0.2 / 0.1 输出30
// console.log(0.6 / 0.2 / 0.1); //输出：29.999999999999993

明哥前端
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue常用工具函数——（持续更新）
m0_57712926的博客
08-04 1484
自定义指令——自动聚焦指令 第一种方式 mouted周期，ref+querySelector获取到input标签，调用focus() 第二种方式 自定义指令（局部） directives:fofo(inserted),定义好以后在标签上使用， v-fofo 第三种方式 全局自定义指令，放到utils/directives.js模块下，在main.js导入使用即可。（推荐-复用性极高） import Vue from 'vue' Vue.directive("fofo",{ inserted(el) {
一个图片url访问后直接下载怎样实现
07-10 7909
一个图片url访问后直接下载怎样实现 先看代码 downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("cro...
Vue的生命周期函数有哪些？详细说明
最新发布
hexadecimal_001的博客
07-12 790
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。- 使用场景：在此阶段无法访问 `data`、`methods`、`computed` 以及 `props`，适合执行一些初始化逻辑，如设置初始数据。- 使用场景：通常在这里可以访问组件的 `render` 函数中的虚拟 DOM，可以在渲染之前最后一次修改组件的数据。- 使用场景：可以在这里执行操作，如 DOM 操作、初始化第三方库等，因为此时可以访问到真实的 DOM。
vue 生成海报，解决跨域问题 ，下载图片到本地
hflxia的博客
09-09 3661
// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...
vue 图片下载到本地，图片保存到本地
热门推荐
bamboozjy的博客
08-13 5万+
必须同源（访问的网站域名与服务器域名一致）才能下载 downs() { var alink = document.createElement("a"); alink.href = this.shop.shoppic_url; alink.download = "pic"; //图片名 alink.click(); },   解决图片不同源下载问题： downloadIa...
vue 下载图片到本地
thhhwr的博客
01-17 953
【代码】vue 下载图片到本地。
下载图片到本地vue3-ts
weixin_46572329的博客
06-29 1312
vue3下载图片到本地公共放法
vue中render函数的使用详解
10-17
Vue 中的模板是构建组件界面的常用方式，但有时候模板表达能力有限，这时就需要使用 render 函数来通过 JavaScript 代码创建和控制 DOM 元素。以下是Vue中render函数的详细知识点。 首先，render函数是Vue组件中的...
VUE常用方法整理.pdf
03-28
vue的常用方法总结 第一章 Vue核心知识讲解 5 第二节 引包、留坑、实例化 、插值表达式{{}} 5 1. 引包 5 2. 留坑 5 3. 实例化 5 4. 插值表达式{{ }} 5 第三节 熟悉及使用常用指令 5 1. 什么是指令 5 2. 常用的指令有...
vue项目中用的着的工具函数
10-25
vue项目中用的着的工具函数
vue常用指令代码实例总结
12-20
而属性监视允许你监听并响应数据的变化，当指定的属性值发生变化时，监视函数会被调用。 这些基本指令和概念构成了Vue.js开发的基础，理解并熟练运用它们是进行Vue应用开发的关键。通过实践这些代码实例，开发者...
vue组件js图片查看点击预览大图并下载高清大图到本地
08-12
vue 2.5.2 版本 vue组件 实现点击预览大图功能，点击下载图片功能（不兼容IE，适用于PC端） 内部代码可实现点击图片旋转效果，在本处无用，故注释掉，如有需要可打开调整.
vue常用功能可以作为参考
09-14
在这个“vue常用功能可以作为参考”的压缩包中，我们可以预见到一些基本的Vue项目初始化内容，包括`initProject`。下面将详细讨论Vue.js的一些核心特性以及如何使用它们。 1. **安装Vue CLI**： 在描述中提到需要...
vue下载图片到本地的方法
qq_45754931的博客
05-18 9678
downloadIamge(imgsrc, name) { //下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() {
Vue中实现图片下载到本地功能和导出（下载）excel文件功能：
SunPeng的博客
01-13 9105
需求： 将勾选的列表项的id传给后台，让后台处理并下载对应的图片 1、 后台接口： 下载图片zip： GET /download 请求数据类型 application/x-www-form-urlencoded 响应数据类型[ "*/*" ] 请求参数： 参数名称 参数说明 请求类型 数据类型 ids ids query array 2、前端Vue页面： template： <el-button type="success" @click="dowI
vue项目图片下载到本地
行内元素如何居中
07-29 355
<template> <div> <div v-for="(item, index) in codeImg" :key="item.id"> <img :src="item.path" title="点击查看大图" alt="" /> </div> <div class="it...
js下载图片
personal_csdn的博客
07-30 484
--imgName 下载照片的名称 --dataURI base64 ```javascript var dataURIToBlob = function (imgName, dataURI, callback) { var binStr = atob(dataURI.split(',')[1]), len = binStr.length, arr = new Uint8Array(len); for (var i = 0
vue watch函数
04-29
`watch` 函数是 Vue.js 中一个非常常用的函数，它用于监听数据的变化并执行相应的回调函数。下面是 `watch` 函数的基本语法： ```javascript watch: { // 监听的数据 data: { // 监听函数 handler(newVal, oldVal) { // 处理函数 }, // 是否立即执行监听函数 immediate: true, // 深度监听 deep: true } } ``` 其中，`data` 表示要监听的数据，`handler` 是监听函数，`immediate` 表示是否立即执行监听函数，`deep` 表示是否深度监听。 当被监听的数据发生变化时，`handler` 回调函数会被自动执行，并且会传入两个参数：`newVal` 表示变化后的值，`oldVal` 表示变化前的值。 如果设置了 `immediate` 为 `true`，则在组件创建时会立即执行一次监听函数。 如果设置了 `deep` 为 `true`，则会进行深度监听，即会对被监听的数据进行递归监听，可以监听到嵌套对象和数组的变化。但深度监听可能会影响性能，应该谨慎使用。 除了监听数据的变化外，`watch` 函数还可以监听实例上的方法和计算属性的变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值