
前端
文章平均质量分 54
前端-阿辉
自己不努力,没人能给你你想要的生活!!!
展开
-
基于Handsontable.js + Excel.js实现表格预览和导出功能(公式渲染)
二、编写页面布局三、编写预览核心代码如下图所示:通过以上代码,我们成功将Excel文件中的数据、样式、合并单元格等信息加载到了Handsontable中,并渲染到了页面上。所以我们需要对公式进行处理,将公式替换为对应的值。请看以下处理公式的方法。由图可以看到带有公式的单元格是一个对象,这就是带有公式的单元格渲染后是"[object Object]"的原因。解决方法就是将带有公式的单元格替换为对应的值,请看以下代码:通过处理后,带有公示的单元格不在渲染为"[object Object]“,但是会渲原创 2024-10-11 17:50:32 · 1553 阅读 · 0 评论 -
怎么将拼接的字符串element组件通过“v-html“渲染到页面
如上图所示,没那么多废话,直接上代码。原创 2023-07-18 15:35:34 · 2245 阅读 · 0 评论 -
关于Vue中Diff算法详解
vue双向绑定(Diff)原理:当数据发生改变时,发布消息给订阅者watcher, 然后watcher就会调用patch给真实DOM打补丁,更新相应的视图。原创 2023-01-31 16:57:55 · 2048 阅读 · 1 评论 -
关于Vue中keep-alive的作用是什么?怎么使用?
比如:有一个列表页面和一个详情页面,那么用户可能会经常执行打开详情 => 返回列表 => 打开详情,那么就可以对列表组件使用进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染页面,从而节省内存开销。是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,该组件将不会销毁。用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验。原创 2023-01-31 15:54:51 · 2980 阅读 · 0 评论 -
vue3 父子组件间的通信
/这里触发的方法名要和父组件中@符后面的名称一样。//触发父组件中的方法,并把值以参数的形式传过去。"子组件向父组件传送的信息""父组件传给子组件的值"原创 2022-07-20 17:51:03 · 1255 阅读 · 1 评论 -
vue3 父子组件之间的方法调用
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L7ssoWOR-1658307849412)(C\Users\zll\AppData\Roaming\Typora\typora-user-images\1658303809058.png)]的组件是默认关闭的,也即通过模板ref或者$parent链获取到的组件的公开实例,不会暴露任何在。2.1父组件的内容。2.2子组件的内容。2.1父组件的内容。2.2子组件的内容。......原创 2022-07-20 17:02:25 · 11925 阅读 · 0 评论 -
vue3+element-plus Dialog对话框的使用 与 setup 写法的使用
/ 定义控制弹窗显隐的变量。"监听flag值得变化:"// 接受父组件传过来的值。'你点击了确定按钮''你点击了确定按钮''你点击了确定按钮'// 将变量暴露出来。原创 2022-07-20 15:24:10 · 14170 阅读 · 11 评论 -
关于javascript数字精度丢失的解决办法
分析原因例如下面的例子:我们在计算 0.1 + 0.1 的到的结果是 0.2,但是计算 0.1 + 0.2 的结果并不是0.3,而是我们在计算 1.2 - 1 的结果并不是0.2,而是不过这并不是JavaScript独有的,其他编程语言也会存在同样的问题。既然这样,那能不能防止精度不准确呢???解决办法:我们可以使用凑整后再使用,比如计算接下来我们封装成方法使用......原创 2022-06-13 16:14:07 · 1191 阅读 · 0 评论 -
关于前台封装实现zip文件流的下载功能并如何使用
前台封装 zip 文件流的下载并如何使用在前端开发过程中有关于文件下载的基本是后台返回文件地址指向的 url ,前端通过 window.open 进行下载,但是对于后台返回 zip 文件流如何进行下载呢?接下来 来看看如何实现。1. 后台返回 zip文件流2. 前台使用axios请求后台接口获取zip文件流请求前的准备axios的 responseType 设置为blob将返回的zip文件流转换为blob对象解析,并指定type为:“application/zip;charset-UTF原创 2022-05-14 14:39:20 · 2988 阅读 · 0 评论 -
关于three.js渲染器THREE.WebGLRenderer()参数的介绍和使用
首先来看下THREE.WebGLRenderer可以设置的参数如下:var renderer = new THREE.WebGLRenderer({ //创建渲染器对象 // canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布, alpha: false, // 画布是否包含alpha(透明度)缓冲区。默认值为false。 premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默原创 2021-08-18 19:56:18 · 10433 阅读 · 1 评论 -
关于解决git提交报错pre -commit hook failed (add --no-verify)的问题
初始化一个新版本库时,Git 默认会在这个目录中放置一些示例脚本。这些脚本除了本身可以被调用外,它们还透露了被触发时所传入的参数。(客户端)钩子,它会在Git键入提交信息前运行做代码风格检查。这个钩子在得到提交消息和开始提交前被调用。文件夹(文件夹默认隐藏,可先设置显示或者命令ls查找),再进入hooks文件夹,删除。钩子都被存储在 Git 目录下的 hooks 子目录中。钩子被启用时,如果它发现文件尾部有空白行,那么就会中止此次提交。这个钩子可以用来在提交前检查代码错误,相当于。, 提交代码的时候,原创 2022-02-18 17:29:42 · 10816 阅读 · 0 评论 -
简述vue项目中指定某个DOM进入全屏模式与退出全屏
vue项目中指定某个DOM进入全屏模式与退出全屏首先安装全屏插件npm install screenfull@4.2.1 --save在使用的页面中引入import screenfull from ‘screenfull’我们指定某个DOM元素的id,然后获取这个DOM节点methods: { // 定义全屏方法,通过按钮点击触发 fullscreenHandle () { const element = document.getElementById('ta原创 2022-01-19 13:35:17 · 1325 阅读 · 2 评论 -
简述前端如何导出PDF的功能实现
前端导出PDF首先,你需要安装相关插件或依赖npm install html2canvasnpm install jspdf在项目的 src/utils 目录下新建tools.js文件,写入以下内容import html2canvas from 'html2canvas';import JsPDF from 'jspdf';export default { /** * @param ele 要生成 pdf 的DOM元素(容器) * @param padfName原创 2022-01-14 16:09:48 · 1133 阅读 · 5 评论 -
基于 Element 表格组件进行二次封装支持表格拖动排序
基于 Element 表格组件进行二次封装首先来看张截图在项目 views 目录下新建表格展示页面<template> <div class="container"> <!-- 参数配置请看组件的 `props` 部分 --> <my-eltable ref="table" id="printTable" :fit="true" :size="'small'" :isSho原创 2022-01-13 13:48:04 · 691 阅读 · 0 评论 -
基于 Element 表格组件进行二次封装
基于 Element 表格组件进行二次封装首先来看张截图在项目 view 目录下新建表格展示页面<template> <div class="container"> <my-eltable ref="table" id="printTable" :fit="true" :size="'small'" :isShow="isShow" :loading="loading"原创 2022-01-11 14:13:17 · 824 阅读 · 0 评论 -
基于 vue 项目来简单了解下 webscoket 与后台实时通信的使用
基于 vue 项目来简单了解下 webscoket 与后台实时通信的使用首先:初始化 weosocketcreated() { // 初始化加载WebSocket this.initWebSocket()}// 初始化WebSocket方法methods: { initWebSocket() { if (typeof WebSocket === "undefined") return alert("您的浏览器不支持WebSocket") // websocket地址原创 2022-01-10 14:38:24 · 995 阅读 · 0 评论 -
关于Promise API 的实现
Promise API 的手动实现一、Promise 手写原理:利用发布者订阅者模式构造函数接收一个 executor 函数,并会在 new Promise() 时立即执行该函数then 时收集依赖,将回调函数收集到 成功/失败队列executor 函数中调用 resolve/reject 函数resolve/reject 函数被调用时会通知触发队列中的回调ES5写法(function(window) { const PENDING = "pending"; const RESO转载 2021-06-24 14:48:02 · 171 阅读 · 0 评论