- 博客(90)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 用js操作dom节点的一些方法
在已有的子节点前插入一个新的子节点，也可以利用已知的子节点获取其父节点：existNode.parentNode.insertBefore(newNode,existNode);复制节点domNode。neborNode.previousElementSibling ：返回某个节点的上一个兄弟元素节点（不包括文本节点、注释节点）neborNode.previousSibling：返回某个节点的上一个兄弟节点（包括文本节点、注释节点）将某个子节点替换为另一个新节点，新节点可以是已存在的，也可以是新创建的。
2024-05-11 00:24:25
641
原创 Vue项目打包配置生产环境去掉console.log语句的方法
使用webpack内置的 terser 工具，在vue.config.js文件加上相应的配置即可。同样是使用 terser 工具，不过vite没有内置terser，需要手动安装依赖。安装完后在vite.config.js文件加上相应的配置即可。
2024-04-09 17:05:55
1430
原创 CSS媒体查询的用法
媒体查询：根据设备显示器的特性（如视窗宽度、屏幕宽度、设备方向等）来设定不同的CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
2023-08-23 17:31:05
2620
原创 Echarts折线图设置legend图例文本的颜色与对应折线一致
实现：在legend图例文本样式配置中给color设置一个空数组即可。需求：设置legend图例文本的颜色与对应折线一致。记录于2023-7-21。
2023-07-21 16:20:46
2295
原创 用CSS画三角形
虽然另外三个border不显示，但还是占位的，像上面示例的向下三角形，我们可以把border-bottom的设置去掉，这样border-bottom就不占位了。其他方向的三角形以此类推。3、保留一个三角形，将不需要的border设置成透明的，想要哪个方向的就保留哪个的。4、各个border设置不同的宽度，可以得到不同形状的三角形。实现方法：利用元素的border画出三角形。记录于2023-7-12.
2023-07-12 14:46:10
101
原创 vs code 提交代码弹框提示：请确保已在git中配置您的“user.name”和“user.email” ——解决方法
修改完项目代码，准备提交到git上，结果提交失败，弹框提示：请确保已在Git中配置您的“user.name”和“user.email”
2023-02-24 11:31:16
16521
原创 Vue项目中Echarts图表的引入、使用，以及封装成Echarts组件使用
Vue项目中Echarts图表的引入、使用，以及封装成Echarts组件使用
2022-10-18 14:53:38
1700
1
原创 uniapp App端 echarts 设置tooltip的formatter不生效问题及解决办法
在App端实现，图表的tooltip提示框中展示数值的单位。
2022-09-01 11:39:12
9044
7
原创 echarts.graphic.LinearGradient 渐变色⽣成器；设置渐变色仪表盘
使用echarts.graphic.LinearGradient 渐变⽣成器设置仪表盘轴线颜色渐变效果： 效果： 完。记录于2022-6-16.
2022-06-16 10:59:46
9270
3
原创 uniapp App端 实现pdf文件预览
一、下载pdf预览需要用到的相关文件（即hybrid文件夹）二、将步骤一下载解压得到的hybrid文件夹放在/src目录下，即 /src/hybrid三、预览pdf1、预览pdf需要用到uniapp的webview组件，所以注册并创建一个专门用于预览pdf的页面，页面使用webview组件。/pages/webview/index.vue：<template> <view style="width: 100%;"> ..
2022-05-27 15:11:26
22242
32
原创 uniapp 添加scss全局变量、scss公共类
一、创建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
2022-05-18 09:24:34
22206
原创 uniapp 获取屏幕高度
onLoad () { uni.getSystemInfo({ success: (res) => { // 注意这里获得的高度宽度都是px，需要转换rpx console.log(res.screenHeight); // 屏幕高度，包含导航栏 console.log(res.screenWidth); // 屏幕宽度 console.log(res.windowHeight); // 可使用窗口高度，不包...
2022-04-25 10:17:52
4032
原创 uniapp App端页面设置背景色无效的问题及解决办法
解决办法一：style去掉scoped// 修改前<style lang="scss" scoped>page { background-color: #f5f5f5;}</style>// 修改后<style lang="scss">page { background-color: #f5f5f5;}</style>解决办法二：为了避免页面的样式影响到其他页面，需要保留scoped。这时可以在另外一个没有scop
2022-04-20 17:36:51
6108
3
原创 echarts设置折线图的symbol标记的颜色
一、在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' },
2022-04-20 14:13:03
9876
原创 解决uniapp App端iconfont图标显示异常问题
原来的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(
2022-04-14 09:14:37
2272
2
原创 js的 空值合并运算符（? ?）、空值赋值运算符（? ? =）、可选链（?.）
一、空值合并运算符（??）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
2022-04-12 15:44:30
1329
原创 获取上个月，支持跨年
获取上个月，支持跨年// 获取上个月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。以此类
2022-04-06 11:35:41
887
原创 英文网址在div容器不换行，溢出的问题
解决方法：给div设置css属性：word-break: break-all; 如下：<div> <div class="website" style="width:300px;"> https://https://mp.csdn.net/mp_blog/creation/editor?spm=1001.2014.3001.5352 </div></div><style>.website { word-br
2022-03-31 09:57:31
211
原创 js location.href 和 location.origin等location对象属性
1、location.href当前页面的完整地址，包括参数2、location.origin当前页面的域名
2022-03-29 19:49:55
2793
原创 js实现web端监听页面滚动切换当前tab
开发背景：Vue项目实现代码： mounted () { window.addEventListener('scroll', (event) => { // console.log(216, event.target.documentElement.scrollTop) const headerHeight = document.querySelector('.page-header').clientHeight const a = docu
2022-03-02 10:44:20
779
原创 js实现web端锚点定位
一、代码实现 // domId为需要定位的元素id changeTab (domId) { // const id = decodeURIComponent(`#${domId}`) // const el = document.querySelector(id) const el = document.getElementById(domId) // 上面这种方法获取el也可以 const rect = el.getBoundingCl
2022-03-02 10:38:24
428
原创 用flex布局左右布局时，左边菜单栏position: sticky不生效
解决办法：加上 align-self: flex-start原因：由于是flex布局，左边菜单栏的高度变得和右边的一样，且高于屏幕高度。.nav-menu { align-self: flex-start; position: sticky; top: 64px; display: flex; flex-direction: column;}记录于2022-3-2...
2022-03-02 10:02:59
1810
3
原创 js实现搜索关键字高亮
开发背景：vue项目实现代码：// 关键字变红function keywordRed (keyword) { if (keyword && keyword !== '') { const nodesObj = document.getElementsByClassName('item-title') const nodes = Object.values(nodesObj) nodes.forEach(item => { cons
2022-03-01 19:28:42
6173
3
原创 Vue项目实现web端第三方分享（qq、qq空间、微博、微信）
开发背景：文章详情页面需要分享到第三方，包括qq、qq空间、微博、微信。一、封装一个share.js文件，放在目录/utils下// share.js// url - 需要分享的页面地址（当前页面地址）// title - 分享的标题（文章标题）export function toQQzone (url, title) { url = encodeURIComponent(url) title = encodeURIComponent(title) window.open(`
2022-02-25 17:12:13
2819
6
原创 js实现字体大小设置
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
2022-02-25 16:51:30
5222
原创 Vue项目实现web端打印页面
一、封装一个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) { //
2022-02-25 16:41:31
490
原创 原生js给DOM元素添加、删除类名
方法一：DOM.className = '类名';说明：一次只能设置一个类值，如果当前属性本身存在类值，会被替换。方法二：DOM.setAttribute("class", "类名")DOM.removeAttribute("class", "类名")说明：setAttribute用于创建或改变某个新属性，如果指定属性已经存在，则只设置该值并且会替换原来的值。方法二：DOM.classList.add('类名一', '类名二', '类名三); // 添加一个或多个类名
2022-02-25 16:10:52
12993
原创 Vue项目实现web端飘窗
开发背景：项目使用了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
2022-02-25 15:43:41
1239
8
原创 如何遍历多级树状数据查找某个节点
实现代码：// data是根节点对象，对象有children数组，children里的节点可能还有更多级的childrenconst findData = (targetId, data) => { if (data.id === targetId) return data if (Array.isArray(data.children)) { for (let i = 0, l = data.children.length; i < l; i++) { le
2022-02-17 15:38:39
525
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人