Lycorisradiata0619-CSDN博客

原创 echarts-gl + echarts + vue2实现3D饼图

参考：参考地址echarts引入在这就不讲了一、安装：npm install echarts-gl --save二、局部引入：在需要使用的文件引入即可import 'echarts-gl';三、完整代码<template> <div ref="Dpie" id="Dpie" class="echarts" style="width: 100%; height: 100%"></div></template><script>

2021-09-28 15:32:34 1884

原创 vue-ant-design的Tree(树形结构)的父子节点关联问题

树形结构父子节点有关联的逻辑是：父节点选中，子节点自动选中，子节点全都选中，父节点自动选中。项目需求是：父节点可以控制子节点，也就是点击选中父节点时，子节点全部选中，点击取消父节点时，子节点也随之取消；但是点击子节点选中或者取消都不会影响到父节点。第一步：切断父子节点之间的关联。checkStrictly控制父子节点关联，默认为false，表示父子节点有关联，将他的值改为true，切断父子节点之间的关联。第二步：监控check事件，操作绑定数据checkedKeys。点击复选框，e.check

2021-08-13 13:31:32 4841

原创前端通过后端返回的字符串（＜br/＞\＜/n＞），换行失败

后端返回字符串带有、等换行符，在前端页面无法正常渲染出换行效果，尝试使用str.replace(/(<br\/>)/g, '\n').replace(/(<\/n>)/g, '\n')方法没有效果，只是将后端返回换行符的位置变成的空格，但是控制台输出可以看到换行效果。解决方法给包含换行符字符串的元素增加csswhite-space:pre-wrap;就可以解决这个问题。附上white-space的定义用法以及可能的值查看官方定义...

2021-02-22 11:34:43 3972 1

原创修改滚动条样式

将进度条样式（如图）：⬇修改为（如图）：⬇代码如下：.scroll::-webkit-scrollbar{ height: 5px !important; width: 5px !important;}.scroll::-webkit-scrollbar-thumb { border-radius: 0; border-style: dashed; background-color: rgba(157, 165, 183, 0.4); bo

2021-02-19 14:31:19 865 2

原创 vue之路由懒加载

为了让首屏加载速度更快一点，给客户更好的使用体验，我们使用路由懒加载。***路由懒加载路由懒加载有三种方式1、vue异步组件代码示例：import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ { pa

2020-09-14 10:36:13 113

原创高德地图动态绘制路线--moveAlong（vue）

高德地图的引入和使用，详见高德地图动态绘制路线–轨迹巡航（vue）动态绘制路线<template> <div class="page_demo"> <div id="container" class='container' :style="node"> </div> </div></template><script>// import AMap from 'AMap'export

2020-08-31 14:22:20 8151 1

原创 vue里promise的使用

在用vue做项目的时候，有一个业务场景是发布一个带有附件的消息，后台接口的设计分为两部分：先发布消息内容，返回该消息的id，然后以该消息id为参数，上传消息附件。所以在后一个接口发起请求的时候，前一个接口必须已经请求成功。...

2020-08-31 09:47:00 701

原创 vue之检查依赖包的使用情况

安装：npm install depcheck -gcmd到要检查的项目目录，运行depcheckD:\project>depcheckUnused devDependencies //未使用的依赖* underscore* Unused devDependencies //未使用的devDependencies* jasmineMissing dependencies //缺少的dependencies* lodash可以根据运行结果进行包的安装或卸载~...

2020-06-30 17:04:35 2025

原创前端基础之关于数组的方法整理

1、arr.push() 从后面添加元素，返回值为添加完后数组的长度,改变原数组let arr = [1,2,3,4,5];console.log(arr.push(6)); //6console.log(arr); // [1,2,3,4,5,6]2、arr.pop() 删除数组最后一项，返回值是删除的元素,改变原数组let arr = [1,2,3,4,5,6];console.log(arr.pop()); //6console.log(arr); //[1,2,3,4,5]3、

2020-05-14 16:15:08 318

原创前端面试之webpack

问题预览1、webpack的基本配置2、如何利用webpack优化前端性能（提高性能和体验）3、提高webpack的构建速度？4、如何在vue项目中实现按需加载？问题解答：1、webpack的基本配置基本配置有：entry（项目入口）output（出口文件）module（模块的处理）plugin（loader不能处理的都交给它）(1).entry（项目入口）webpack...

2020-04-29 14:10:49 463

原创海康威视V1.1.0+vue项目

最近因公司业务需要，要在vue项目里呈现某现场的实时视频，用的是海康威视的网络摄像头，可以通过ip、port、用户名、密码登陆摄像头，我在网上找到一个web控件开发包，在此基础上进行开发，实现了项目需要。引入jquerynpm下载npm install jquery --save配置文件const webpack = require('webpack')plugins:[ ...

2020-03-24 16:51:14 1514 4

原创 vue项目里背景图片打包上线后出错

1、问题用vue-cli构建的项目，在build打包上线后，背景图片路径解析出错，导致上线后的项目背景图片无法显示。2、原因在vue-cli构建项目后，有两种运行方法：npm run dev: 开发环境，资源使用绝对路径，可以看到正常的背景图片；npm run build: 打包项目，相对路径，上线后路径解析错误。注意：通过img标签引入的图片是正常的，因为img标签是html标签，路...

2020-02-25 15:02:02 449

原创 vue通过路由传值

1、配置路由通过routesexport default new Router({ routes: [ { path: '/test', name: 'test', //必须添加name，否则params无法识别 component: test } ]})2、传递参数通过$routerthis.$router.push(...

2020-01-19 15:00:22 201

原创 vue2引入公共的scss文件

vue项目中使用scss第一步：下载依赖模块npm install sass-resources-loader --save-dev第二步：修改build文件夹下的utils.js将scss: generateLoaders('sass')修改为scss: generateLoaders('sass').concat( { loader: 'sass-res...

2020-01-06 11:53:28 488

原创高德地图动态绘制路线--轨迹巡航（vue）

1、将高德地图引入项目第一步：在index.html文件中引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script><script src="//webapi.amap.com/ui/1.0/main.js">...

2020-01-03 14:55:58 8205

原创 vue-cli项目中使用scss

第一步：下载依赖npm install sass-loader --save-devnpm install node-sass --save-devnpm install style-loader --save-dev第二步：在build文件夹的webpack.base.conf.js文件的rules里添加{ test: /\.sass$/, loa...

2019-12-31 14:12:09 372

原创 vue-cli项目引入highcharts的3D图表

1、npm安装highchartnpm install highcharts --savenpm install vue-hightcharts --save2、在main.js引入import highcharts from 'highcharts'import VueHighCharts from 'vue-highcharts'import highcharts3d from ...

2019-12-30 14:23:18 1840

原创前端之冒泡排序

每种排序方法都是假设从小到大的排序的，从大到小的排序是一样的，就不在这一一讲解了。冒泡排序思想：两两依次比较，如果前一个比后一个大，就交换，直到最后，那么，最后一个数就是最大的，交换到没有可以交换的时候，排序结束。具体步骤：1、比较相邻的元素，如果第一个比第二个大，交换两个元素的位置；2、对每一对相邻的元素做同样的工作，直到最后一对，最后的元素会是最大的数；3、针对除已经排序好的元素...

2019-12-27 10:10:56 1089

原创 vue-cli开启gzip压缩、后台开启gzip

使用vue-cli创建项目。第一步：下载插件特别注意版本问题，如果出现版本的错误，可以下载低版本的插件。npm install --save-dev compression-webpack-plugin第二步：找到config文件夹下的index.js文件，productionGzip改为true，开启gzip压缩。第三步：找到build文件夹下的webpack.prod.conf....

2019-12-24 10:09:05 1138

原创文本溢出显示省略号（多行溢出，单行溢出）

####单行文本溢出显示省略号overflow: hidden;text-overflow:ellipsis;white-space: nowrap;####多行文本溢出显示省略号display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; // 控制行数overflow: hidden;...

2019-12-18 14:14:27 253

原创 vue获取当前的IP和地址

vue获取当前的IP和地址第一步：在index.js里引入外部的js文件 <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>第二步：调取相关方法获取ip和地址IP = returnCitySN['cip'] // ipadress = returnCitySN["cname"] // 地址...

2019-12-18 13:57:25 7351 4

Lycoriy的博客