- 博客(83)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Vite vs Webpack
Vite 充分利用了这一点，将开发环境下的模块文件直接作为浏览器要执行的文件，而不是像 Webpack 那样先打包再交给浏览器执行。Vite 会在请求模块时再进行实时编译，这种按需动态编译的模式极大地缩短了编译时间，特别是在大型项目中，文件数量众多时，Vite 的优势更为明显。这意味着所有的模块都需要在开发前进行打包，这会增加启动时间和构建时间。：当某个模块内容改变时，只需要让浏览器重新请求该模块即可，这大大减少了热更新的时间。：当一个模块或其依赖的模块内容改变时，需要重新编译这些模块。
2025-02-21 16:18:51
614
原创 从配置到优化：全面掌握Webpack工程化
HMR通过WebSocket实现浏览器与Webpack-dev-server的通信，当资源变化时，Webpack将新模块代码放入内存，并推送给浏览器进行更新。版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。ExtractTextWebpackPlugin：将CSS代码提取到单独的文件中。vue-loader：将Vue单文件组件编译成JavaScript代码。style-loader：将CSS代码注入到HTML文档中。
2025-02-21 15:26:15
470
原创 nodejs 读取xlsx 文件转json 格式（包含表格时间类型）
需求概要：从xlsx 文件中读取内容转化成想要的json 格式，用于web 读取数据。本内容主要是更新前端公告内容，
2023-07-09 12:42:25
623
原创 Js 文件图片URL 转Bolb 格式方法
// url 转bolb urlToBlob(the_url, callback) { let xhr = new XMLHttpRequest(); xhr.open('get', the_url, true); xhr.responseType = 'blob'; xhr.onload = function () { if (this.status == 200) { if (callback) {...
2022-02-11 22:10:55
1391
原创 连接字符串 换行
数组链接成字符串常用，连接'\r\n'let str = array.join('\r\n')展示出来的字符串可直接换行用作tooltip 展示时候的换行
2022-01-17 18:53:29
1430
原创 底部操作菜单的吸底组件
因为样式问题底部菜单需要一直在视图内但界面的最下有一部分间隔空间于是使用吸底部的这个方式实现思想：找当前吸底的组件包含的dom 元素，是否在当前视图内，如果没在当前视图范围内，则需要设置position = 'fixed'，bottom=0来实现布局，和吸顶是一样的思想<template> <div ref="stickyArea" :style="{ height: height + 'px', zIndex: zIndex }"> <
2022-01-06 19:41:43
744
原创 吸顶组件 开发
吸顶组件：页面滚动，顶部的标题要一直停留在当前页面页面滚动 这个标题吸顶组件实现思想是设置当前组件的position = 'fixed'组件：Sticky.vue<template> <div ref="stickyArea" :style="{ height: height + 'px', zIndex: zIndex }"> <div :class="className" :style="{ top:
2022-01-06 19:34:44
574
原创 关于列表的表单效验---根据不同种类，效验范围不同
当前这个表单是一个列表数据，列表里面的item都要根据第一个参数值的具体类型，来设置第三个参数值的的数据范围列如：当前后台需要的传输的数据类型是如下：[ { "monitorType": "CpuUsageAmount", "operator": 1, "value": 1, "durationTime": 1, "frequencyTime": 10 }, { "durationTime": 1, "f...
2022-01-06 19:23:28
789
原创 动态更新table的列或表头，table显示问题
问题记录：原本在table上，会根据不通的参数 使用一个表格，将一列数据进行显示和隐藏使用if 的时候 table 渲染的闪动体验太差于是使用自定义表头和内容但表头数据不会根据外部参数值变动最后的解决方案：给当前tabke 加一个key 属性使每一次渲染该表格都保证key 不同这样 就可以动态的变更当table 的列数在类型变化时，使key 自加...
2021-08-22 14:10:07
746
原创 from 表单效验 动态参数值的对比
问题记录：表单类型;效验规则： request的输入框内容数值不能大于limit 输入框的数值但from表单一般都是类似于这样的方法 只能接收到当前输入值于是将效验规则的方法bind（this ）就可以在当前方法中使用 cpuMemoryRule: { requests: { cpu: [ { required: false, message: '请填写', trigger: ...
2021-08-22 14:01:28
359
原创 效验list 类型的from 表单方法
本周做了最大的表单的提交，对于必填和部分内容的表单做了完整的效验因为表单内容较多我这边封装了很多组件，对每一种类型都做了校验，所以在最外层的父组件使用$refs 找到子组件在找到子组件的from 表单进行效验当前表单含有list 类型的校验做下记录：表单大约分为常用的表单类型1、list类型当前组件是一个列表类型输入框 效验变量key 和value 值具体代码：实例图组件代码：<template> <div...
2021-08-22 13:53:47
908
1
原创 Table 动态添加列，from 表单列表效验无效
使用场景：变更上面的类型 要再table 表格上加一列最差使用如果只是对当前行 进行v-if 视图渲染的时候又闪动，体验很差，列表的的效验规则，对变动的那一列并不生效，解决方案：给table 加一个动态的key 属性保证每次变更视图 ，都渲染新的table完美解决！！！！...
2021-08-20 21:14:41
339
原创 vue 数据变动，但界面视图未发生变化
当前数据没有实现响应式使用$set ,在vue 上为当前属性绑定响应式使用this.$forceUpdate(); 强制刷新界面
2021-08-07 15:06:13
180
原创 switch的文字在内部显示效果
代码： <el-switch class="tableScopeSwitch" active-value="Y" inactive-value="N" @change="handleStatusChange(child_data)" active-text="开启" inactive-text="冻结" v-model="data.enable"> </el-switch>css 修改样式<style lan...
2021-07-25 15:33:14
717
原创 实现3D 图片轮播样式（触摸一体机浏览器存在滑动问题）
<div id="drag-container_view" class="padding_draw"> <div id="drag-container"> <div id="spin-container"> <div v-for="image in crbList" :key="image.id" class="image_item_div" :style="{backgr...
2021-07-25 15:25:29
293
原创 vue 3D轮播展示 --vue-carousel-3d
根据vue-carousel-3d 官方网站上面的实例 进行使用并修改官网地址：https://wlada.github.io/vue-carousel-3d/guide/使用流程：Installationnpm install -S vue-carousel-3dUsage (Global)import Vue from 'vue';import Carousel3d from 'vue-carousel-3d';Vue.use(Carousel3d);...
2021-07-25 15:18:11
2356
2
原创 解决 小程序界面数据不显示问题
遇到小程序获取向数据详情，后台返回的是个obj对象， 我直接setData到一个空对象苹果手机的页面不显示安卓手机可以显示
2021-06-14 18:17:34
2691
原创 时间格式转换
时间格式转换//转换时间类型 timeConversion(time) { let time_new = new Date(time); var a = [ time_new.getFullYear(), time_new.getMonth() + 1, time_new.getDate(), time_new.getHours(), time_new.getMinutes...
2021-05-26 09:09:27
106
原创 微信小程序 向上级页面传参
var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; prevPage.setData({ myType:1, myParme: that.data.myData.dynamic }) ...
2021-05-11 20:39:07
257
原创 数据库创建代码执行
/*Navicat MySQL Data TransferSource Server : 192.168.244.128Source Server Version : 50732Source Host : 192.168.244.128:3306Source Database : rebuild_3d_user_dbTarget Server Type : MYSQLTarget Server Version : 50732File.
2021-04-05 20:14:36
245
原创 Raw 图像转png
当前时封装了一个组件专门用于原水图像转png 图像全局引入pngtoy库 然后直接在组件中使用浏览器不支持显示16bit的原先是图像需要用到pngtoy 这个库 链接：https://github.com/xgds/pngtoy组件代码rawtopng.vue<template> <div> <canvas style="display:none" id="c"></canvas> <img...
2021-04-04 13:10:50
729
原创 vue 组件之间的传值
1，props、事件$emit 父组件向子组件传值（props）2、$emit、$on （Bus）通过新建Vue实例（Bus）作为中央事件总线（事件中心），用它来触发事件($emit)和监听事件($on),巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。3，$attrs、$listeners（属性，事件）多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中...
2021-04-01 12:37:47
809
原创 前端面试：webpack构建之loader与plugin的区别是什么
从功能区分loader是文件加载器能够加载资源文件并对这些文件进行统一的处理，诸如编译，压缩 最终一起打包在制定的文件夹中处理一个文件可以使用多个loader loader的执行顺序和配置顺序整好相反第一个执行的loader的返回值接收源文件内容做参数其他的loader接收前一个执行的loader的返回值作为参数 最后执行的loader会返回次模块的js源码编写zijipluginplugin的功能更加强大，loader不能做的，plugin都能做plugin..
2021-04-01 10:36:37
270
原创 前端面试：import 和 require 区别
1、遵循的规范不同require 是AMD规范引入方式import 是es6的一个语法标准，兼容浏览器要转换成es52、调用时间require是运行时调用，require是个函数所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头 且放在全局中引入3、本质require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目前所有的引擎都还没有实现im.
2021-04-01 09:08:44
2503
原创 vue 界面 滚动监听
<template> <div> <Carousel :carousel-data='carouselData' /> <sticky :z-index="10" class-name="sub-navbar"> <!-- 导航区域 --> <div class="navs"> .
2021-03-29 17:08:09
521
1
原创 vue 吸顶组件封装
主页面： <sticky :z-index="10" class-name="sub-navbar"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="功能介绍" name="first"></el-tab-pane> <el-tab-pane label="功能演示" name="second"&g
2021-03-29 17:02:57
342
原创 web 实时播放 whammy.js
先在当前播放视频的页面混入wfsMixins.js/* eslint-disable no-undef */import '@/utils/statics/wfs';// import Wfs from '@/views/project/Dashboard/Mixin/wfs';export default { data() { return { wfs: new Wfs() }; }, watch: { windowHidden(val) .
2021-03-29 16:35:50
587
2
原创 新版chrome 解决在http协议下无法调用摄像头和麦克风的问题（不安全）
解决办法：亲测可行在浏览器地址栏中输入“chrome://flags/#unsafely-treat-insecure-origin-as-secure”，回车，如下图，将该选项置为Enabled，在输入框中输入需要访问的地址，多个地址使用“,”隔开，然后点击右下角弹出的Relaunch按钮，自动重启浏览器之后就可以在添加的http地址下调用摄像头和麦克风了。...
2021-03-05 09:20:16
11463
5
原创 小程序wxParse解析html格式内容(富文本) 出错
出错有两种1、空格没有被替换2、文字重叠wxParse解析空格会出错，这时候到wxParse文件夹的wxDiscode.js文件里面，将str = str.replace(/ /g, ' ');修改为str = str.replace(/ /g, '\xa0');文字重叠问题就解决了...
2021-01-24 17:06:31
588
原创 JS 对UTC 时间格式（2020-11-27T02:58:41.000000Z）转换成正常时间显示
timeChange(UTCDateString) { if (!UTCDateString) { return '-'; } function formatFunc(str) { return str > 9 ? str : '0' + str } var date2 = new Date(UTCDateString); console.log('时间', date2) var year = date2.getFull.
2020-11-30 09:23:16
1849
原创 js正则表达式过滤表情，输入法表情无法匹配，则反向判断
因为输入法表情正则无法匹配，那就匹配当前文本中，不是数字，标点，英文，汉字的字符，做基本的文本格式处理我这里用到的是替换，标点匹配不够全面，自行添加即可 var mytextarea = e.detail.value.mytextarea; mytextarea = mytextarea.replace(/[^\u4e00-\u9fa5a-zA-Z\d,\.，?？.<>''"":;{}[\|、】【、‘；“”‘’；：。，）（*&……%￥#@！~。]+/g, "..
2020-10-28 11:27:41
1353
原创 JS 版本 斐波那契 （算法）
<!DOCTYPE html><html lang="en"><head> <title>斐波那契</title></head><body> <script> function fid1(n) { if (n <= 1) { return n } return.
2020-10-04 14:53:11
176
原创 算法4 1.3.3 练习
题目： function Stack() { this.dataStore = []; //保存栈内元素，初始化为一个空数组 this.top = 0; //栈顶位置，初始化为0 this.push = push; //入栈 this.pop = pop; //出栈 this.peek = peek; //查看栈顶元素 this.clear =.
2020-10-03 13:27:12
200
原创 JS版本：将缺少左括号的表达式补全括号之后打印出中序表达式 算法4 1.3.9
根据Java版本改编 但我还没看懂先记录一下 可用<!DOCTYPE html><html lang="en"><head> <title>study-vue</title></head><body> <script> function Stack() { this.dataStore = []; //保存栈内元素，初始...
2020-10-02 17:26:28
247
原创 回环变位算法
is//算法4 第一章 第二节，2.2.6isLoop(s,t){ return s.length()==t.length()&&((s+s).indexOf(t)>=0);}
2020-10-01 23:01:58
168
原创 canvas -实现扇形的选择拖拽
效果图<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实现扇形的选择拖拽</title> <style> body{margin: 0;overflow: hidden} #canvas{background: antiquewhite;} </style>&l.
2020-09-26 17:12:27
264
原创 粒子时钟--发射动态--canvas 画布制作
效果图：具体代码：复制可运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>粒子时钟-完整版</title> <style> body { margin: 0; overflow: hidden } ..
2020-09-26 17:09:04
251
原创 实现刮刮乐动态效果
效果图代码：全部粘贴复制 可运行<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <title>刮刮乐-用鼠标擦除动态效果</title> <style> ...
2020-09-26 16:51:56
1070
原创 HTTP的缓存的过程是怎样的？
通常情况下的步骤是:1. 客户端向服务器发出请求，请求资源2. 服务器返回资源，并通过响应头决定缓存策略3. 客户端根据响应头的策略决定是否缓存资源（这⾥假设是），并将响应头与资源缓存下来4. 在客户端再次请求且命中资源的时候，此时客户端去检查上次缓存的缓存策略，根据策略的不同、是否过期等判断 是直接读取本地缓存还是与服务器协商缓存...
2020-08-28 14:50:35
203
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人