qq_45465689的博客

原创 vue3知识点（张天禹）

Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy

原创 vue中实现一个虚拟列表

链接

原创 ant design vue 多选框获取不到值和多选失效

太坑了，太坑了，太坑了，直接上代码<template> <div> <div :style="{ borderBottom: '1px solid #E9E9E9' }"> <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> Check all </a-checkbox> </.

原创 vue css 动画 轮播表格

地址

原创 vue 实现动态路由

地址

原创 记录今天公司老项目jq vue混用问题

问题 ：jq想用vue里面的数据，发现用不了解决：jq的加载要比vue块，所以想用vue实例 必须把jq写在 mounted生命函数里面。over

原创 select 下拉框封装

原创 webpack添加时间戳解决文件缓存

hash也可以

原创 webpack配置，解决文件缓存，分类打包等

webpack

原创 CS和BS 到底是什么

C/S : Client/Server , 客户端/服务器B/S : Browser/Server , 浏览器/服务器cs,主要指的是传统的桌面级的应用程序，基于客户端的应用。bs,主要指的是web应用程序，基于浏览器的应用。区别[1] 语言： C/S: c,c++, B/S：java,php，.Net,js,nodeJs[2] 更新： C/S: 下载新版本的客户端，升级不大方便。 B/S：热更新，永远都是最新的。[3] 数据通信： C/

原创 React 笔记

React 笔记

原创 async和await

async和await

原创 Vue刷新当前路由（总结）

改变router-view中的key值（通过改变router-view中的key值，来达到刷新组件的目的）<router-view :key="activeDate"></router-view>this.activeDate = new Date()给 router-view 标签添加 v-if通过$nextTick()，协助实现。先把 移除，移除后再重新添加，达到刷新当前页面的功能。<router-link :to="url" @click.nati.

原创 封装echarts组件 数据变了组件视图没变

watch: { // 深层次监听 对象 监听传进来的值 lineChartData: { handler(val) { this.getLineChart(val); // 重新渲染图表 }, deep: true, }, },

原创 vue 上传图片与预览（附带上传前压缩地址）

<!-- 单文件上传组件 --><template> <div> 上传文件成功！ <input id="file" type="file" name="file" accept="image/png" ref="up" @change="change" /> <button @click="shangchuan">上传</button> <img :src="home_url" alt=""

原创 封装vue 数字滚动组件

<template> <div class="number"> <div class="box-item"> <li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum" :key="index" v-cloak &gt.

原创 echarts 延长坐标轴 添加箭头

axisLine: { symbol: ['none', 'triangle'], //只在末端显示箭头 symbolOffset: 8, // 偏移距离 symbolSize: [10, 15], // 箭头宽高 lineStyle: { color: '#054E8C', // 坐标轴颜色 }, }, ...

原创 es6 reduce 函数的使用 (reduce真香)

var arr = [3, 9, 4, 3, 6, 0, 9]; // 原理: 利用reduce特性 prev初始值设置0 并把函数的返回值再次带入函数中 var sum = arr.reduce(function (prev, cur) { // prev 初始为0 以后则为函数返回的值 return prev + cur; // 数组各项之间的和 }, 0); // 原理 利用reduce特性 进行三...

原创 记录前端导出word 本地图片不显示问题

导出 方法一： jquery.wordexport 可以做导出word（也可以导出html，把源码里面的doc换成html）导出 方法二： 借助HTML5 Blob 可以做导出word出现问题外部链接图片可以导出，本地图片导出不显示？经过一系列查阅资料，发现下载的word 显示图片是需要请求链接的，当把服务器关闭时 ，外部链接的图片也不会显示。解决方案：把生成的base64 发给后端，然后返回一个链接，与后台测试这样导出是可以显示，但经理要求纯前端，所以这需求就删掉了。如果..

原创 jq append添加数据会出现每次都添加第一个数据

解决: 在接口之前清空之前的数据

原创 js 时间,月份前面补零

正常写法 (new Date().getHours() <= 9 ? "0" + new Date().getHours() : new Date().getHours()) + ":" + (new Date().getMinutes() <= 9 ? "0" + new Date().getMinutes() : new Date().getMinutes()) + ":" + (new Date().getSeconds() <= 9 ? "0" + new .

原创 js 倒计时

var time = function () { var nowtime = new Date(), //获取当前时间 endtime = new Date("2020/8/8"); //定义结束时间 var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数 td = Math.floor(lefttime/(1000*60*60*24)), //计算天数 th

原创 echarts x轴文本过长,旋转角度与换行显示

方法一:旋转角度 axisLabel : { interval:0, //强制文字产生间隔 rotate:"45" //旋转角度 }方法二:换行,利用函数返回 截取拼接字符串的方法formatter: function(params) { var newParamsName = '' var paramsNameNumber = params.leng.

原创 Express、koa,Nodejs服务器上传文件时出现Unexpected field

两个名字要对应

转载 vue.config.js常用配置详解及封装全局axios(转)

axios配置https://blog.csdn.net/weixin_43216105/article/details/98877960config配置 : https://blog.csdn.net/weixin_43216105/article/details/106763258

原创 扁平化数组,去重,防抖节流

数组的扁平化处理function fun1() { const arr = [1, [2, [3, [4, 5]]], 6] const abc = arr.flat(Infinity) // 不管有多少层嵌套，都要转成一维数组，用Infinity关键字作为参数 console.log(abc) const flatten = arr => { return arr.reduce((qian, hou) => { // 利用reduce函数进行处理 retu

原创 js map(Number) map(String)map(Boolean)

let abc = ['1','2','3']abc.map(Number) // [1,2,3] number自动转换为number函数并把值传进去let abc = [1,2,3]abc.map(String) // ['1','2','3']

原创 练习1(打印星星,查找字符位置与次数,冒泡排序,驼峰转换)

<template> <div> <div v-for="(item, index) in list" :key="index">{{ item }}</div> <button @click="abc">anniu</button> </div></template><script>export default { data() { return {

原创 vue $set

<template><div> <div v-for="(item,index) in list" :key="index">{{item}}</div> <button @click="abc">naniu </button></div></template><script>export default { data() { return { list:

原创 自定义属性前缀data-及dataset的使用方法(不过在工作中没用到过,有用到过可以评论一下)

<div data-abc="nihao"> // 自定义data属性 //dataset.abc 获取值为 nihao // div[data-abc="nihao"] 改变元素样式

原创 css 的重绘与回流

什么是重绘?页面发生样式的改变但是不会影响他的位置(例如:字体,背景颜色等等)什么是回流(重排)?因为元素的规模尺寸、布局、隐藏等改变时,也就是位置发生改变时,浏览器会重新渲染这个DOM的这一过程称为回流. (回流肯定伴随着重绘,但是重绘不一定会有回流的出现)什么时候会触发回流(重排)或重绘？增删dom元素的时候,改变元素位置,改变元素样式宽高大小,页面第一次渲染,浏览器窗口的改变,获取元素的宽高也会出发回流如何减少重绘和回流（重排）?在DOM树的最后一个元素改变class,避免设置多层内联.

原创 vscode 小霸王插件

今天刚被同事安利,震惊.

原创 echarts鼠标悬浮图表上时浏览器抖动

画图标过程中遇到这个问题，无论怎么改宽高都没用，最后百度后知道鼠标移动到上面会产生动画，所以才会发生抖动。解决方法如下：tooltip: { show: true, transitionDuration:0,//echart防止tooltip的抖动}...

原创 vue watch监听对象属性变化

watch: { 'cityName.name': { handler(newName, oldName) { // ... }, deep: true, immediate: true } }-设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化

原创 vue中改变css样式 利用ref

this.$refs.ref对应得名字.style.height = h +‘px’;

原创 element-ui 两个dialog嵌套出现覆盖的解决方法

必须手动点击才会出现，解决方法如下：使用 append-to-body 属性，可以解决

原创 word-wrap:break-word；强制换行失效的原因与解决方法

-无效的原因元素中设置的white-space是norwrap，所以无法换行。解决：white-space:normalword-wrap:break-word

原创 href=“#“与href=“javascript:void(0)“的区别

/# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。而javascript:void(0), 仅仅表示一个死链接。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。如果你要定义一个死链接请使用 javascript:void(0) 。...

原创 vue中keep-alive、activated的使用

activated()函数就是一个页面激活后的钩子函数，一进入页面就触发；keep-alive由于默认全部缓存，如果有希望个别路由刷新可以使用activated，函数所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。...

原创 简单封装echarts函数，饼形图，地图，柱状图，折线图.。。。

简单封装echarts函数柱状图// 柱状图/** * 传入的参数 * cloum: { titleText: '业务操作量', // 标题名字 xArray: ['1', '2', '3', '4', '5', '6', ''], // x轴得数据 seriesInfo: [ { name: '1', type: 'bar', data: [