我的博客

vue项目中可能会使用到。记录于2024-08-17。

在已有的子节点前插入一个新的子节点，也可以利用已知的子节点获取其父节点：existNode.parentNode.insertBefore(newNode,existNode);复制节点domNode。neborNode.previousElementSibling ：返回某个节点的上一个兄弟元素节点（不包括文本节点、注释节点）neborNode.previousSibling：返回某个节点的上一个兄弟节点（包括文本节点、注释节点）将某个子节点替换为另一个新节点，新节点可以是已存在的，也可以是新创建的。

【代码】自动注入less（sass、scss、stylus）全局变量。

使用webpack内置的 terser 工具，在vue.config.js文件加上相应的配置即可。同样是使用 terser 工具，不过vite没有内置terser，需要手动安装依赖。安装完后在vite.config.js文件加上相应的配置即可。

vue3项目中实现导入Excel表格数据

媒体查询：根据设备显示器的特性（如视窗宽度、屏幕宽度、设备方向等）来设定不同的CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

实现：在legend图例文本样式配置中给color设置一个空数组即可。需求：设置legend图例文本的颜色与对应折线一致。记录于2023-7-21。

记录于2023-7-21。1、二维数组转一位数组。2、多维数组转一维数组。

虽然另外三个border不显示，但还是占位的，像上面示例的向下三角形，我们可以把border-bottom的设置去掉，这样border-bottom就不占位了。其他方向的三角形以此类推。3、保留一个三角形，将不需要的border设置成透明的，想要哪个方向的就保留哪个的。4、各个border设置不同的宽度，可以得到不同形状的三角形。实现方法：利用元素的border画出三角形。记录于2023-7-12.

qs.stringify使用skipNulls选项忽略解析null值

记录于2023-3-20。

Cookie的使用（基于js-cookie插件）。

解决HTML代码中的文本换行导致出现字间距空格的问题

ElementUI 日期范围选择器设置选择跨度一年、30天、7天

Vue项目中Echarts图表的引入、使用，以及封装成Echarts组件使用

将富文本转换为普通文本。

使用echarts.graphic.LinearGradient 渐变⽣成器设置仪表盘轴线颜色渐变效果： 效果： 完。记录于2022-6-16.

一、下载pdf预览需要用到的相关文件（即hybrid文件夹）二、将步骤一下载解压得到的hybrid文件夹放在/src目录下，即 /src/hybrid三、预览pdf1、预览pdf需要用到uniapp的webview组件，所以注册并创建一个专门用于预览pdf的页面，页面使用webview组件。/pages/webview/index.vue：<template> <view style="width: 100%;"> ..

一、创建scss变量文件variable.scss和公共类文件common.scss，放在目录/src/static/css/下variable.scss// 主题色$primary-color: #0099FF;// 其他变量......若要添加其他变量直接在文件里加即可。common.scss@import './variable.scss';// 公共类.color-primary { color: $primary-color;}.bg-primary

onLoad () { uni.getSystemInfo({ success: (res) => { // 注意这里获得的高度宽度都是px，需要转换rpx console.log(res.screenHeight); // 屏幕高度，包含导航栏 console.log(res.screenWidth); // 屏幕宽度 console.log(res.windowHeight); // 可使用窗口高度，不包...

解决办法一：style去掉scoped// 修改前<style lang="scss" scoped>page { background-color: #f5f5f5;}</style>// 修改后<style lang="scss">page { background-color: #f5f5f5;}</style>解决办法二：为了避免页面的样式影响到其他页面，需要保留scoped。这时可以在另外一个没有scop

一、在series的itemStyle里配置：series: [ { name: '电流B', data: [15, 8, 23, 17, 18, 20, 22, 16, 18, 12, 24, 20], type: 'line', // 区域面积样式 areaStyle: { color: '#BACDEC' }, // 折线样式 lineStyle: { color: '#C24141' },

原来的iconfont.css：@font-face { font-family: "iconfont"; /* Project id 2762712 */ src: url('iconfont.woff2?t=1631523743638') format('woff2'), url('iconfont.woff?t=1631523743638') format('woff'), url('iconfont.ttf?t=1631523743638') format(

一、空值合并运算符（??）let alet blet c = 0let d = 'hello'a = b ?? dconsole.log(a) // a='hello'a = c ?? dconsole.log(a) // a=0当 ?? 的左侧变量是undefined、null之外的任何值，a都会等于左侧变量的值，否则a等于右侧变量的值。二、空值赋值运算符（??=）let alet blet c = 0let d = 'hello'a ??= dcon

获取上个月，支持跨年// 获取上个月import { moment } from '@/filters/moment'const now = new Date()const prevMonth = moment(now.setMonth(now.getMonth() - 1), 'YYYY-MM')console.log(prevMonth)如果当月是2022-04，则prevMonth为2022-03；如果当月是2022-01，则prevMonth为2021-12。以此类

解决方法：给div设置css属性：word-break: break-all; 如下：<div> <div class="website" style="width:300px;"> https://https://mp.youkuaiyun.com/mp_blog/creation/editor?spm=1001.2014.3001.5352 </div></div><style>.website { word-br

开发背景：Vue项目实现代码： mounted () { window.addEventListener('scroll', (event) => { // console.log(216, event.target.documentElement.scrollTop) const headerHeight = document.querySelector('.page-header').clientHeight const a = docu

一、代码实现 // domId为需要定位的元素id changeTab (domId) { // const id = decodeURIComponent(`#${domId}`) // const el = document.querySelector(id) const el = document.getElementById(domId) // 上面这种方法获取el也可以 const rect = el.getBoundingCl

解决办法：加上 align-self: flex-start原因：由于是flex布局，左边菜单栏的高度变得和右边的一样，且高于屏幕高度。.nav-menu { align-self: flex-start; position: sticky; top: 64px; display: flex; flex-direction: column;}记录于2022-3-2...

开发背景：vue项目实现代码：// 关键字变红function keywordRed (keyword) { if (keyword && keyword !== '') { const nodesObj = document.getElementsByClassName('item-title') const nodes = Object.values(nodesObj) nodes.forEach(item => { cons

开发背景：文章详情页面需要分享到第三方，包括qq、qq空间、微博、微信。一、封装一个share.js文件，放在目录/utils下// share.js// url - 需要分享的页面地址（当前页面地址）// title - 分享的标题（文章标题）export function toQQzone (url, title) { url = encodeURIComponent(url) title = encodeURIComponent(title) window.open(`

1、实现代码：// el - 要设置字体的最外层元素，size - 字体大小，单位pxfunction setFontSize (el, size) { // 获取元素el下的所有元素nodes const nodesObj = el.getElementsByTagName("*") const nodes = Object.values(nodesObj) nodes.forEach(node => { node.style.fontSize = size + "p

一、封装一个print.js文件，放在目录/utils下// print.jsexport function clear () { const iframes = document.body.querySelectorAll('iframe.print-iframe') iframes.forEach(iframe => { document.body.removeChild(iframe) })}export function print (el) { //

方法一：DOM.className = '类名';说明：一次只能设置一个类值，如果当前属性本身存在类值，会被替换。方法二：DOM.setAttribute("class", "类名")DOM.removeAttribute("class", "类名")说明：setAttribute用于创建或改变某个新属性，如果指定属性已经存在，则只设置该值并且会替换原来的值。方法二：DOM.classList.add('类名一', '类名二', '类名三); // 添加一个或多个类名

开发背景：项目使用了Nuxt.js框架。Nuxt.js 是一个基于 Vue.js 的通用应用框架，具体查看关于 Nuxt.js - NuxtJS | Nuxt.js 中文网一、封装飘窗组件FloatWindow.vue，放在目录/components下<template> <nuxt-link v-if="visible" class="float-window" :style="{ left: `${left}px`, t

一、使用 charCodeAt() 方法和 fromCharCode() 方法let letter1 = 'A'let lower_letter = String.fromCharCode(letter1.charCodeAt(0) + 32)console.log(lower_letter) // 'a'let letter2 = 'b'let upper_letter = String.fromCharCode(letter2.charCodeAt(0) - 32)console.l

环境：uniapp项目一、view视图<canvas style="width: 400px; height: 40px;" canvas-id="myCanvas" id="myCanvas"></canvas>二、js代码 onReady(e) { var ctx = uni.createCanvasContext('myCanvas') ctx.font="16px Arial"; ctx.textAlign = "center"

背景：有个蓝牙相关的小程序项目，需要向蓝牙设备写入数据，用到相关的知识，记录一下。一、字符串转16进制字符串 // 字符串转16进制字符串 string2Hex(str) { let val = "" for (let i = 0; i < str.length; i++) { if (val == "") val = str.charCodeAt(i).toString(16) else

一、时间戳转成16进制字符串JavaScript toString() 方法：把一个 Number 对象转换为一个字符串，并返回结果。语法：NumberObject.toString(radix)radix - 表示数字的基数，是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。返回值：数字的字符串表示。例如，当 radix 为 2 时，NumberObject 会被转换为二进制值表示的字符串。注意：当调用该方法的对象不是 Number 时抛出 TypeError 异常。

一、uniapp前端生成图形验证码并校验1、在src/utils目录下新建文件mcaptcha.js// mcaptcha.jsexport class Mcaptcha { constructor(options) { this.options = options; this.fontSize = options.height * 3 / 6; this.init(); this.refresh(); } init() { this.ctx