自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

F小钱的博客

记录和分享前端开发中遇到的问题及解决方案

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

原创 nuxt生产环境报错 Failed to execute ‘appendChild‘ on ‘Node‘: This node type does not support this method.

nuxt 发布到生产环境后,报错 Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method. 导致页面js 失效 一路排查下来发现使用的轮播插件里面。video 和 img 没有用 div 包裹。

2023-11-16 15:06:36 682

原创 vue swiper 自定义分页器及动效

【代码】vue swiper 自定义分页器及动效。

2023-05-31 21:26:53 1284

原创 antd-vue表格选中框操作后仍残留的问题解决

【代码】antd-vue表格选中框操作后仍残留的问题解决。

2023-04-04 10:07:44 558 1

原创 nginx: [error] CreateFile() “F:\nginx-1.22.1\nginx-1.22.1/logs/nginx.pid“ failed (2: The system cann

报错nginx: [error] CreateFile() “D:\nginx-1.20.1/logs/nginx.pid” failed。

2023-02-03 16:26:55 2203 1

原创 更改echarts的版本号

5版本中没有china.js,不能正常使用中国地图。Echarts 5.x 不再支持上面的引入方式。

2023-02-02 13:23:20 542

原创 js 下载文件

const code = this.checkList.join() const a = document.createElement('a') a.href = `/mystical/backstage/imageData/imageExport?imageCodes=` + code document.body.appendChild(a) a.click() // 下载 URL.revokeObjectURL(a.hr.

2022-01-28 15:50:28 107

原创 vue 将文件url 改成文件流下载

vue 将后台返回文件url 改成文件流下载由于直接a 标签下载视频,音频会打开新的窗口,所以改用文件流下载一、图片 exportData(row) { console.log('row', row) const reqUrl = row.url const fileName = row.fileName downFile(reqUrl) .then((data) => { if (data) {

2021-11-19 17:14:51 4489

原创 引入echars报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

引入 echars报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’因为引入的是 echars 5.X的版本,所以切换成4.X的版本,或者将引入方式改为import * as echarts from ‘echarts’;或const echarts = require(‘echarts’);...

2021-09-22 11:31:04 204 1

原创 echarts 极坐标设置分隔区域颜色

echarts 极坐标设置分隔区域颜色借用echarts 官网上的一个极坐标案例,如下图实现如下图的效果,在y轴上每一段设置颜色,形成渐变背景效果设置代码:radiusAxis: { splitArea: { show: true, areaStyle: { color: ['#76a7e5', '#9fc5f4', '#b6d5fa', '#d0e5ff', '#e6f1ff', '#e6f1ff']

2021-03-05 11:01:53 1997 1

原创 ant-design-vue table对日期数据排序

ant-design-vue table对日期数据排序一、js对日期数据排序二、在 a-table 中使用一、js对日期数据排序使用sort()方法// let data = [ { id:'1', time:'2020-01-01 23:53:23' }, { id:'2', time:'2021-01-08 8:53:10' },{

2021-01-04 15:16:24 3540 1

原创 element cascader级联选择器获取当前选择的对象

element cascader级联选择器获取当前选择的对象cascader 的change方法只能获取到绑定的value值,如果需要获取当前选项这个对象,需要以下操作:根据element 官网上的例子1. cascader添加 ref// 添加 ref <el-cascader ref="demoCascader" v-model="value" :options="options" @change="handleChange"></el-cas

2020-10-23 17:28:24 9124 4

原创 vue 根据属性过滤树结构数据

如下为树结构数据,需要根据属性id 获取匹配的值// 树结构数据 export default { data() { return { searchId: 9, treeData: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1',

2020-10-10 16:13:01 2551 4

原创 Echarts 饼状图更改起始角度,饼图显示百分比,修改legend文字样式和图标

Echarts 饼状图更改起始角度,饼图显示百分比,修改legend文字样式和图标更改饼图颜色修改legend文字样式和图标更改起始角度饼图显示百分比完整代码这是原始效果要实现如下效果更改饼图颜色直接在option内设置 colorlet option ={// 设置颜色 color: ['#4D96BE', '#3EFFE8', '#42CAEB'], title: { show: false }, ......修改legend文

2020-07-27 20:10:10 4926

原创 vue-cli 前端服务器代理 proxyTable配置解决跨域

vue-cli 前端服务器代理 proxyTable配置解决跨域proxyTable是什么如何配置proxyTable是什么在使用 vue init webpack my-project-vue 创建vue 项目时在config目录下的 index.js 文件有一个proxyTable配置proxyTable是vue-cli提供的解决vue开发环境下跨域问题的方法,proxyTable的底层使用了http-proxy-middleware,它是http代理中间件,它依赖node.js,基本原理是用

2020-07-27 18:53:04 998 1

原创 vue element 前端上传文件后 后台传文件流blob对象下载文件

这里写自定义目录标题后台传文件流blob对象前端下载文件问题解决方案,转成bolb对象创建Blob对象创建链接后台传文件流blob对象前端下载文件问题在页面下载文件时,可以根据路径如 a 标签的 href="" ,但是有时将文件直接上传到后台做处理后回传到前端再去下载文件,这时后台返回的是文件流,并没有路径提供下载。解决方案,转成bolb对象Blob对象表示一个不可变的, 原始数据的类似文件对象。如下使用了element ui 的上传组件// 上传 <el-upload class

2020-07-24 10:41:54 7097

原创 Echarts 柱状图当值为0时不显示在图像顶部

在做柱状图时,遇到这么一个场景,如下图:当Sun值为0的时候这样显示看上去很不协调,于是配置当值为0的时候不显示在series配置项下加上如下代码// 以下为是否显示,显示位置和显示格式的设置 label: { show: true, fontSize: 18, position: 'top', formatter: func

2020-06-01 16:50:30 3472 2

原创 uni-app——简单的封装uni.request并挂载到全局

uni.request(OBJECT)为uni-app发起网络请求的方法。一般的uni.request示例如下:// 请求uni.request({ url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。 data: { text: 'uni.request' }, success: (r...

2020-03-24 16:29:12 5471 4

原创 vue项目使用定时器每隔几秒请求一次接口

vue.js项目,每隔5秒请求一次接口,接口有返回则停止请求,没有返回继续请求。先看两种定时器// 每隔设定时间调用一次函数setInterval(function(){}, milliseconds) //设定时间后只执行函数一次setTimeout(function(){}, milliseconds) 注意:单纯的使用setInterval会导致页面卡死!由于setInt...

2020-03-03 16:47:39 26018

原创 npm yarn 查看版本以及更新

npm// npm查看当前版本npm -v// npm查看所有版本npm view npm versions// npm更新到最新版npm install -g npmyarn// yarn查看当前版本yarn -v// yarn查看所有版本npm view yarn versions// yarn更新到最新版npm install yarn@latest -g...

2020-01-07 10:55:56 28388

原创 vscode格式化Vue,代码会自动加上分号的问题

vscode格式化Vue,代码会自动加上分号的问题vscode格式化Vue解决方法vscode格式化Vuevscode升级一次后,每次保存都会在代码后面自动加上分号,然后Eslint检测报错 Extra semicolon.eslint(semi)。解决方法解决方法一把"vetur.format.defaultFormatter.js": “prettier”,改为 “vetur.fo...

2019-09-16 15:05:25 12985 5

原创 js筛选出数组里不是'',null,undefined的元素并返回

js筛选出数组里不是'',null,undefined的元素并返回问题代码问题js如何筛选出arr里不是’’,null,undefined的元素并返回代码var arr = ['A', '', 'B', null, undefined, 'C', ' '];var r = arr.filter(function (s) {return s&& s.trim(); })...

2019-09-02 14:27:35 4942

原创 vue中css处理文本不换行问题

vue中css处理文本不换行问题传来的数据中有空格或换行的时候,在用 v-text或v-html展示时不会换行,使用css属性// CSSdiv{white-space: pre-wrap;}

2019-07-19 10:49:11 1551

原创 git 操作 查看本机ssh key公匙

git 操作 查看本机ssh key公匙1.打开git bash2.输入cat ~/.ssh/id_rsa.pub如果你看到一长串以 ssh-rsa或 ssh-dsa开头的字符串,就是本地公钥

2019-07-11 10:07:24 4060

原创 VUE style scoped 内修改组件样式

VUE style scoped 内修改外部组件样式style scoped 内修改外部组件样式不生效的解决方法解决方法原因其他方法style scoped 内修改外部组件样式不生效的解决方法想修改项目中 ant Design 组件的样式,发现在< style scoped> 内直接修改并没有效果。解决方法当vue的< style>标签有 scoped 属性时,它的...

2019-06-19 15:55:39 3852

原创 mui对话框如何点击按钮不关闭弹框

mui对话框如何点击按钮不关闭弹框目前的mui默认是点击对话框的按钮会关闭弹窗,如何设置使点击按钮判断后再关闭弹窗呢查看mui.js 文件后发现返回false不关闭当前popup// document.getElementById("promptBtn").addEventListener('tap', function(e) { e.detail.gesture.preven...

2019-05-27 11:27:07 2362

原创 基于layDate的时间范围选择器

基于layDate的时间范围选择器基于layDate的时间范围选择器使用layDateHTMLjs基于layDate的时间范围选择器实现效果使用layDate获得 layDate 文件包后,解压并将 laydate 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 laydate.js 即可。具体参数配置可看文档介绍。HTML// <body> ...

2019-05-15 14:34:38 2310

原创 vue 组件间传值

vue 组件间传值父子组件间的通信父子组件间的通信// <body> <div id="app"> <todo></todo> </div> <template id="tplTodoAdd"> <div><input type="text" v-model="input"&...

2019-04-12 13:59:39 128

原创 js根据相同属性值将一个一维对象数组转为二维数组

js根据相同属性值将一个一维对象数组转为二维数组es6的方法将一个一维对象数组,根据相同的属性值,转化成一个二维数组如// 待转换的一维数组var arrayFirst = [{ code: 1, datas: 'a网吧'},{ code: 1, datas: 'b网吧'}, { code: 2, datas: 'a酒店'},{ ...

2019-03-05 15:34:56 9842 1

原创 使用TypeScript日期工具: date-fns 格式化日期

使用TypeScript日期工具: date-fns 格式化日期安装引入格式化日期格式化封装方法安装npm install date-fns --save// or with yarnyarn add date-fns// or with bowerbower install date-fns引入格式化日期import * as format from 'date-fn...

2019-02-19 16:07:01 9548

原创 js将数组字符串转换成数组

js将数组字符串转换成数组项目中遇到后端返回给我们一个数值形式的字符串时,如何将它转换成数组并取出我们所需要的值呢?假如后端给我返回如下格式的数据:// 后台返回的数据"person":["[{\"xm\": \"张三\""," \"sex\": \"1\""," \"age\": \"16\"",&

2019-01-21 16:13:56 57919

原创 react 实现简单的前端筛选

react 实现简单的前端筛选项目中经常遇到列表,如显示一群人或者一些商品的详情信息,需要在一个搜索框内输入内容,下面的列表就自动筛选出与输入内容相匹配的信息框。实现过程如下:1. 在input输入框中绑定onChange方法,监听输入框值的变化;...

2019-01-21 10:56:39 7804 3

原创 js 水印插件在TS中的使用

js 水印插件在TS中的使用最近在项目中遇到了给页面添加水印的功能,由于项目使用react+Typescript,

2019-01-11 16:22:31 993

空空如也

空空如也

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

TA关注的人

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