实用小技能
rongyi2233
这个作者很懒,什么都没留下…
展开
-
vue组件渲染不出来,显示<!--->
vue组件显示不出来原创 2023-02-21 20:57:21 · 1010 阅读 · 0 评论 -
html中根据font-size精确计算文本宽度
比如获取到的12px大小的字母w的大小是8.67px;12px大小的字母j的宽度是2.67px,完美~获取到的是真实的文本大小,而不是元素的宽度。利用canvas的方法去获取。原创 2022-09-08 22:42:37 · 1779 阅读 · 0 评论 -
修改vue路由component下的组件名称
有个需求需要用到keep-alive缓存页面,采用了include,需要匹配页面所在的组件名称,但是我们的所有页面引用的组件都是同一个,通过后端返回的数据去渲染不同的页面,此时为了缓存页面,就需要修改路由配置时的页面名称。这样你想命名成啥样都行,用的是component下面的name,路由的name是我们项目里需要,所以保持一致了,不管原组件是啥名字,include匹配的都是components里重命名的名称,完美~折腾了半天,其实简单的一批。原创 2022-09-07 17:11:06 · 2787 阅读 · 2 评论 -
iview和elementUi表格宽度或高度无限拉伸变大的三种解决方案
flex布局,表格宽度无限变宽。原创 2022-08-22 17:03:50 · 2640 阅读 · 1 评论 -
vue的render函数里渲染html字符串,replace替换不区分大小写
vue的render函数里渲染html字符串,replace替换不区分大小写原创 2022-06-29 21:24:09 · 1392 阅读 · 0 评论 -
js数组扁平化、数组对象展开为对象的方法
扁平化reduce 函数迭代function flatDeep(arr) { return arr.reduce((pre, next) => { return pre.concat(Array.isArray(next) ? flatDeep(next) : next) },[])}扁平化一层的时候:arr.reduce((pre, item) => { return pre.concat(item)}, [])最新的flat方法经测试,5原创 2022-05-19 10:19:22 · 1394 阅读 · 0 评论 -
踩坑记录--vue2.0+elementUI开发遇到的问题
改为下面的代码就正常了错误原因是webpack打包逻辑,webpack4中动态import不支持变量方式,查看路由返回的信息,只是返回一个方法。原来是用import导入的 : // 静态路由懒加载 export const loadView = (view) => { return () => import() }改为require引入方式::export const loadView = (view) => { return (resolve:) => require([], resolve) }使用原创 2021-11-10 15:29:42 · 2859 阅读 · 0 评论 -
纯前端:vue将HTML转PDF导出
纯前端:vue将HTML转PDF导出// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default{ install (Vue, options) { Vue.prototype.getPdf = function (selector) { var title = this.htmlTitle html2Canvas(document.querySe原创 2021-11-04 10:40:09 · 282 阅读 · 0 评论 -
本地nodejs+gulp完成字体转换 ttf转成woff2格式
本地字体转换 ttf转成woff2格式各种找线上转换工具,各种下载软件都搞不定,最后发现自己动手分分钟完事~开搞!1.安装gulpnpm install gulp2.安装python地址:https://www.python.org/downloads/windows/直接下载安装包,双击安装,下一步直到安装完成。3.安装gulp-ttf2woff2npm install --save-dev gulp-ttf2woff24.新建gulpfile.js文件var ttf2woff2原创 2021-08-26 21:12:46 · 2295 阅读 · 2 评论 -
js可拖动改变div大小,可拖动改变div位置
核心代码拖动改变方块位置$(".resizeBox").on({ 'mousedown':function(e){ var pageX=e.pageX; var pageY=e.pageY; $(".resizeBox").on('mousemove',function(e){ var newPageX=e.pageX; var newPageY=e.pageY; var moveX=newPageX-pageX; var moveY=newPageY-pageY.原创 2021-04-22 14:40:59 · 843 阅读 · 0 评论 -
js粘贴功能,在光标位置插入内容
js粘贴功能,在光标位置插入内容var selection=window.getSelection()var range=selection.getRangeAt(0)var node = document.createElement("span");node.setAttribute("class", "at");node.innerHTML = "<span style='color:#f00'>666666</span>";range.insertNode(node原创 2021-04-16 11:30:50 · 710 阅读 · 0 评论