- 博客(72)
- 资源 (2)
- 收藏
- 关注
原创 html 实现一个表头固定、列表可滚动、宽度自适应、文字自动换行的table
html 实现一个表头固定、列表可滚动、宽度自适应、文字自动换行的table。
2023-12-07 11:03:23 583
原创 echarts获取折线点击数据,并解决重复发起请求的问题
echarts官方中,只能在折线的拐点获取数据,如果想查询这一条折线对应的所有相关数据就拿不到条件。通过getZr()方法获取到点击时的数据,然后通过判断找到点击的线的索引。清除绑定事件要这样写,否则每一次图表重新渲染,点击事件就会多重复发起一次。
2023-05-11 13:14:08 1332 1
原创 (一)语法 & 基础概念
const定义变量不可以修改,而且必须初始化.var定义的变量可以修改,如果不初始化会输出undefined,不会报错.let是块级作用域,函数内部使用let定义后,对函数外部无影响。
2023-05-10 11:17:26 334
原创 node16.14.0 对应node-sass sass-loader 版本
node与node-sass sass-loader 版本的对应
2022-12-02 13:30:11 1129 1
原创 去除字符串中空格的正则表达式
去除字符串内所有的空格str = str.replace(/\s*/g,'');去除字符串内两头的空格str = str.replace(/^\s*|\s*$/g,''); 去除字符串内左侧的空格str = str.replace(/^\s*/,''); 去除字符串内右侧的空格str = str.replace(/(\s*$)/g,'');...
2022-05-20 17:00:05 498
原创 使用Echarts图表绘制数据大屏遇到的问题汇总
//柱状图配置项数据 var barOption = { tooltip: { trigger: 'item' }, grid: { top: '20%', left: '15%', width: '80%', height: '80%', containLabel: true }, xAxis:
2022-05-10 17:50:49 587
原创 不同域名(多域名)下共享登录状态
不同域名(多域名)下共享登录状态1.传统的做法是可以在cookie里面的domain属性设置需要跨域的域名,这样就可以在多个站点实现共享cookie,也就是可以通过这种方式共享登录状态。这种方式比较简单快捷,但是有一个缺陷就是,共享cookie的站点需要是同一个顶级域名,例如xx1.example.com/xx2.example.com。2.采用的是JWT认证用户,那么,在我的域名下登录后,跳转到另一个需要共享登录状态的域名时,可以将token一起携带过去,这样,目标站点获取到携带的token后存储下来
2022-02-25 15:46:44 8181
原创 Js new过程发生了什么
1.在函数内部创建了一个空对象2.通过this指向把函数的方法和属性给新创建的对象3.返回这个创建的对象代码实现:Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。// 先创建一个构造函数function Fn(name){ this.name = name}// 实现一个new的方法function newMethod(parent) { //1. 第一步创建一个空对象 这里使用Object.create(
2022-02-23 10:38:01 452
原创 vue项目解决代码部署后浏览器存在缓存问题的方案
vue项目,代码部署之后,如何解决浏览器存在缓存问题1.在index.html头部添加如下代码:<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> 2.在vue.config.js中添加如下代码:const Timestamp = new Date().getTime();
2022-02-22 20:40:17 2935
原创 悬浮小广告
<!--悬浮小广告样式的提示信息--> <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0;" v-show="thedivShow" @mouseover="clearFdAd" @mouseout="starFdAd"> <a href="http://xxxxxx" target="_blank"> ..
2022-02-18 14:35:37 628
原创 倒计时组件
<template> <div class="_base-count-down no-rtl"> <div class="content"> <slot v-bind="{ d: days, h: hours, m: mins, s: seconds, hh: `00${hours}`.slice(-2), mm: `00${mins}`.slice(-2), ss: `00${
2022-02-17 11:03:05 85
原创 加减乘除工具类
在util文件夹中创建calculation.js文件,内容如下:var countDecimals = function(num) { var len = 0; try { num = Number(num); var str = num.toString().toUpperCase(); if (str.split('E').length === 2) { // scientific notation var isDecimal = false;
2022-02-16 11:31:38 145
原创 flex结合order实现从左到右的瀑布流
flex结合order实现从左到右的瀑布流这种方式可以做到先从左到右,再从上到下显示缺点:需要预先设定flex容器的高度,且调整页面大小时会出现一些间距过大的问题应对:列表改变时,动态计算flex所需高度缺陷:整体上的每列数量还是按列平均分布的,并未进行填充。关键代码vue//vue代码 watch: { itemList(newVal) { // 为瀑布流重新计算布局 this.$nextTick(() => { const items
2022-02-14 17:20:36 655
原创 函数调用、方法调用及构造函数调用
构造函数和其它函数唯一的区别就是调用方式不同,但构造函数还是函数,不存在定义构造函数的特殊语法,任何函数都可以通过new操作符来调用,只要用new操作符来调用它就可以作构造函数;但是任何函数也可以不通过new 操作符来调用,这样就和普通的函数没有区别。function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.sayName=function(){ console.
2022-01-21 15:22:07 132
原创 获取一个对象在数组中的索引
getArrIndex(arr, obj) { let index = null; let key = Object.keys(obj)[0]; arr.every(function(value, i) { if (value[key] === obj[key]) { index = i; return false; } return true; }); return index; },
2022-01-20 14:20:34 1096
原创 实现自适应宽度的内容输入框
方法一 :给普通 div 标签设置 contenteditable=“true”,设置 inline-block 以后,就可以自适应内容宽度了方法二 : 将 input 的输入内容同步到一个透明的 div ,父级宽度跟随 div 的宽度,然后设置 input 为绝对定位并覆盖在上面,设置宽度为 100%...
2022-01-19 16:37:15 726
原创 JS 数组合并、去重
// 合并、去重concatArr(arr1, arr2) {function dedupe(array) {return Array.from(new Set(array));};var arr = arr1.concat(arr2);arr = dedupe(arr);//去重方法return arr;},
2021-12-27 14:49:51 350
原创 添加千分符
const numberWithCommas = (x) => { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
2021-12-17 14:29:04 210
转载 加载特效整理
1、一个"滚动"加载跳动旋转的的方块再加上渐变的影子简单的构成了一个物体滚动的画面<!-- loading.html --><div class="boxLoading"></div>/* loading.css */.boxLoading { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bot
2021-12-17 14:25:38 205
原创 todo-tree使用设置
"todo-tree.highlights.customHighlight": { "BUG": { "icon": "bug", "foreground": "#F56C6C", "type": "line" }, "FIXME": { "icon": "flame", "foreground": "#FF9800", "type":...
2021-10-11 11:26:04 760
原创 npm更换华为镜像
npm更换华为镜像npm config set registry https://mirrors.huaweicloud.com/repository/npm/查看镜像:npm config get registry
2021-10-09 14:23:23 1088
原创 工作中常用的前端知识总结
1.使用css写出一个三角形角标元素宽高设置为0,通过border属性来设置,让其它三个方向的border颜色为透明或者和背景色保持一致,剩余一条border的颜色设置为需要的颜色。div { width: 0; height: 0; border: 5px solid #transparent; border-top-color: red;}2.水平垂直居中通常只使用两种方式定位或者flex就足够了。div { width: 100px; he
2021-10-05 14:45:17 383
原创 小程序配置文件
{ "pages": [ "pages/index/index", "pages/logs/logs" ], //用于设置小程序的状态栏、导航条、标题、窗口背景色。 "window": { "navigationBarTitleText": "小程序页面顺序有影响吗",//导航栏标题文字内容 "navigationBarBackgroundColor": "#848484",//导航栏背景颜色,如"#000000" "navigati
2021-09-24 15:56:54 67
原创 微信小程序实现下拉刷新和上划加载与索引栏结合
问题描述:微信小程序实现下拉刷新和上划加载时,通常使用scroll-view,但是scroll-view无法实现原地下拉刷新,只有先向下滚动后再滚动到顶部时才会触发,不适用于一些数据加载场景,也不适合与索引共同使用。代码实现:通过系统自带的下拉刷新和触底方法,实现与索引结合的需求。.wxml<van-index-bar index-list="{{ indexList }}" scroll-top="{{ scrollTop }}"> <view wx:for="{{i
2021-09-14 16:07:00 270
转载 微信小程序将图片转换为二进制流保存到mysql数据库中
changeBlob: function(imgPath) { wx.chooseImage({ success: res => { // 借鉴:https://blog.csdn.net/qq_36875339/article/details/81086205 // 简写模式: let imgbase64 = 'data:image/png;base64,' + wx.getFileSystemManager().readFileS
2021-07-18 22:19:14 1632 5
原创 element组件el-table样式重定义 去掉背景色下划线
/deep/ .el-table__body { border-collapse: separate; border-spacing: 0px 20px; } /deep/ .el-table, .el-table__expanded-cell { background-color: transparent; } /deep/ .el-table th, .el-table tr { background-...
2021-06-23 10:53:34 635
转载 Vue中的@keyup事件
Vue中的@keyup事件@keyup 是按键松开的事件,当指定的按键松开会触发的事件。比如:平台登录页面使用该事件,当输入账号和密码后,直接回车完成登录@keyup.enter 回车按键松开@keyup.left 左键松开@keyup.right 右键松开@keyup.up 上键松开@keyup.down 下键松开@keyup.delete 删除键松开...
2021-06-21 15:27:35 2167
转载 CSS 设置背景图片固定
CSS 设置背景图片固定大小 无论屏幕如何增大 背景图片保持中间 多余两边用颜色填充,适应各种大屏幕及拉伸css如下:.test-img{ background-image: url("./XXX.png"); background-position: center; background-size: contain; background-repeat: no-repeat; background-color: rgb(116,177,255);}————
2021-06-18 18:01:06 318
原创 Vue在package.js文件中配置env适配开发环境、测试环境、生产环境
在项目根目录新建三个env文件.env.development //开发环境.env.production //生产环境.env.test //测试环境.env.development 文件内容:NODE_ENV = 'development'VUE_APP_MODE = 'development'VUE_APP_BASE_URL = "http://testapi"....env.production 文件内容:NODE_ENV = 'production'VUE_APP_MOD
2021-03-18 17:38:32 623
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人