自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

h_未来可期_的博客

日常会更新一些前端技巧及问题

  • 博客(55)
  • 收藏
  • 关注

原创 vue输入中文,获取英文首字母缩写

使用过程中我发现:charcase传0的时候是全部拼音,1的时候是首字母小写,2的时候是大写,可能注释有误,望大家注意!经查:使用 js-pinyin 这个第三方插件即可实现。关于setOptions函数中两个参数解释如下。例如:输入“博客”,输出‘BK’ 等等……

2024-11-06 21:45:00 337 1

原创 highcharts的datalabels标签格式化

代表2位小数,效果如下图。y就是当前数据点的值,

2024-10-30 21:45:00 212

原创 vscode每次提交代码都需要输入账号密码

此命令是将Git的凭证存储在本地一个文件中,每次git需要使用的时候从文件中读取。存储在"/用户/用户名/.git-credentials"文件下。这时候只要在下次提交代码的时候输入一次账号密码即可,以后再提交的时候就不需要了。vscode每次提交代码都需要输入一次账号密码。

2024-10-30 21:15:00 998

原创 highcharts的dataLabels模糊有阴影如何去除

最后发现highcharts原生默认是将dataLabels生成tspan标签,然后它自己带有fill属性。最后解决方案如下:使用useHTML属性,将datalabels转换为span标签显示,去掉默认样式即可。一开始以为是颜色的问题,后来发现改成白色有黑色的文字边框,改成黑色有白色的文字边框(如下图)

2024-10-28 21:00:00 175

原创 vue文件style标签变成黄色,media query is expected

media query is expected

2024-08-08 21:15:00 294

原创 微信小程序/vue将金额/数字转为千分位显示在页面上

微信小程序和vue将数字转为千分位数字

2024-07-31 21:30:00 322

原创 js验证字符串中是否包含多个字符串

js验证字符串中是否包含某些字符串

2024-05-15 19:30:00 978

原创 img标签禁止右键点击复制图片等功能

html-img标签禁止右键功能

2023-12-06 19:00:00 686

原创 企业微信嵌套H5页面下载文件(文件流)

要注意不同文件的new blob后生成的对象type是不同的,需要自己定义,下面是几种常见类型。但是,企业微信下载完文件会出现标题栏出现UnKnown文字如图,目前还没有解决!

2023-12-05 15:53:02 2822 3

原创 js数组对象根据某一属性去重

开发过程中遇到的js几个数组合并,但是有重复项,这时候我们想去掉它的重复项,就要用到去重,这里主要是用到了ES6的Map()

2023-07-19 00:15:00 302

原创 微信小程序预览文件,解决部分手机文件名乱码问题

iOS手机上,打开以后页面标题是文件预览,但是在安卓手机上,打开以后文件名显示的是一堆乱码,虽然不影响查看文件,但是还是很别扭,所以加上。经过测试发现,iOS手机可以打开,部分安卓手机无法打开该文件,最终更换预览方式。要注意在微信小程序后台配置downloadFile合法域名!参数,并在最后加上对应文件名。中配置上该url对应的域名。注意要在小程序后台的。

2023-07-06 17:10:55 1510

原创 平铺数据获取树形数据的方法、树形数据排序方法

平铺数据获取树形数据的方法、树形数据排序方法

2023-01-16 11:29:59 446 3

原创 el-upload解决无法二次上传问题

el-upload无法二次上传、二次上传失败

2023-01-16 10:28:53 5805

原创 el-table展示枚举值

el-table表格显示枚举

2022-11-15 15:15:52 1903

原创 js字段名下划线命名转驼峰,驼峰转下划线

js字段名下划线命名转驼峰,驼峰转下划线

2022-11-04 15:45:26 945

原创 js提取对象数组中的几个属性组成新对象数组

js提取对象数组中某几个属性

2022-10-12 11:16:20 3532

原创 js向下取整、向上取整、四舍五入、取绝对值

Math函数

2022-09-19 16:08:08 233

原创 wx.navigateBack()函数返回上一页并传参

wx.navigateBack()函数返回上一页并传参

2022-07-04 15:59:19 3987

原创 微信小程序报错errMsg: “navigateTo:fail webview count limit exceed“

微信小程序报错errMsg: "navigateTo:fail webview count limit exceed"

2022-07-01 15:43:05 2180

原创 微信小程序设置文字样式white-space失效

微信小程序文本样式,分段展示

2022-06-06 16:05:54 2089

原创 使用echarts真机显示模糊

在开发微信小程序的时候,遇到了微信开发工具显示清晰,但是真机显示不清晰的问题,在手机上运行截图如下后来查阅资料得知,在微信小程序中含有像素比一说,在小程序中获取像素比方法如下微信小程序官方获取屏幕像素比的方法:https://developers.weixin.qq.com/miniprogram/dev/dev_wxwork/dev-doc/qywx-api/foundation/wxgetsysteminfo.html所以在初始化图标的时候,可以把这个值传进去 getPixelRatio(

2022-04-19 19:00:00 1196

原创 echarts将x轴展示在图标上方

echarts让x轴固定在上方在echarts中,普通折线图x轴默认在图标下方,如果要展示在图标上面,需要配置一个属性xAxis的position属性 设置为top配置后,展示效果如下这样 就完成了echarts将x轴展示在图表下方的功能了...

2022-04-18 10:38:05 7585

原创 解决“start value has mixed support, consider using flex-start instead”编译警告

今天写项目的时候,写完保存突然报了n多个警告,后来百度了一波才发现原来是flex写的不规范导致的然后将start改成flex-start就解决了

2022-03-25 18:03:47 610

原创 vue实现el-menu和el-tab联动

vue通过el-menus和el-tabs联动,实现点击侧边栏,页面内显示一行tab以及点击tab切换路由实现效果如下实现思路 左侧边栏添加点击事件/设置el-menu的路由模式,然后监听路由的变化,拿到的路由去改变el-tabs绑定的属性,然后改变el-tab-pane循环的数组,然后设置el-tabs的点击/删除事件,最终实现联动首先使用vuex定义公共状态openTab以及activeIndexTab 也就是循环的数组和当前高亮import Vue from "vue"impo

2022-01-19 14:58:12 5219 19

原创 vue中el-input回车事件刷新页面

需求在页面中,输入框中输入内容以后,回车查询下面的数据方案使用input的回车事件 => @keyup.enter.native="”问题页面中点击回车以后,会刷新页面,并且路由中加了一个?解决方案查证后得知,form表单中,如果只有一个input框的话,回车的时候默认提交了表单,导致刷新了页面方案1 添加一个其他的input,但是不显示出来vue的话不能使用v-if修饰,v-if还是会出问题,必须使用v-show<el-form ref="searchFom"

2021-12-31 16:43:58 2124

原创 ES6-----解构赋值

简介ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构以前的时候,提取某对象里面的属性必须这样做const obj = { name: '张三', age: 22, gender: '男', doing: { morning: '111' }}let name = obj.namelet age = obj.agelet gender = obj.genderlet morning = obj.doing.m

2021-12-30 10:57:41 750 1

原创 ES6 ------ let 和 const 关键字

区别var存在变量提升;全局变量;可重复声明变量,可重新赋值;let不存在变量提升;局部变量(作用域内有效);不可重复声明变量;不能重新赋值const不存在变量提升;局部变量(作用域内有效);不可重复声明变量,不可重新赋值(声明时必须赋值);let1. 基本用法let 声明的变量只在代码块内有效,也就是花括号内, var声明的变量全局生效,所以var容易污染全局变量,定义变量的时候 一般使用let{ let a = 0 var b = 1}console.log(a) //

2021-12-24 11:36:35 101

原创 解决报错“ UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked”

学习webpack的时候,使用插件webpack-dev-server报错如下然后百度说需要装最新版本的webpack-cli然后继续npm run dev 问题完美解决在我的理解下,这应该是版本兼容性的问题

2021-10-29 11:35:06 1216

原创 前端页面字体小于12px

前端页面 最小为12px,如果设置12px一下,浏览器会默认将字体变为12px,有时候有的需求需要12px以下的字体,需要使用css的 transform属性font-size: 12px;transform: scale(0.8);最后效果但是这样的话 会占位置...

2021-10-11 15:47:07 1663 2

原创 js格式化时间戳

//datetime是拿到的时间戳var date = new Date(datetime);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 var year = date.getFullYear(), month = ("0" + (date.getMonth() + 1)).slice(-2), sdate = ("0" + date.getDate()).slice(-2), hour = ("0" + date.getHours()).slice(-2)

2021-09-22 10:48:14 5066

原创 vue-router之动态路由

动态路由

2021-09-17 00:11:41 442

原创 echart中的legend使用return数据无效解决方案

需求灵活改变的echart图以及随之改变的legend设想和vue的data使用一样的return函数实现问题return以后没有出现想要的结果下面先看错误代码legendList: [ "差异1", "差异2", "差异3", "差异4"],legend: { data:()=>{ let list= [] for(let k=0;k<vm.legendList.length;k++){ list.push(vm.lege

2021-08-30 10:35:07 802

原创 vue中data之间数据自调用undefined的问题

需求:多个div,根据各自的num计算各自的百分比问题:在data中,自己调用自己的数据生成百分比浏览器报错data(){ return{ {num:100}, {num:0,percent:this.getPercent(this.totalData[1].num,this.totalData[0].num), }}这样的话,浏览器中报错解析:我认为,虽然在vue中,this是指向VueComponent的,但是data中的属性调用另一属性的时候,data中的数据还没

2021-08-27 15:25:12 1852

原创 JS获取当前日期、当前月第一天、当前月最后一天、当前周前一周、前一个月,前n个月

js获取当前时间YYYY-MM-DD HH:MM:SSgetNowTime: function () { let yy = new Date().getFullYear() let mm = new Date().getMonth() + 1 let dd = new Date().getDate() let hh = new Date().getHours() let mf = new Date().getMinutes() < 10 ? '0' + new Date().ge

2021-08-23 11:21:26 3194

原创 父组件第一次渲染子组件不会触发子组件的watch

需求: 点击上面表格的预览,展示下面的表格以及手机预览样式实现方式: 在父组件点击预览后,下面根据父组件传过来的值展示对应的表格行数以及手机样式问题: 在父组件点击预览以后,子组件表格渲染出来,但是手机样式没有改变,就像下图一样,只有点击其他行的预览按钮,才能正常显示点击‘三格’行的效果:再次点击‘三格’行依旧没有效果点击‘六宫格’行的效果:此时发现想要的效果已经出来了,最终发现问题原因:‘子组件在created中已经接收了父组件传过来的值,但是没用走watch,导致无法显示手机预览样式’

2021-08-19 17:50:23 575

原创 vue中vuex的使用

1、vuexvuex是vue.js的状态管理模式,这为vue的组件间通信带来了极大的便利,主要应用场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车……2、主要内容state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。下面是官方给出的单项数据流的概念图3、 vuex的工作流程下面让我们梳理一下以上流程Devtools如果不知道怎么使用可以去看我这条博客如何在浏览器中使用Devtool

2021-08-10 15:48:05 160

原创 echarts修改横轴/xAxis的样式

xAxis: { type: 'category', boundaryGap: false, data: [], axisLabel: { // 如果这个字段不设置,echarts会根据屏宽及横坐标数据自动给出间隔 interval: 0, // 间隔长度,可自定义(如果是时间格式,echarts会自动处理) rotate: 40 // 横坐标上label的倾斜度 },},xAxis全部属性xAxis: { boundaryGap: false,// 刻

2021-07-19 11:17:21 8500

原创 echart修改/自定义tooltip样式

柱状图修改样式tooltip: { trigger: 'axis', position: 'left', extraCssText:'width:160px !important;height:110px !important;', //自定义的tooltip的大小 formatter: function(params) { var result = params[0].name+'<br>'; params.forEach(function(item) {

2021-07-19 11:02:12 4002

原创 box-sizing属性值content-box和border-box的区别

1、二者区别1.1 官方文档给出的区别1.2 代码示例<style> .test1{ width: 100px; height: 100px; border: 2px solid black; padding: 5px; box-sizing: border-box; } .test2{ width: 100px; height: 100px; border: 2px solid black; paddi

2021-07-15 10:03:49 310

原创 IE因访问路径中含有中文 报错400

最近做iframe的PDF文件预览功能,在谷歌等浏览器中正常显示,在IE中报错400经排查发现在IE中的访问的URL中含有中文,后来查资料得知IE的URL中有中文不会自动编码,导致浏览器不能正常接收解决方案:encodeURI(fileName);将中文部分外面包一个encodeURI...

2021-06-02 17:30:40 578

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除