hufi-优快云博客

原创 Echarts数据可视化开发中的一些技巧和常见问题汇总

Y坐标文字过长被遮挡: 图表的自适应解决办法：设置grid配置项的left为任意数值后，图表会计算y轴宽度并自适应grid: {left: 0, // 与容器左侧的距离right: 0, // 与容器右侧的距离bottom: “3%”,top: “0”containLabel: true // grid 区域是否包含坐标轴的刻度标签}当X轴标签过长,展示不下时,我们会采用两种方法旋转角度,倾斜展示xAxis: {axisLabel: {color: “#5e6877”, //x

2021-02-07 12:47:15 3181

原创解决 Echarts 图表在旧容器上重新渲染不出来的问题

今天修改项目时，由于使用了 Echarts 图表库，在原先的基础上，加上了切换tab标签和根据搜索内容重新渲染图表的需求，由于是异步获取数据后更新渲染图表，然后发现图表重新渲染不出来，由此记录下解决问题的过程。问题描述根据异步获取到的数据重新渲染图表，比如 Echarts 容器标签如下：<div id="chartId"></div>当搜索结果没有数据时，输出一段话提示用户：<div id="chartId"> <p>暂无数据</p&g.

2021-01-28 15:12:26 2504 2

转载前端CLI脚手架思路解析-从0到1搭建

作者：左撇峰子链接：https://juejin.cn/post/6879265583205089287来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。为什么要自己搞脚手架在实际的开发过程中，我们经常用别人开发的脚手架，以节约搭建项目的时间。但是，当npm没有自己中意的脚手架时，我们不得不自己动手，此时学会开发前端CLI脚手架的技能就显得非常重要。搭建一个符合大众化的脚手架能使自己在项目经验上加个分哦！什么时候需要脚手架其实很多时候从0开始搭建的项目都可以做.

2021-01-24 22:32:50 517

原创压箱底的 axios 封装类，了解一下？

import axios from 'axios'import qs from 'qs' // 引入 qs 模块，用来系列化 post 类型的数据import store from '@/store'import errorHandle from './errorHandle'import { getToken } from '@/utils/auth' // 从 localStorage 中获取 tokenimport { message } from 'ant-design-vue'cla

2020-12-30 23:59:44 947

原创使用 Ant-design-vue 1.x 单文件递归生成菜单

以前使用 Ant-design-vue 的单文件方式递归生成菜单时，会发现遍历出来的菜单并不是自己与想的那样，而是渲染不出来。官方的解释是：Before v2.0, 因组件内部会动态更改a-sub-menu的属性，如果拆分成单文件，无法将属性挂载到a-sub-menu上，你需要自行声明属性并挂载。为了方便，避免属性的声明，我们推荐使用函数式组件。并且给出了一个demo，但会发现也显示不正常，那就自己来实现吧，直接根据路由配置来遍历生成。1、路由配置如下：[ { path: '/',

2020-12-30 00:00:01 1925 4

转载分享8个非常实用的Vue自定义指令

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令，然后在入口文件中进行 Vue.use()调用。批量注册指令，新建 directives/index.js 文件：import copy from .

2020-12-18 18:58:03 427 1

原创解决javaScript解析XML时火狐浏览器不支持xmlDoc.load()方法

今天收到一个客户的产品反馈：设备详情页在其他浏览器上可以正常显示，但是到了火狐上就不能显示数据。由于设备使用的代码比较老，之前没接触过，所以只能根据火狐浏览器的开发者工具来一步步调试，最后发现是 ActiveXObject 对象的问题，于是乎尝试了几种方法，最终解决了兼容性问题，代码如下：function getXmlDoc (xmlFile) { var xmlDoc = null; var activeXNameList = ["MSXML2.DOMDocument.6.0", "MSXML

2020-11-26 16:06:09 2015 1

原创 JS setInterval函数从立即执行到定时执行的三种方案

1、常规操作首先定义一个需要执行的目标操作函数 target，然后在执行定时器之前先执行函数，再开启定时器：const target = () => { console.log('Do something...')}target()setInterval(target, 1000)这样看起来没啥问题，但一般我们在使用定时器需要注意：不能让页面产生多个执行同一操作任务的定时器，不然很可能导致你的页面功能异常，并且消耗掉不必要的系统资源，所以需要封装一下：const target =

2020-11-25 18:38:51 17843 3

转载 20个你不得不知道的数组reduce高级用法

目录1 背景2 高级用法3 兼容和性能4 结语1 背景reduce 作为ES5新增的常规数组方法之一，对比 forEach 、filter 和 map，在实际使用上好像有些被忽略，发现身边的人极少用它，导致这个如此强大的方法被逐渐埋没。如果经常使用reduce，怎么可能放过如此好用的它呢！我还是得把他从尘土中取出来擦干净，奉上它的高级用法给大家。一个如此好用的方法不应该被大众埋没。下面对 reduce 的语法进行简单说明，详情可查看MDN的reduce()的相关说明。定义：对数组中的每个元

2020-11-16 10:59:10 1136

原创 ant-design-vue 中 table 自定义格式渲染

一般业务开发中，难免会遇到将一些状态值（如 0 / 1）转化为相应的描述（如关闭 / 开启），也可能是对日期时间的格式化，如下两图转化前后对比：开始之前，需要注意的是，定义的 columns 一定要写在 data 中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别。1、直接调用对应插槽模板<template> <div class="vehicle-list"> <a-table :columns="columns" :data-sour.

2020-11-03 18:59:25 8714

转载零距离接触websocket

一、什么是WebSocket定义Websocket是一个持久化的网络通信协议，可以在单个 TCP 连接上进行全双工通讯，没有了Request和Response的概念，两者地位完全平等，连接一旦建立，客户端和服务端之间实时可以进行双向数据传输关联和区别HTTP1、HTTP是非持久的协议，客户端想知道服务端的处理进度只能通过不停地使用 Ajax 进行轮询或者采用 long poll 的方式来，但是前者对服务器压力大，后者则会因为一直等待Response造成阻塞2、虽然http1.1默

2020-10-31 23:58:28 192

转载 Ant Design of Vue Table 表格可伸缩列 -- 排坑指南

最近在用 ant-design-vue 开发项目时遇到一个表格列需要支持拖拽改变宽度，这个功能在 element-ui上直接可以使用，但 ant-design-vue 需要引用一个叫 vue-draggable-resizable 的插件才能实现，接着安装了 vue-draggable-resizable 2.2.0版本，本以为很简单照着官网写即可，没想到官网的demo在本地一直报错：网上搜了一大堆也没有解决，最终在github上找到了一个解决方案，官网的实例可以复制过来使用，但需要进行改造：Res

2020-10-30 16:20:43 6821 20

原创 Rollup组件库开发问题记录

1、(!) Missing global variable name(!) Missing global variable nameUse output.globals to specify browser global variable names corresponding to external modules出现这个问题的原因是rollup通过external + output.globals来标记外部依赖，所以需要在配置文件的output输出配置属性中添加globals属性，指定与外部模块

2020-10-17 10:41:17 6816

转载 PHP汉字转化为拼音

使用取每个汉字的首字母$class = new Pinyin();$pinyin = $class->str2py('需要转换的汉字')；取每个汉字的全部字母$class = new Pinyin();$pinyin = $class->str2pys('需要转换的汉字')；类方法<?php/** * 基于PHP语言的汉语转拼音的类 * 兼容 UTF8、GBK、GB2312 编码，无须特殊处理 * 对中文默认返回拼音首字母缩写，其它字符不作处理直接返回

2020-10-12 18:47:42 2788

原创 Vue实现移动端侧边栏城市联动功能

前言城市联动功能在业务比较常见，一般用于用户自行搜索或者选择其所在地，然后根据地点获取有关当地的一些推荐信息，比如附近商家、景点、娱乐等推荐，引导用户的出行和消费行为。效果预览功能简介可以看到，接下来要实现的功能也并不是很复杂，主要包括：城市列表，从上到下按城市拼音首字母分块排序显示城市搜索，按城市名称或者拼音进行模糊匹配搜索右侧城市首字母导航栏，支持点击和上下滑动字母，从而联动左侧城市列表的对应显示项目结构在这里，为了方便，我使用了 Vue-cli4 创建项目，项目结构如下：

2020-09-26 23:51:37 2106 2

转载 koa框架会用也会写—(koa的实现)

文章目录Koa框架koa系列文章koa的使用分析洋葱模型和中间件组合洋葱模型中间件组合koa的组成部分koa的实现Koa类初始化request封装response封装ctx封装处理异步和错误结语Koa框架现在很多项目都是基于koa框架实现的，主要是因为koa小巧轻便，采用插件式扩展，可以根据需要的功能来选用不同的插件，开发起来更加的方便快捷。所以了解koa的实现原理是十分、十分、十分有必要的。koa系列文章koa框架会用也会写—(koa的实现)koa框架会用也会写—(koa-router)ko

2020-09-18 09:46:24 214

原创 PHP接口请求自动分发调用对应类中的函数

实现原理：在基类中定义一个公共的调用函数，这里我定义函数名为 handleAction，handleAction 函数要实现的功能是首先获取调用该函数的子类名称，然后得到子类的实例，最后约定请求某一接口时，通过传参 handle=要调用的接口函数名，即可实现接口请求的自动分发了。在往下查看示例之前，你需要对PHP中 __CLASS__、get_class() 和 get_called_class() 的使用和区别有一定的了解，可以查看我的另一篇文章：PHP方法继承调用，如何获取子类名称？get_c.

2020-08-22 10:48:28 651

原创 PHP方法继承调用，如何获取子类名称？get_class() 和 get_called_class()

PHP中通过 __CLASS__ 可以获取当前的类名，但它是静态绑定的，如果不在子类里重载的话，那么继承父类方法所得到的依旧是父类的名称，而不是子类的名称，比如：<?phpclass Base { function __construct() { echo __CLASS__; } static function getClass() { echo __CLASS__; }} class Child extends Base

2020-08-21 23:54:42 712

原创基于PLOP使用命令行自动生成 .vue 文件

在使用 vue-element-admin 框架时，你会发现它的根目录下有个 plop-templates 文件夹，那它是干嘛用的呢？带着疑问，你首先会去 baidu 一下，才知道原来是自动创建项目文件用的。其实它里面用到了 plop模板工具，它是一款用命令行就可以自动生成代码模版的工具。plop的介绍可以看 plop官网，plop 功能主要是基于 inquirer 和 handlebars 。简单的说就是通过提前配置要生成的页面模板，并且在命令行中接受指定的参数，从而生成我们需要的模板。这里简单

2020-07-31 16:36:26 1153

转载微信公众号开发，清除微信内置浏览器缓存

在做微信开发的时候（主要是微信内网页或者比较大型的手机网站）的时候，更改了页面代码，但是微信内置浏览器有缓存，还是之前的效果，影响调试，而且还死活清除不掉！！！！！怎么办？我的第一想法是关闭手机的微信进程，偶尔有效，但是大多数时候是无效的。第二个方法，我还试过退出微信登录，然后退出微信（百度出来的方法，也不知道谁讲的），也是偶尔有用，大多数时候无效。有效方法一Android有一个功能，那就是应用管理（一般在手机设置里边），在应用管理里边清除应用缓存！100%有效！（如果是iphone请参考下面一个方

2020-07-31 09:09:09 1117

原创 VSCode settings.json

使用之前需要配套安装以下插件：colorTheme -> One Dark ProPrettier - Code formatterVeturESLint{ // 指定用在工作台中的颜色主题 "workbench.colorTheme": "One Dark Pro", // 自动保存文件（默认延迟1000ms） "files.autoSave": "afterDelay", "editor.fontSize": 18, // tab 大小为2个空格 "edi

2020-07-27 22:18:11 303

转载 SIM卡ICCID，根据前面19位算出第20位校验位

ICCID共20位, 最后一位的校验位计算规则如下:取前19位 . 从左到右奇数位开始. 乘以2 然后计算个位与十位数之和.将所有偶数位的数字与上一步得到的值全部相加将上一步得到的值乘以9 然后取余. 得到的值就是第20位的校验位例： 89860262191507034404 最后一位校验位是4第三行相加： 1+6+9+1+6+6+0+2+1+2+2+2+9+2+5+0+7+0+3+8+4+0 = 7676*9 = 684校验位就是： 684%10=4可以到计算I

2020-07-24 14:51:17 7360 2

原创关于cnpm不是内部或外部命令，修改环境配置后仍无效的解决办法

平时开发中npm作为包管理器来说相对来说比较好用，但是由于服务器不在国内所以有的时候速度会慢一点，也可能经常会出现不稳定的情况，所以需要使用淘宝的cnpm代替npm，因为它的服务器在国内，所以使用可以提高我们的下载速度和稳定性。但在安装使用时，会发现报 cnpm不是内部或外部命令的问题，在网上看到也有好多 ‘解决’ 的办法，最多的是修改系统的环境变量，然而在我这并没有什么卵用，所以在此记录下自己摸索解决的过程。首先，安装 cnpm 完成后，此时执行 cnpm -v 是会提示命令未找到：接下来的.

2020-07-14 22:00:45 2449 3

原创自动注册Vue组件【require.context】

在Vue项目开发中，经常需要import或者export各种模块，当一个页面中组件很多时，我们可能会这样引入组件：import A from 'components/A.vue'import B from 'components/B.vue'import C from 'components/C.vue'import D from 'components/D.vue'要是每加一个组件，都要写这么一句 import ，那岂不是很蛋疼，是否可以通过自动化引入呢？答案是肯定有的，那就要使用 webpa

2020-06-30 23:50:58 760

原创 Vue .sync 语法糖

1、使用之前在讲解这个语法糖之前，我们有必要先了解 Vue 中组件之间单向数据流通信规则：Vue 提倡单向数据流，即父级 props 的更新会流向子组件，但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解。如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。所以开发中，我们需要遵循：父组件可以修改子组件的内容，而子组件是不能（不推荐）直接改变父组件的内容，但子组件可以通过事件触发的方式通知父组件来修改自己本身的内容。2、案例对比场景：控制弹框的显示

2020-06-18 12:57:18 3062

原创 Vue跨组件可响应通信【provide / inject】

Vue 组件之间常用的通信方式有：props 属性传递数据自定义事件 eventa. 全局的eventHub机制b. 父组件调用子组件使用 @eventName="handleFunc"，子组件在需要的时候调用 this.$emit(eventName, params) 即可通过 params 传参。ref 给元素或组件注册引用信息，然后父组件通过 this.$refs.child 获取到子组件实例对象。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素。$parent / $

2020-06-15 19:04:32 1536

原创 Nuxt项目支持import写法的三种解决方案

一、前情摘要使用npx create-nuxt-app创建Nuxt.js项目，项目默认使用require引入依赖，如下：const Koa = require('koa')而此时我们想使用ES6的 import 语法：import Koa from 'koa'运行的时候，会报 SyntaxError: Unexpected identifier，即不识别import错误。这是因为使用 npx create-nuxt-app 创建出来的Nuxt.js项目在 npm run dev 时直接使用n

2020-06-07 17:57:35 2880

原创 JS中的常见的兼容性处理

1、获取 event 和 target 对象var e = ev || window.event;var target = e.target || e.srcElement;2、绑定和移除事件function addEvent(ele, ev, fn) { if (ele.addEventListener) { ele.addEventListener(ev, fn); } else if (ele.attachEvent) { ele.attachEvent("o

2020-05-31 14:18:49 669

原创 JS中使用appendChild()插入节点需要注意的事项

首先看下面一段代码： <div id="box"> <p>参考的P标签元素</p> </div> <hr> <div id="target"> <p>p text 1</p> <p>p text 2</p> <p>p text 3</p> <p&gt

2020-05-18 19:39:21 5958

原创 Event对象的常见应用

1、event.preventDefault()用于取消事件的默认行为，将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"的表单提交，a标签的默认行为是跳转到对应的URL，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单和链接跳转。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。2、event.st

2020-05-17 23:59:00 1349 1

原创 JS自定义事件

1、new Event(type, options)JS中，最简单的创建事件方法，是使用Event构造器：var event = new Event(type, options);Event构造函数接受两个参数：第一个参数type是字符串，表示自定义事件的名称；第二个参数options是一个对象，表示事件对象的配置，该对象主要有下面两个属性：bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。cancelable：布尔值，可选，默认为false，表示能否用 event.p

2020-05-17 16:18:39 510

原创 JS事件模型

1、DOM事件模型包括捕获和冒泡（IE用的是事件冒泡），捕获是从上（window）往下到达目标元素，冒泡则是相反，从当前元素往上到 window。2、DOM事件流浏览器在当前窗口页面与用户做交互的过程中，比如点击了鼠标左键，这个点击是怎么触发传到页面上的目标元素？这就要经过事件流，整个事件流分三个阶段：第一阶段是捕获，第二阶段是目标阶段，比如点击的某个按钮，这个按钮就是目标阶段，事件通过捕获到达目标元素，就是目标阶段，第三个阶段是冒泡，从目标元素再上传到window对象，就是冒泡的过

2020-05-17 12:27:50 337

原创 JS事件级别

事件是javascript和HTML交互的基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互；比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。接下来我们来了解一下DOM事件的那些属性和方法。DOM事件级别：DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。你也许会疑惑，为什么没有DOM1级.

2020-05-17 10:45:06 957

空空如也

空空如也