web前端
文章平均质量分 58
JA+
CSDN笔记本,佛系更新
展开
-
vue svelte solid 虚拟滚动性能对比
由于svelte solid 两大无虚拟DOM框架,在前端越来越有影响力。因此本次想要验证,这三个框架关于实现表格虚拟滚动的性能。一般情况下,vue3的性能已经足够普通项目使用。为了产品体验接近客户端(C++)实现看齐,有极致的性能场景可能需要更高性能的框架,甚至原生去实现。原创 2024-03-04 16:28:22 · 700 阅读 · 0 评论 -
tauri 访问静态资源,响应头为Content-Type:‘text/html‘
Error: THREE.FBXLoader: Unknown format.原创 2023-11-02 23:45:40 · 364 阅读 · 0 评论 -
Vue setup 中,类似class implements约束的替代方案。
封装vue 组件时,我希望所有的组件都要有某方法,某变量。这种需求在面向对象的class中,用 class XX implements interface 就可以实现。以此来规范每个对象的属性。对于vue SFC 的setup语法糖中,可以使用defineExpose的泛型T,来约束组件中一定需要有的方法和值。原创 2023-04-19 16:54:27 · 222 阅读 · 0 评论 -
SVG preserveAspectRatio 终极理解
红框为viewBox=“0 0 100 200”;meet 按viewBox 短边比例来缩放。slice 按viewBox 长边比例来缩放。preserveAspectRatio 就是控制viewBox下来的东西的位置和缩放的。原创 2023-03-14 17:54:17 · 683 阅读 · 0 评论 -
d3 tree 实现双向动画树总结
使用d3.js 实现双向tree,并实现节点展开收起动画。使用svg 绘制。原创 2023-03-02 21:39:46 · 2068 阅读 · 6 评论 -
vue2.7 + vue-i18n 环境搭建方案
vue2.7 + vue-i18n 使用composition Api 的环境搭建方案,及在普通js中使用vue-i18n原创 2023-02-22 17:29:18 · 1215 阅读 · 0 评论 -
vue 虚拟表格方案
vue虚拟滚动表格小结原创 2022-11-04 16:09:44 · 1381 阅读 · 0 评论 -
请求时展示loading图标问题踩坑小结
发起请求时展示loading,请求返回后取消loading。在abort request业务加入后会有顺序问题。原创 2022-09-01 19:29:57 · 548 阅读 · 0 评论 -
PWA 踩坑 - 第一次加载页面后无法获取CacheStorage某些资源
第一次加载Service Worker后,脱机再刷新,无法获取CacheStorage某些缓存的资源解决方案caches.match(e.request.url)原创 2022-07-27 22:05:29 · 505 阅读 · 0 评论 -
在Vue template 中使用VNode(JSX)
使用 vue 组件 在template中使用VNode原创 2022-06-11 16:15:31 · 3899 阅读 · 1 评论 -
PWA小试 - 安装应用 + manifest.json
一个合法的pwa应用,可以让浏览器提示安装网页前提合法的manifest.json (注意是 m.a.n.i.fest 不是main) 注册了serviceWorker if (navigator.serviceWorker != null) { navigator.serviceWorker.register('sw.js').then(function (registartion) { console.log('支持sw:', registartion.sco.原创 2022-03-22 20:32:40 · 2051 阅读 · 4 评论 -
Babel JS使用structuredClone/Array.at() 等 es2021新语法
structuredClone 原生深拷贝来了,chrome >= 98才支持现为了响应原生特性,使用babel来使用structuredClonebabel.config.js presets: [ [ '@babel/preset-env', { modules: false, // esm 为false,使用esmodule语法 useBuiltIns: 'usage', // 使用的引入,'entry','usage原创 2022-02-22 22:04:26 · 2965 阅读 · 0 评论 -
Vue <keep-alive>踩坑与解决记录
使用vue的keep-alive 可以缓存加载的组件keep-alive存在的问题假设有下面若干tab[ tab1 tab2 tab3 ]三个tab通过<keep-alive><router-view/></keep-alive>切换若:tab1未加载完成时,切换tab2则:tab1中的异步代码仍会继续执行,如果有获取dom元素的代码(包括this.$refs)则会获取不到。由于keep-alive原因,vuex变量变化 ==&...原创 2022-02-09 21:14:02 · 1572 阅读 · 0 评论 -
Ant-design-vue 替换moment为dayjs方式记录
moment通过webpack.ContextReplacementPlugin()移除非中文国际化后,打包依旧比较大。dayjs作为moment的轻量实现,考虑使用dayjs替换momentjs步骤安装插件npm i antd-dayjs-webpack-plugin --save-devwebpack/vue-cli配置// webpack-config.jsconst AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-原创 2022-02-09 20:17:12 · 1770 阅读 · 0 评论 -
Vue 组件懒加载方式记录,点击后下载组件需要的js
webpack,import()语法首屏不展示的组件,在用户点击的时候去加载js,比如弹窗。原创 2021-12-22 11:18:22 · 747 阅读 · 0 评论 -
Vue开发中的坑跌记录
问题不难,但是问题的结果十分具有误导性,不容易定位到根源。问题精简后表示vue methods 中的一个方法被多次调用,方法中直接使用this.xx改变对象内的值this.a = [{a:1,b:2,c:3},{a:1,b:2,c:3}]原创 2021-12-09 16:53:53 · 1381 阅读 · 2 评论 -
VXETable 按需引入不能排序,sortable不生效问题
根据文档,按需引入,配置sortable排序不生效问题官方示例如下import XEUtils from 'xe-utils'import {VXETable, Header, Column, Colgroup, Table } from 'vxe-table'import zhCN from 'vxe-table/lib/locale/lang/zh-CN'VXETable.setup({ i18n: (key, args) => XEUtils.toFormatString原创 2021-11-30 16:47:10 · 2590 阅读 · 0 评论 -
Vue 实现v-sticky 指令,兼容position:sticky滚动吸顶行为
vue指令实现position:sticky 效果,兼容低版本浏览器浏览器会在页面刷新后,自动滚动到上一次的位置,这可能会导致相关的计算有误。原创 2021-11-25 18:00:39 · 2169 阅读 · 0 评论 -
HTML 点击空白处关闭对话框的另类实现(blur)
div 增加属性tabIndex 使div能响应focus和blur事件原创 2021-10-16 11:58:28 · 954 阅读 · 0 评论 -
浏览器兼容 - 旧版overflow:auto特殊情况下不会触发浏览器重排
条件父元素position: relative; 不设置height,或者设置height为auto;子元素position: absolute;元素位置的变动,导致的overflow 滚动条出现变动。demo代码<!DOCTYPE html><html lang="zh_CN"><head> <title>Document</title> <style> .content{ ..原创 2021-08-26 19:25:55 · 333 阅读 · 0 评论 -
Webpack css-loader root配置不生效,url()区分本地/远程资源,记录
情景对于要打包的css文件中,使用url()引入静态图片相对路径,表示静态资源需要打包。url('./images/xxx.png') 绝对路径,表示静态资源在服务器上。url('/xxx.png')所以要根据所写的路径区分是否要处理url()方法通过百度,发现许多文章都写了css-loader有一个root配置,而且默认不解析以 / 开头的url()但是我配置root报错:ValidationError: Invalid options object. CSS Loader ha原创 2021-08-23 19:08:41 · 702 阅读 · 2 评论 -
Webpack babel-plugin-import 导致的全量引入 not defined问题记录
现象import xxx from 'xxx';console.log(xxx); // 报错原因babel.config.js配置中module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ ["import", {libraryName: "xxx", libraryDirectory: "es", style: true}原创 2021-08-13 14:20:48 · 862 阅读 · 0 评论 -
Vue-echarts 更改配置options没有触发视图更新问题解决——配置notMerge:true
前提echart@5.1.2 vue-echarts@6.0.0-rc.6vue-echarts是个将echarts封装为vue组件的包引入后,代码中可以使用<v-chart :option="chartOption"/>来绘制表格现象this.chartOption更改后,如果内容比原来多,则会触发更新,反之不会。例如点击按钮后将this.chartOption设置为空对象{},发现图表并未更新。this.chartOption输出发现已改变。调查根据官.原创 2021-07-22 20:42:27 · 7645 阅读 · 5 评论 -
JS 原生实现类安卓密码输入框
场景除开移动端的场景由于谷歌火狐等浏览器对于input:password的标签会弹出是否保存密码的功能,网上找了一下,没有什么很完美的解决ban原创 2021-06-17 16:55:25 · 480 阅读 · 0 评论 -
Vue 通过keep-alive缓存Tab页面
需求Vue单页应用页面中制作仿浏览器tab页切换的功能新页面打开并建立tab,用户通过点击tab来切换打开的页面,这些页面需要缓存,防止用户切换页面导致的查询结果或表单内容丢失等情况。原创 2021-05-24 11:34:47 · 1983 阅读 · 0 评论 -
优化:el-form label国际化导致的浏览器重排(回流)记录
现象使用el-form 发现在开始加载时,表单布局会有瞬间的变化。分析使用浏览器F12打开控制台的Performance,将CPU 设置为6x slowdown,再次加载页面发现刚加载页面时,input等元素前并未显示label。获取到国际化之后,加载了label,宽度变化,使布局改变截取element-ui ->form-item -> label部分的源码,发现其使用v-if来实现<label :for="labelFor" class="el-form-.原创 2021-03-24 16:46:30 · 305 阅读 · 0 评论 -
Vue 自定义组件开发心得-对话框(重试业务递归实现)
递归实现重试操作参考资料一直没有resolve也没有reject的Promise会造成内存泄露吗?原创 2021-01-29 19:23:36 · 331 阅读 · 0 评论 -
Vue 自定义组件开发心得-对话框
一些组件的开发规范建议。和Vue 开发自定义组件,若关系到对话框时,讨论和比较对话框是集成在组件内部由组件自己控制,还是写在组件外由父组件控制显示与隐藏。原创 2021-01-23 23:53:50 · 1573 阅读 · 0 评论 -
Webpack4-Vue 字体(图标)文件缺失的问题解决
现象打包后启动项目发现iconfont字体文件缺失打开控制台发现字体文件404错误分析打包正式包,一般需要抽离css文件,在webpack4使用mini-css-extract-plugin插件在webpack配置中使用url-loader抽取ttf等字体文件在 ./dist/static/fonts目录下但是 mini-css-extract-plugin抽取的css文件中,使用url引入的文件路径不对解决配置...{ test: /.vue$/, .原创 2021-01-21 08:30:53 · 858 阅读 · 0 评论 -
Webpack 重复导入css,<style>引入了两次问题,sass全局变量配置
现象全局样式被引入了两次,点击<style>...</style>指向的是同一位置。分析vue项目使用scss等预处理语言时,当使用$var全局变量时,需要指定一个公共的文件例如globalVariable.scss来存放所有公共变量,例如公共颜色,边距等。在.vue中使用,需要在scss-loader中增加sass-resources-loader来载入公共全局变量。这样在.vue单文件中<style lang='scss'></style原创 2020-11-20 11:38:59 · 2759 阅读 · 0 评论 -
关于jsonp的个人理解
原理是script 标签的src可以跨域请求js1.前端页面中先定义func回调函数(函数名称任意,此处为举例) func(data){ console.log(data); // data 为后台实际返回的数据 // 获取后台返回后,业务代码…… }2.前端动态通过Javascript DOM 动态生成<script></script>标签,并设置src属性假设jsonp请求url为/jsonp?callback=funcc..原创 2020-09-04 17:58:08 · 109 阅读 · 0 评论