dengzeyuan-CSDN博客

原创 vue2 虚拟列表（优化版）

3.向下滚动加载下一条数据时候卡在计算阈值内，导致底部留白太大，通过至多加载固定窗口对应展示数据的数量给追加到原本的结尾索引，达到多渲染一屏窗口的数据。虚拟列表是优化长列表的一种手段，防止列表存在过多的dom元素导致页面卡顿（包扣移动端下拉到底加载下一页这种列表加载的dom元素多了一样会卡）。用来存放数据，并且让他随着滚动条一起动，达到视觉上的列表滚动。2.当窗口的resize事件触发一切数值都重新计算，让列表底部样式不出错，和滚动到底部不抖动。

2023-03-20 23:16:47 903

原创 axios下载Excel到本地

axios下载二级制流形式的Excel文件。后台服务接口返回的Excel为二进制流，如下图所示：前台页面利用 axios下载Excel，处理方式如下代码所示：//查询条件formInline: { saleName: "", doctorName: "", goodsName: "", startDate: "", endDate: ""} axios({ method: 'post', url: "/apr/test/

2020-06-28 14:25:46 865 1

原创 vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题。

出现打包后icon图标变成小方块的原因只有两个一。element-ui版本和element-ui/lib/theme-chalk/index.css版本不一致。解决办法：卸载已经有的element-uinpm uninstall element-ui然后在安装新的npm install element-ui二。打包后的element-icons.woff 和el...

2020-04-13 16:06:40 19771 3

原创通过ali-oss在vue，微信小程序中上传文件/图片

在vue中一、安装npminstallali-oss--save二、引入importOSSfrom'ali-oss'三、实例化OSS：默认上传根路径为 bucket表示的目录let ossClient = new OSS({ region: "oss-cn-xxxxxxx", accessKeyId: "xxxxxxxxxxxxxx...

2020-03-24 20:13:40 1089

原创 vue-cli / vue-cli3 配置不同环境对应不同打包命令详解

废话不多说，直接跟着我的步骤走；vue-cli一、package.json因为我这边的Jenkins（测试环境）的脚本执行命令为 build（运维不给改）所以只好前端将build命令对应的环境修改为测试环境。...

2020-03-20 10:33:15 2796 7

原创 d3-v4.x版本-世界地图

v4.x 版本-世界地图代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下：一、球形世界地区二、等距圆通投影实现代码如下：（包含关键代码注释）两种实现方式代码都放在了一起，前半部分被注释掉的为球形世界地区 <template> <div class="hello"> ...

2018-11-20 14:57:08 3603 1

原创 d3-v4.x版本-弦图

v4.x 版本-弦图代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下：实现代码如下：（包含关键代码注释）<template> <div class="hello"> </div></template><script>const d3 = ...

2018-11-20 14:32:39 723

原创 d3-v4.x版本-力导向图

v4.x 版本-力导向图代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下：每个节点都可以进行拖拽，并伴随力矩的效果实现代码如下：（包含关键代码注释）<template> <div class="page"> </div></template>...

2018-11-20 11:16:08 1419

原创 d3-v4.x版本-环状图

v4.x 版本-环状图代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下：实现代码如下：（包含关键代码注释）<template> <div class="hello"> </div></template><script>const d3 ...

2018-11-20 11:05:54 563

原创 d3-v4.x版本-散点图（拖拽、缩放散点元素）

v4.x 版本-散点图（拖拽、缩放散点元素）代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下：一、默认状态二、拖拽散点元素因为加了延迟动画，所以拖动的时候会有延时的动画效果。三、缩放散点元素；注意：在滚轮对元素放大/缩小的时候，相应的坐标系也是会跟着放大/缩小实现代码如下：（包含关键代码注释...

2018-11-20 10:52:36 1557

原创 d3-v4.x版本-折线图

v4.x 版本-折线图代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下：实现代码如下：（包含关键代码注释）<template> <div class="hello"> </div></template><script>const d3 =...

2018-11-20 10:30:05 813

原创 d3-v4.x版本-柱状图

v4.x 版本-柱状图代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。demo实现效果图如下：实现代码如下：（包含关键代码注释）<template> <div class="hello"> </div></template><script>const d3 ...

2018-11-19 17:29:04 295

原创 js按住鼠标左键选中网格元素，被选中的网格位置上填充可输入内容，插入图片等的容器。并且网格上的容器，可拖动、改变尺寸、但互相之间不可重叠（如果重叠回到上一次的状态）。

js/jquery 按住鼠标左键圈选网格，圈选网格颜色变深，圈选区域不可重叠，被选中的网格位置上填充可输入内容，插入图片、媒体，表格、echarts图表等的容器。并且网格上的容器可拖动，可改变尺寸，但不可重叠（如果重叠回到上一次的状态），上述要求为本次实际开发项目（vue框架）中的要求，目的是让用户创建自定义报告内容。因为将这部分交互功能单独封装了起来，所以分享出来还是希望和大家互相学习。...

2018-11-13 17:47:22 1120 1

原创 d3分区扇形拼接雷达图（regional_radar）,vue组件间通信，js模块和vue组件互相引用，vue-router,element-ui,axios,echarts,less(开箱即用)

项目基于vue-v2.x版本搭建，包含了：vue组件，组件间通信，外部js模块和vue组件的互相引用，vue-router,element-ui,axios,echarts,less(全部配置好，开箱即用)。分区域雷达图通过d3完成，每个区域代表唯一的分类和对应的子类（每个子类坐标单位不同，也为唯一），通过多个扇形区域拼接成一个完整雷达图（regional_radar）。分区域扇形雷达图（...

2018-06-09 17:10:20 2063 2

原创基于d3(v5.x)/jquery和svg,初步实现流程图和思维导图

基于d3(v5.x)（主要用到选择器）或者jquery（也是主要用选择器）实现初步元素之间连线，因为在做流程图和思维导图用到的主要技术就是元素之间的连线，通过svg可以将html元素连接起来。经过此次编写个人认为主要是坐标的计算。在通过svg里面的line或者path画线即可。下面为实现的代码（代码里有注释）和示意图。仅供参考（如果能帮到别人当然更好）。下图所示，左边的div里面的元素都可以拖动到...

2018-05-14 22:58:52 6629

原创 windows下git和TortoiseGit(小乌龟)和putty安装配置对github进行操作

windows下git小乌龟（tortoiseGit）安装配置，安装tortoiseGit成功在桌面上右键可以看到有git的选项出现为止，注意在安装的时候选择使用putty还是ssh建立网络连接决定后面的步骤，本次以选择putty为例。 2，安装git，在tortoiseGit安装完成之后需要选择安装git的路径。才可以使用桌面小乌龟版git对github仓库进行操作（pull，push，fetch传等操作）。

2017-12-31 23:12:02 8880

原创 RequireJs按需要加载angular模块和依赖，并且用r.js压缩打包js和css文件实现加载优化（图文）。

RequireJS 是一个JavaScript模块加载器，使用RequireJS加载模块化脚本将提高代码的加载速度和质量。而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路由等。不受网络情况影响一直是在angular或者jquery加载之后才加载依赖相关联的模块。r.js为requireJs自带的一个可以对js和css等进行压缩打包的插件，打包之后可以将所有模块输出

2017-08-23 14:55:52 1550

原创解读angular2官方文档的“快速上手“章节的开发环境，进行配置启动项目（图文）

配置angular2的环境，不把node安装在C盘，安装完node和npm后，安装angular-cli的时候会出现安装不成功，安装cnpm之后再命令行里输入cnpm install -g @angular/cli出现命令名称无法被识别的错误情况。node环境变量配置。修改npm的镜像为淘宝镜像找到npmrc文件添加 registry https://registry.npm.taobao.org ，也可以安装cnpm安装@angular/cli，安装@angular/cli

2017-08-08 15:13:18 307

dengzeyuan的博客