江禾-CSDN博客

原创后台返回一个文件流如何下载

1.在进行接口请求的时候，加上{responseType:“blob”}

2023-08-21 19:53:07 154

原创文件上传：原生input、组件ant-desgin-vue(通过某个按钮进行上传操作)

【代码】文件上传：原生input、组件ant-desgin-vue(通过某个按钮进行上传操作)

2023-07-25 16:20:22 613

原创走马灯+echarts图表展示

需要进行走马灯+echarts图表展示,后台返回数据为一次性返回<el-carousel indicator-position="none" class="carousel" > <el-carousel-item v-for="item,index in length" :key="index" > <div class="online_echarts"

2022-05-10 11:36:08 1707

原创自动滚动组件

<template> <div @mouseover="handlePause" @mouseleave="handleMove" class="seamless_wrap" ref="seamless" > <div class="scroll" :style="style"> <div class="scroll_item" ref="item"> <slot><

2022-04-07 14:25:02 185

原创 echarts-后台返回不是连续时间，前台图表要求展示连续时间的数据

使用moment.js1.展示最近12个月的数据 let timeArr = [];//最近12个月的月份 for (let i = 0; i < 12; i++) { timeArr.push( `${moment(new Date()).subtract(i, "months").format("YYYY-MM")}` ); } timeArr.reverse();//时间排序 console.log(timeArr, "timeArr") let arr =

2022-03-21 15:50:59 1749

原创 echarts的x轴不带时分秒,tooltip带时分秒

//x轴xAxis: { name: "时间", type: "category", boundaryGap: false, data: this.reserve(this.tData).map((item) => item.collectTime), axisLine: { lineStyle: { color: "#03c5fd", }, }, axisLabel: { formatter: (name) => n

2022-01-21 14:10:10 1207

原创数组对象去重

数组对象去重let targetNode=[{id:"1",text:"芋圆"},{id:"2",text:"啵啵"},{id:"1",text:"芋圆"},]let obj = {}; let newTarget = targetNode.reduce((cur, next) => { obj[next.id] ? "" : obj[next.id] = true && cur.push(next); return cur; }, [])

2021-11-01 15:10:34 95

原创前端使用懒加载+分页实现大量数据的渲染

import React, { useState, useEffect } from "react"import { Input } from 'antd';const { Search } = Input;let curPage = 1;//当前页数let prevY = 0;let searchData = []function Test() { const [list, setList] = useState([]) let data = []; let pa

2021-08-10 16:49:01 1375 2

原创 keep-alive用法

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它有以下属性:include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。当我们需要对里面动态组件进行有条件的缓存时，可以去利用他的include 和 exclude属性用法:<keep-alive include="a,b"> &l

2021-07-05 14:58:55 264

原创利用js把x分换算成x天x时x分的格式

{{ Math.floor(elapsedTime / (24 * 60)) }}天{{ Math.floor((elapsedTime % (24 * 60)) / 60) }}时{{ elapsedTime % 60 }}分

2021-07-05 14:40:47 83

原创如何选中ul里的某一个li,并改变其样式

1.html<ul id="ul"> <li v-for="(item,index) in list" :key="index" @click="changeLi(item,index)" > <div :class="select===index?'select':''"> <img src="~@/assets/logo.png" alt=""

2021-07-05 14:35:13 2161

原创 react父组件如何调用子组件的方法

父组件<button onClick={this.reset}>重置</button><Son ref='son' onRef={this.onRef}></Son>reset=()=>{ this.son.clickReset()}onRef=(ref)=>{ this.son=ref}子组件componentDidMount=()=>{ this.props.onRef(this)}clickReset=

2021-03-02 16:36:39 191

原创 js实现鼠标滚轮图片放大缩小

<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document</title></head><body> <img id="img" src="11.png" alt="" style="width:100p

2020-09-16 16:06:42 6356

原创 react里面实现图片旋转效果

1.新建文件夹rotate.jsclass RotateImg { constructor() { this.el = null; } init(cls) { this.el = document.getElementById(cls); // this.el = document.getElementsByClassName(cls)[0]; return this; } DragStart() { this.el.onmou

2020-09-06 22:36:37 2169

原创 js实现放大镜的效果

基本布局<div id="box"> <div id="middleImg"> <img src="images/images2/1_2.jpeg" /> <div id="middleArea"></div> </div> <div id="small"> <ul> <li><img src="i

2020-08-17 22:00:02 162

原创冒泡排序,选择排序,快速排序三种排序方式

(1)冒泡排序for (i = 0; i < arr.length - 1; i++) { for (j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { var tmp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = tmp; } }}(2)选择排序for (i = 0; i < arr.lengt

2020-08-17 21:51:14 233

原创实现继承的几种方式

(1)寄生继承Object.create(2)构造函数+对象冒充 function Person(_name, _age) { this.name = _name; this.age = _name } Person.prototype.fly = function () { console.log("fly") } function Student(_name, _age, _job) { Person.call(t

2020-08-17 21:48:43 92

原创 promise相关

回调地狱需求是：通过选择省，再去发请求，选择城市，再发请求，请求到区$.ajax({ //全国有多少省 type:'get/post' url:'www', dataType:'json/jsonp' async:true, data:{ id："1" }, success:function(res){ console.log(res) $.ajax({ //这个省有多少市

2020-08-17 21:42:00 106

原创 window属性对象中的history和navigator

history对象history对象的属性history.length; //history对象中的记录数history对象的方法history.back(); //前往浏览器历史条目前一个URL, 类似后退history.forward(); //前往浏览器历史条目下一个URL, 类似前进history.go(-1); //浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)navigator对象navigator对象是window对象的属性，它保存

2020-07-27 22:30:56 182

原创 js的继承

(1)寄生继承Object.create(2)构造函数+对象冒充function Person(_name, _age) { this.name = _name; this.age = _name}Person.prototype.fly = function () { console.log("fly")}function Student(_name, _age, _job) { Person.call(this, _name, _age) this.job = _jo

2020-07-20 22:15:45 89

原创数组扁平化(多维变一维)

(1)es6的拓展运算符var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];function flatten(arr) { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr;}console.log(flatten(arr))(2)递归var

2020-07-20 22:12:20 146

原创数组去重的方法

(1)es6的拓展运算符和Setconsole.log(…new Set(arr))(2)遍历function unique (arr) {let newarr = []for (let i = 0; i < arr.length; i++) {if (newarr .indexOf(arr[i]) === -1) {newarr .push(arr[i])}}return newarr}console.log(unique (arr) )...

2020-07-20 22:09:56 75

原创 react应用数据可视化

地址:https://echarts.apache.org/examples/zh/index.html#chart-type-radar1.下载依赖包npm add echarts -S2.引入import echarts from ‘echarts’export default class App extends Component { render() { return ( <div> <div id="main" style

2020-07-20 21:45:37 261

原创 react的生命周期

1. 挂载卸载过程1.1.constructor()constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。1.2.componentWillMount()componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor

2020-07-20 21:43:08 87

原创 vuex的使用流程

1.引入一个安装好的vuex2.注册vuex3.实例化4.定义核心state 数据mutation 方法actions 异步方法getters 对已有数据加工形成新数据,store中数据变化,getter中的数据也会变化5.挂载store到vue6.在需要的组件中使用vueximport Vue from 'vue'import Vuex, { Store } from 'vuex'Vue.use(Vuex)export default new Store({ stat

2020-07-20 21:17:51 1561

原创实现ant-desgin里的Modal组件拖拽

在使用Modal组件时,新增了一个需求,让他能够实现拖拽的效果1.首先找到控制modal的类名让这个div框变为一个绝对定位,它默认是相对定位,然后可以给它一个高度,如果不给,就是我图中的样子了.在index.less文件里面给它样式,引入index.less.ant-modal-content{ position: absolute !important; width: 480px;}2.封装一个drag.jsdrag.jsclass DragBox { construct

2020-07-13 22:06:00 862

原创新增数组对象方法

1 isArray()Array.isArray()方法是用来判断某个值是否是数组，如果是，则返回true，否则返回false，用于判断一些类似数组的对象很有用。因为无论是数组还是对象，对于typeof的操作返回值都为object，所以就有了区分数组类型和对象类型的需要.而有些对象中又存在length属性,instanceof用来判断内存中实际对象A是不是B类型2 indexOf(),lastIndexOf() [ES5]indexOf()方法返回给定元素能找在数组中找到的第一个索引值，否则则返回

2020-07-09 21:49:47 1962

空空如也

空空如也