yuanfanlove的博客

原创 nginx本地打开vue打包项目

其中location后面接的是要增加的域名字段(perbank8)，配置项 index index.html 代表入口文件是index.html。# 继承地址，这里的$http_upgrade为上面的 proxy_pass。1，首先下载nginx包，然后修改下载的包中的nginx.conf配置文件。这个在vue项目中也要在nginx配置文件中也要配置同样的路径。下图是下载的ngnix包中的conf配置文件。配置成功后，双击ngnix.exe 启动。在vue项目里进行配置。

原创 tree型数组平铺，一维数组结构tree型

pid = pid||"" //这里的值是以哪个pid的值为根节点开始往下找},itemnode.isLeaf=true//是否是叶子节点})

原创 highcharts矢量图放在图表的最上方

其中top是指图表中每个模块的位置，offset表示偏移的位置，height表示每个模块占据整个图标的高度的百分比，opposite表示该y轴是否在右侧，true为右侧，false为左侧。将矢量图对应的y轴的top和height都设置为0 即可 下面红色标注全是y轴的设置。offset:70,//这里的70是根据自己的图表位置进行自定义设置。例如图中的SO2坐标轴的设置应该就是。

原创 vue项目将多张图片生成一个gif动图

在gif.worker.js文件最后声明一个函数，将该文件除了注释部分的代码之外的所有代码复制变成文本，然后给一个变量。进行函数处理， 需要获取到所有的地图图片canvas元素，然后通过canvas转换成图片。生命的函数将复制的代码文本转化成 blob,然后转化成url的形式。当前做项目有一个需求是将多张图片生成一个gif动图的形式。然后就可以生成gif图片啦 可以看一下下面的图片哦。下载好的包找到下面这个两个文件，引入到本地项目中去。将引入进来的两个包中的最后一行代码注释，避免映射。

原创 npm 打包发布一个公用的组件包

这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。将我们封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行。需要注意的是 此时我们用的npm源要是官网的 通过 npm config get registry命令查看。--dest 打包后的文件夹的名称。2.3使用Vue插件模式。

原创 highcharts标签过多有一部分不展示问题解决

原创 vue项目中使用VNodes虚拟节点

vue项目虚拟节点使用

原创 highcharts的导出回调函数（highchart的percent类型导出的文件还是原始数据不是百分比问题解决）

highcharts的下载excle问题

原创 highcharts百分比图下载xlsx图表数据不是百分比数问题

highcharts百分比图下载xlsx图表数据不是百分比数问题

原创 el-table 表格合并某一列的中相同的行 前几列也根据该列合并

el-table 表格合并某一列的中相同的行 前几列也根据该列合并

原创 highcharts箱线图遇到的问题

highcharts箱式图填充颜色

原创 前端reduce的用法

reduce的用法

原创 vue项目预览pdf 和word

vue项目pdf预览

原创 vue项目 将流生成pdf和word

下载流文件

原创 js的find函数结构化处理数据格式

结构化处理数据格式

转载 js 截取字某个字符串前面 中间 后面match处理方法

js 截取字某个字符串前面 中间 后面match处理方法

原创 html转码问题 htmlEncode

html转码

原创 vue项目 将html生成pdf和word

vue项目 将html生成pdf和word

原创 正则匹配数据且保留小数点两位

正则匹配保留两位小数的数据

原创 elementui中input类型为type=number 去掉加减箭头

elementui中input类型为type=number 去掉加减箭头

原创 数组push同一个模板对象时修改某一个对象 结果所有项同时更新

2，原因是 ： 给一个数据push同一个模板对象 导致数据组里面的所有对象同源 指针指向了同一个地址。1，现象：当给一个数据push同一个模板对象的时候 如果修改某一个对象的值。3，解决方案 ： 将push后的数组深拷贝。其他对象的值也跟着改变。

原创 解决element中el-table中表头和内容错位的方法

important;}

原创 vue 是使用dayjs

npm 安装npm install dayjs --save1main.jsimport dayjs from "dayjs"Vue.prototype.dayjs = dayjs;//可以全局使用dayjs12页面调用：console.log(this.dayjs().format('YYYY-MM-DD')); //2020-06-30

转载 纯前端导出表格数据（vue+element-ui）

1，安装插件npm install --save xlsx file-saver2，在文件中使用import FileSaver from 'file-saver'import XLSX from 'xlsx'3，out-table是表格的id outTab () { /* generate workbook object from table */ let wb = XLSX.utils.table_to_book(document.query.

原创 npm i 下载依赖包sass版本失败问题解决

对windows下的同学如果第一种办法无效的话可以拆分成两个命令set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/npm install node-sass然后每次安装之前都要set一下。秒装

原创 highcharts的横坐标分组样式设置

效果图：不要忘记引入文件噢噢噢噢！！！！

转载 highcharts的tooltip设置

一、提示框外观下面的实例代码给出了关于数据提示框的外观的常用配置 tooltip: { backgroundColor: '#FCFFC5', // 背景颜色 borderColor: 'black', // 边框颜色 borderRadius: 10, // 边框圆角 borderWidth: 3, // 边框宽度 shadow: ture, // 是否显示阴影 animation: true // 是否启用动画效果

原创 highchart的plotOptions配置对所有表格通用

plotOptions : { // 数据列通用配置 series : { // 允许数据列点击标记， 默认false allowPointSelect : false // 初始化动画 animation : true color : 'red' // 数据列的颜色 数据标签 dataLabels : { align : '' // 数据列的水平对齐方式 enabled :..

原创 highcharts的柱状图的每一个柱子颜色自定义

series: [{ data: [{'color':'#F6BD0F','y':11}, {'color':'#AFD8F8','y':12}, {'color':'#8BBA00','y':13}, {'color':'#FF8E46','y':14}, ...

转载 highchart的x轴的配置文档说明

HighCharts解析之xAxis——x轴的样式xAxis：x轴选项 参数 描述 默认值 allowDecimals 轴上的刻度是否允许使用小数 true alternateGridColor 当使用备用的网格颜色时，表格会各行变色 null categories x轴的名称。比.

转载 hightChart 实现x轴分组

在设计一个项目中的数据展示页面时。想要设计双X轴，一个轴显示须要的项。一个轴对这些项进行分组。效果如图：Highcharts自带双X轴展示方式。可是效果不是太理想。调整起来也会麻烦些 看到Highcharts上有一个分组插件。grouped-categories.js。稍做改动就可以实现想要的效果，代码例如以下：$(function () { var chart = new Highcharts.Chart({ chart: { render

转载 highcharts的基本属性和方法详解-column:柱形图plotOptions的部分修改属性说明

plotOptions: { column: //柱形图 { pointPadding: 0.2, borderWidth: 1, //柱子边框的大小 borderColor: "red", //柱子边框的颜色 borderRadius: 180, //柱子两端的圆角的半径 .

原创 keepalive的原理

keepalive 是一种状态组件管理他不是真正的组件不会被渲染被keepalive包裹的组件只会在初次渲染的时候调用created和mounted，再次进入时，不再会被调用，只会调用actived等应用场景：在列表页进入详情页返回列表页想要保存搜索条件时可以结合路由和keepalive的设置keepalive的原理是：在created钩子函数里创建一个缓存函数，将节点缓存在里面 ，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。在destroyed钩子则在...

原创 深拷贝的实现方式

1，通过JSON对象实现深拷贝；缺点： 无法实现对对象中方法的深拷贝，会显示为undefined newValue = JSON.parse(JSON.stringify(oldValue))2，通过JQuery的extend方法实现var array = [1, 2, 3, 4]var newArray = $.extend(true, [], array) // true为深拷贝，false为浅拷贝 3使用递归 function deepClone(obj) {...

原创 vscode 终端 运行项目 项目报错 NODE : 无法将“NODE”项识别为 CMDLET、函数、脚本文件或可运行程序的名称，或者CODE RUNNER无法运行JS和用DEBUG无法调试JS

今天拿到新电脑配置环境发现，在shell端可以运行项目，但是直接在vscode终端运行项目会报错NODE : 无法将“NODE”项识别为 CMDLET、函数、脚本文件或可运行程序的名称，或者CODE RUNNER无法运行JS和用DEBUG无法调试JS查看了一下node的环境已经配置了，而且在shell端可以启动起来项目，说明node环境没有什么问题，问题应该出现在vscode端，查了一下原因，果然；vscode的配置launch.json文件里面要添加："runtimeExecutab.

转载 vscode插件大全

请点击链接vscode 插件推荐 - 献给所有前端工程师（更新与2018.8.1） - Viva_nan - 博客园

转载 路由的两种面试区别

hash和historyhash模式这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。使用到的api：

转载 Vue项目使用keep-Alive实现 详情页 返回 列表页 后保存查询条件

1、最近做vue前端项目中，有个需求是从订单的列表页面(list.vue)进入详情页(detail.vue)之后返回订单列表页(list.vue)里面查询条件需要被保留之前的数据2、从其他页面比如首页(home.vue)进入订单的列表页面(list.vue)时候是不需要缓存数据保留之前操作查询。因此参考vue的文档说明，选择用keep-Alive来缓存页面,下面简单描述我的步骤代码：路由配置router.js 在路由选项中，配置meta属性，需要缓存的页面设置keepAlive为true即为需要缓

转载 宏任务和微任务

转自链接：JavaScript 运行机制详解：再谈Event Loop - 阮一峰的网络日志一，js单线程JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节

转载 前端常见的适配方式

1，静态配置--固定布局（pc端）以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸2，根据不同根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局1、<script>// 分辨率大于等于1680，大部分为1920的情况下，调用此cssif(window.screen.width >= 1680){document.write('<link rel="stylesheet" href="css/index_1920.css"&gt