- 博客(25)
- 收藏
- 关注
RSS订阅原创 echarts map地图添加背景图
给map地图添加了一个阴影3d的效果，添加一张背景图，给人感觉有3d的效果。在mounted方法里面给地图添加背景图。
2024-05-14 13:36:36
553
原创 Vue.directive 自定义指令 el-tooptip 提示框
该指令主要实现el-tooptip提示框自适应内容宽度是否溢出父元素, 且只有在当前元素宽度溢出父元素的情况下才回显示el-tooltip安装对应的vue项目依赖安装element-ui 中的 Tooptip依赖；
2022-10-08 10:58:05
810
原创 vue中 使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏 视频；同时可以动态更改视频直播地址，新增，删除视频。实现效果实现代码安装依赖 npm install video.js --save // 视频播放器插件 npm install videojs-contrib-hls --save // 播放hls流插件 npm install @videojs/http-streaming --save具体代码如下：<template> <div id="app">
2022-01-24 13:20:05
5090
原创 原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后，重新生成画布；鼠标在画布区域内绘制，移动，拖拽，删除矩形（如截图工具一般）；isboundary() 判断是否需要判断边界问题，默认false。效果截图实现代码vue页面– 注意：原本canvas不支持键盘事件，为canvas加上tabindex=0，转为HTML5 DOM元素，方可支持键盘事件 <div class="phone-content"> <img class="phone-bg-image" ref="ph
2021-11-24 12:04:29
4528
1
原创 vue ant文件上传组件二次封装
支持功能：多文件上传，单文件上传，文件类型限制，文件大小限制，文件个数限制（主要针对多文件上传）<template> <div> <a-spin :spinning="spinning"> <a-upload method="post" :disabled="disabled" :list-type="listType" :data="paramObj" :he
2021-04-16 17:12:18
791
原创 ant notification通知框 内容支持html标签
1.1 问题描述因业务需求要求 ant 的 notification 通知框中内容 需要支持 html标签。1.2 解决方案根据 官方文档的API 可以看出，提示内容可以采用以下3种类型方式。于是 选择第二种 vueNode方式。核心代码如下：/** * 其中 domProps: { innerHTML: errorMsg } 核心关键，然后 errorMsg 可以携带html标签了 * 同时还可以进行其他属性配置，具体查看 https://www.cnblogs.com/yuxiaole/
2021-04-14 18:02:31
2793
1
原创 Element 之DatePicker 时间选择器 时间限制（精确到时分秒）
结合vue2.x语法，对elementUI时间控件进行 精确到时分秒的时间限制。html <el-form-item label="监测时间" prop="monitorTime"> <el-date-picker v-model.trim="detailData.monitorTime" :picker-options="pickerOptions" type="datetime"
2021-02-03 16:57:40
20666
11
原创 vue破图处理
问题描述按道理前端拿到接口返回的图片地址，直接进行显示，若该图片已经不存在或者被损坏，则会导致前端以“破图”方式显示。例如：但是现目前的需求是，若出现“破图”则采用系统默认的图片显示。解决方法故此需要更改其代码，实现该功能。因为 img出现破图，则会触发error事件，则我们可以对该事件，进行src配置。代码如下：<img :src="base_apiUrl+item.articleImage" @click="goNewsDetails(item)" @error.once="mo
2020-09-08 11:13:29
2537
转载 JavaScript获取完整当前域名
window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.netwindow.location.host; //返回url 的主机部分，例如：mp.csdn.net window.location.hostname; //返回mp.csdn.netwindow.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)window.location.pathname; //
2020-08-26 11:31:15
322
原创 vue 动态更改路由参数
需求描述要求点击 地区下拉，动态更改 路由的name和id参数。效果图实现步骤安装依赖npm install webpack-merge在main.js 文件中注册 merge//动态更改路由参数import merge from 'webpack-merge';Vue.prototype.$merge = merge在需要的页面使用该功能 let name = data.name; let id = data.AreaId; //判断是否重复点击地区，避免报错 if (
2020-08-21 09:36:31
1997
原创 echarts饼图 mouseover中间部分文字样式设置，默认显示总和
需求描述需求要求利用echarts的饼图对企业数量进行统计，要求 默认饼图中间 显示全部 企业数量，鼠标移动上去，则显示对应部分的企业数量，并且设置样式。效果图具体代码let TrendCharts = this.$echarts.init( document.getElementById("trendChart1") ); var options = { //设置主副标题 title: { show: true, text
2020-08-20 17:23:07
4809
5
原创 vue 利用CSS 的 transform属性 对 页面布局进行自适应缩放
问题描述需求要求在不同的适配器上，都需要保证页面的整体布局无误，只能对页面的字体进行一定比例的缩放，才能实现这样的效果。下图：是在1920*1080显示屏上呈现的正常效果但是在小屏幕显示的错误效果 或者打开开发工具，显示的错误效果解决方案动态计算整体布局的高度和宽度（1） 利用jQuery的 $(window).width() 获取对应的当前宽度（不包含 任务栏的宽度+菜单栏的宽度 + 滚动条的宽度）（2）同理 利用 $(window).height() 获取对应当前的高度 （不包
2020-08-20 16:57:46
14893
14
原创 避免 echarts 柱状图 X轴出现小数点的问题
问题描述当数据较小时，柱状图的X轴的坐标会用小数点将数据撑开，使其均匀显示：但是该图是对排污的企业数进行一个有效性统计，按道理不应该出现小数位的。解决方案在xAxis 加上一行代码minInterval: 1, //不允许出现小数位最终效果...
2020-08-20 09:25:17
5659
原创 yarn 命令安装 @vue/cli成功，bash: vue command not found
使用 yarn global add @vue/cli 安装 vue脚手架成功后，但在命令窗口执行 vue -V报 bash: vue command not found。导致该问题的原因是 环境变量的问题。解决方案如下:第一步： 首先找到yarn 全局安装vue的路径 ：例如：第二步：右键我的电脑 —> 属性—> 高级系统设置 —> 高级 —> 环境变量 —> 系统变量 —> Path 选择新建，将路径复制进行，点击确定。就可以了。然后在在运行命令就o
2020-08-19 15:26:20
2581
原创 Excel文件上传与导出功能
Excel文件上传与导出功能本项目采用 vue-cli3脚手架搭建而成，实现Excel的文件上传并解析 与 导出.cvs 文件本项目学习地址：https://www.bilibili.com/video/BV1RQ4y1A7vw?from=search&seid=15533260577051376510所需依赖yarn add less less-loaderyarn add axios qsyarn add element-uivue add routeryarn add xl
2020-05-25 13:43:42
245
原创 初级前端面试总结-3
初级前端面试总结-3文章目录初级前端面试总结-3面试题汇总css如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？如何水平居中一个div？如何居中一个浮动元素？如何让绝对定位的div居中用纯CSS创建一个三角形的原理是什么？清除浮动的方法？实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？htmlHTML中那些标签是 块级标签，那些是 行内标签，空标签jsjQuery获取dom元素的方式js的数据类型声明函数和异名
2020-05-25 09:55:53
1441
原创 初级前端面试总结-2
初级前端面试总结-2文章目录初级前端面试总结-2面试问题汇总HR请简单的自我介绍在上一家公司中请简单介绍项目的情况。为何从上一家公司离职？说一说你在团队中的优缺点？技术方面请简单说一下你的项目经历那你作为项目负责人需求是自己确定还是项目经理确定后自己开发？一进入公司就是项目负责人还是？关于数据分析这块，主要使用的是什么技术？项目版本管理用的是什么？对于Git你了解多少，git init，git add, git commit, git pull, git push 各代表什么，对于代码冲突 你是怎么解
2020-05-25 09:53:20
756
原创 初级前端面试总结
初级前端面试总结文章目录初级前端面试总结一、cookie、sessionStorage和localStorage的区别1、存储大小2、有效期3、运用场景4、安全性、服务端通信5、作用域6、存储位置7、机制不同8、参考文献二、HTTP状态码HTTP状态码表（版本1） 此表含状态码英文名称参考文献三、HTTP的请求方式有哪几种HTTP Request Method共计15种参考文献四、get请求和post请求的区别1、请求头的区别2、请求参数3、安全性4、运用场景5、传输大小6、其他参考文献五、什么原因引起跨
2020-05-25 09:49:12
660
原创 svg封装
svg封装文章目录svg封装1. 安装依赖2. 将svg文件放入项目中3. vue-cli 2.x 配置4. vue-cli 3.x配置5. 在src/components 创建 icons 文件 创建 SvgIcon.vue文件6.在 components/icons/svg 下创建index.js7. 在 ```main.js```中引用svg8. 使用 svg 组件9. 效果图1. 安装依赖npm install --save-dev svg-sprite-loader2. 将svg文件放入
2020-05-25 09:38:35
432
原创 vue异步加载模块
vue异步加载模块使用vue-cli构建项目，在默认情况下，执行 npm run build/yarn build会将所有的js打包成一个整体，这样情况下 单页面 第一次加载页面会耗费太多时间，导致页面长时间处于 空白情况。所以通常的写法都是 按需加载（用于项目比较大的情况下，就只有几个页面的情况，建议不适用 异步加载模块的方式，加载模块），来提高加载速度。常用的几种用法示例1、第一种//采用该方式加载模块，页面初始化的时候，会将所有的模块都加载，适用于小型项目开发中。import Home f
2020-05-25 09:17:10
1100
原创 vue中component组件嵌套，导致页面重复渲染，重复请求的bug
vue中component组件嵌套，导致页面重复渲染，重复请求的bug因详情页面，有多个tab选项卡考虑页面多处重复使用，而且有多个页面组成，最终决定使用 组件方式来引用页面。因 项目采用的UI组件是 element-ui，刚好看到有一个 样式很类似于 tab选项卡，就采用了 element的 tabs组件，可是 没想到问题就是出现 这儿。错误代码：<el-tabs class="header-tabs" v-model="activeName" @tab-click="handleClic
2020-05-25 09:13:31
6904
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人