weixin_39808181的博客

原创 vue +elementui 项目登录通过不同账号切换侧边栏菜单的颜色

前景提要：要求不同权限账号登录侧边栏颜色不一样。分为 theme：1代表默认样式，theme:2代表深色主题样式。1.首先定义一个主题文件 theme.js，定义两个主题样式。2.在 App.vue 里获取上边的 js 文件的主题。

原创 vue 树节点递归获取父节点 id

然后创建一个map类型去接，set所有节点的id对属性名，递归循环节点就把父对象id去赋值子节点的id；所有tree树形数据结构，就会有parentID，id，没有父节点可以默认赋值parentID=0。首先，递归循环tree节点的所有节点；

原创 echart 3D环形图 动态切换数据

1.下载：因为3D 图涉及到了echart 的 gl 库，所以需要下载echart和echarts-gl。动态切换数据主要是定时器（setInterval）

原创 vue echart 3D环形图 静态

1.下载：因为3D 图涉及到了echart 的 gl 库，所以需要下载echart和echarts-gl。下一节写echart 3D环形图 动态切换两批数据。

原创 vue 大屏开发适配 rem转 px

一般开发大屏是以宽为基准，根设为384（因为postcss默认 viewportWidth / 10）以上是一个简单有效的大屏适配的方法，还可以搭配autoprefixer进行前缀的补充，后续再写。使用amfe-flexible、postcss-pxtorem这两个插件解决问题。3.在项目根目录下创建一个 postcss.config.js 的文件。大屏分辨率3840*1080。

原创 websocket生产环境 https报错

需要在nginx里配置upgrade

原创 多人协作避免vue.config.js文件冲突----vue项目改造

先看文件夹目录：重点是config文件夹下的配置，.gitignore，vue.config.js文件要把vue项目跟后台对接接口api单独提出来，首先对vue.config.js进行改造：把proxy单独提出来vue.config.js:'use strict'const path = require('path')const defaultSettings = require('./src/settings.js')const proxy = require('./config/proxy

原创 vue-pdf的使用

<template><v-pdf v-for="i in numPages" :key="i" class="v-pdf-item" :src="src" :page="i"/></template><script>import pdf from 'vue-pdf'export default { components: { 'v-pdf': pdf }, methods: { // 流文件转pdf ur

原创 for...in 和for...of的区别

① for of 可以遍历数组里的每一项（for of 遍历数组的值）;一般不建议for in 遍历数组（for in 是遍历循环数组的索引（键值））var arr = ['haha','heihei'];for(var item of arr){ console.log(item);}打印结果：'haha','heihei'----------------------------------var arr = ['haha','heihei'];for(var item in arr){

原创 webpack-bundle-analyzer打包分析工具

先安装yarn add webpack-bundle-analyzer;在vue.config.js里边添加下边代码：module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) }}package.json里边增加脚本

原创 window自定义事件派发（CustomEvent）

const event = new CustomEvent('aaa')window.dispatchEvent(event)；//派发全局事件//全局监听事件进行操作window.addEventListener('aaa', ()=>{});

原创 我理解的贪心算法

贪心就是：选每阶段里的局部最优从而达到全局最优。举个例子：假如要取一堆钞票，new一堆钞票你可以拿走十张，如何取得最大的总和，那我肯定每次取得时候都取最大的金额就能拿到总额最大的数额。局部最优=>全局最优贪心解题步骤分四部：1.首先将问题分为若干子问题2.然后找到合适的贪心策略3.求解每一个子集的最优解4.将局部最优解迭代成全局最优解...

原创 vue 高德地图 海量的文字标签

async created () { // 已载入高德地图API，则直接初始化地图 await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}&plugin=AMap.DistrictSearch`); await remoteLoad(`https://webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/`); aw..

原创 vue 高德地图海量线

vue 高德地图 海量线

原创 vue高德地图实现海量点分组（用icon图标替换海量点）动态循环出groupStyleMap集合

高德 vue 海量点 图标分组 动态

原创 js 数组转成转成对象格式

原本数据格式：let arr =[‘哈哈’, ‘嘿嘿’];let say = ['哈哈', '嘿嘿'];const arr = new Map();for (let i=0;i<time.length;i++) { arr.set(i,say[i]);}console.log(arr);//{0 => '哈哈', 1 => '嘿嘿'}this.mark = strMapToObj(arr);console.log(mark);//{0: '哈哈',1: '嘿嘿 }st

原创 vue中使用高德地图的覆盖物群组

vue中使用高德地图Map.vue<template> <div class="m-map"> <div class="search" @click="removeOverlayGroup"> <el-input placeholder="搜企业、人员、车辆" v-model="searchKey" size="mini"> <i slot="suffix" class="el-input__icon el-i

原创 百分比布局，右边顶部出现间隙

这个问题主要是： div的inline-block一个对齐问题解决方法：给右边div加一个属性vertical-align: top;上边布局左右用的百分比，左右两边元素用的display:inline-block；所以需要设置对齐方式。也可以左右采用flex布局的方式，采用flex就不用设置vertical-align，因为flex内置的对齐方式会更规范一点，自己用width布局需要多设置一些属性。...

原创 div折行的原因

div按照百分比计算的，总百分比没有超出100%，但是div会掉下来原因：盒子模型，改变盒子类型，因为width计算是没有包括padding计算的。解决：给每一小块div设置box-sizingbox-sizing: border-box;即可解决问题...

原创 for循环出来的四个div高度不一致

如上情况原因：div垂直对齐的问题解决方法： 给每一个循环出来的div加上vertical-align: bottom;即可解决问题

原创 echarts不会随着flex布局自适应伸缩

echarts在调用resize时会重绘，如果你的子div没有设置宽度，只是设置了flex：1；那么会有如下场景发生：触发图表resize后，子元素宽度全为0，父元素宽度也为0，会导致第一个重绘完成的图表所在的子div宽度不明确，可能会使得第一个绘制完成的图表宽度在resize后还是默认的宽度...

原创 echart多图联动

原创 数组扁平化

Array.prototype.flat可以实现数组扁平化：let arr = [1,2,[3],[2,[45,6]]];arr.flat(3);//[1,2,3,2,45,6]ES5实现数组扁平化：function flatten (arr) { let result = []; for (let i = 0;i < arr.length; i++) { if(Array.isArray(arr[i])) { result = result.conca.

原创 数组去重

ES5function unique (arr) { let result = arr.filter(function(item, index, array) { return array.indexof(item) === index; }) return result;}ES6let result = arr => [...new Set(arr)];

原创 介绍几种继承方式

原型链继承function Animal () { this.color = ['red', 'yellow'];}Animal.prototype.getColor = function () { return this.color;}function Dog () {}Dog.prototype = new Animal();//原型链继承关键的一句let dog1 = new Dog();dog1.color.push('blue');let dog2 = n

转载 深入理解一下Object.prototype.toString.call()判断js数据类型

先看个例子：上边例子关键点在于call方法重定向this指针的问题。先介绍一下基础：在 JavaScript 里使用 typeof 来判断数据类型，只能区分基本类型，即 “number”，”string”，”undefined”，”boolean”，”object”，“function”，“symbol” (ES6新增)七种。对于数组、null、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object” 字符串。要想区别对象、数组、函数单纯使用 typeof 是不行

转载 两栏布局（边栏定宽主栏自适应）

<div class="layout"> <h4>方法一：float + overflow (BFC原理)</h4> <section> <aside class="orange float">aside</aside> <main class="green hidden">main</main> </section> <h4>方法二：float +...

转载 三行布局（头尾定高主栏自适应）

<div class="layout"> <section class="demo1"> <header class="h50 orange">方法一：calc</header> <main><div class="blue h400">main</div></main> <footer class="h50 black">footer</footer>...

转载 多列等高布局

<div class="layout"> <h4>padding + 负margin</h4> <main> <section class="padmar green"> <p>111</p> </section> <section class="padmar orange"> <p>222</p> &...

转载 三栏布局（两侧边栏定宽，主栏自适应）

<div class="layout"> <h4>方法一：圣杯布局</h4> <section class="grail clearfix"> <main class="green">main</main> <aside class="w150 left orange">aside</aside> <aside class="w150 right orange"...

原创 最近学习flex布局的小收获

<template> <div class="group-main"> <div class="box-left"> <div class="box-left-top"> 1 </el-card> </div> <div class="box-left-bottom"> 2 </div> <.

原创 js生成96点时刻数组

96Time() { const m = ['00', '15', '30', '45']; const time = []; for (let i = 0; i < 24; i++) { if (i === 0 && j === 0) { continue; } const t = (i < 10 ? '0' + i : '' + i) + ':' + m[j]; time.push(t); } } time..

原创 nginx部署项目注意事项

部署之后出现404页面：可以设置base属性的值，默认值: “/”，应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”const router = new VueRouter({ mode: 'history', // 默认是hash模式 routes: [...], base: '/qylzWeb/'})静态文件找不到的情况：设置build下的静态资源路径build: { // Template for index.

原创 js递归合并对象

function isObject (obj) { return Object.prototype.toString.call(obj) === '[object Object]'}function isArray (arr) { return Array.isArray(arr)}function merge (target, ...arg) { return arg.reduce((acc, cur) => { return Object.keys(cur).redu.

原创 promise的使用与实现

promise概念：Promise对象是一个构造函数，用来生成promise实例。Promise代表一个异步操作，有三种状态pending,resolved（异步操作成功由pending转为resolved）rejected（异步操作失败由pending转为rejected），一旦变成resolve 或 reject两种状态后不会再更改。resolve函数在异步操作成功后调用，将pending状态变为resolve,并将它的参数传递给回调函数；reject函数在异步操作失败时调用，将pendi.

原创 nextTick中的降级处理

nextTick 要优先使用Promise和MutationObserver因为他俩属于微任务，会在执行栈空闲的时候立即执行，它的响应速度相比setTimeout会更快，因为无需等渲染。而setImmediate和setTimeout属于宏任务，执行开始之前要等渲染，即task->渲染->task。再就是浏览器兼容性问题，setTimeout所有浏览器都可以兼容，setImmediate是IE最新浏览器都可以兼容，源码：function nextTick(cb){//cb就是f.

原创 vue是如何检测数组变化的

array.js：//主要做的事就是拦截用户调用的push shift unshift pop reverse sort splice//上述方法可改变原始数组import { observe } from "./index";//先获取老的数组方法 只改写这7个方法let oldArrayProtoMethods = Array.prototype;console.log(Array.prototype)//拷贝的一个新的对象 可以查找到老的方法//arrayMethods里包含

原创 mixin混入

混入就是提取出公共代码，被页面引入，即可被页面使用。下边是自己项目中用到的混入：code.js：混入代码，只要是提取了获取验证码接口的方法和本地存储sid的逻辑代码import { getCode } from '@/api/login'import { v4 as uuidv4 } from 'uuid'import { ValidationProvider, ValidationObserver } from 'vee-validate'const CodeMix = { c

原创 vue组件级权限控制

自定义指令v-hasRole：directives.js：首先从store仓库中获取当前登录用户的角色，判断如果使用该组件的权限如果不包括在当前登录人的权限中 就利用父元素删除该元素。export default { // 组件级权限控制 hasRole: { inserted: function (el, binding) { // 当前登录人角色 const roles = store.state.userInfo.roles || ['user']

原创 vue自定义操作权限控制级别的指令

directives.js：export default { // 操作权限控制 hasPermission: { inserted: function (el, binding, vnode) { const types = vnode.context.$route.meta.types//获取router中各个路由上定义的types属性 const values = binding.value let flag = true for (