前端
关注
分享
扫一扫
文章平均质量分 54
songywaa
每天进步一点点
展开
-
高德地图2.0使用SvgMarker.Shape.IconFont方法将iconfont矢量图作为图标
使用SvgMarker.Shape.IconFont方法将iconfont矢量图作为图标原创 2022-10-22 14:45:51 · 1566 阅读 · 0 评论 -
解决项目外链新窗口访问海康视频平台URL报错403问题 Whitelabel Error Page
Whitelabel Error Page原创 2022-09-07 11:37:33 · 2170 阅读 · 1 评论 -
前端跳转链接报错403的原因以及解决方案
描述：项目需要外链其他网站资源，跳转时报403报错解决方案index.html中添加代码<meta name="referrer" content="no-referrer">再试下，可以跳转了，完美解决。原创 2021-10-20 17:07:26 · 786 阅读 · 0 评论 -
解决 vue热加载编译速度慢问题，引入按需加载插件 dynamic-import-node
遇到问题当编译项目时，需要花费很长时间，会在67%左右卡顿解决办法1、安装 babel-plugin-dynamic-import-nodenpm install babel-plugin-dynamic-import-node2、vue-cli3：修改babel.config.js文件 （vue-cli3）vue-cli2：.babelrc文件里添加配置dynamic-import-nodemodule.exports = { presets: [ '@vue原创 2021-03-12 10:47:32 · 5887 阅读 · 1 评论 -
使用Form Generator解决前端vue+elementUI动态表单功能
使用场景：在添加数据时候，页面上有固定的一部分表单，而另一部分表单相当于扩展属性，想做成动态生成，产品经理可以自己通过配置，页面就有了扩展属性的表单；关于Form Generator描述网站网址：添加链接描述GitHub：添加链接描述网站描述：基于vue 的element UI 表单设计及代码生成器，可视化设计表单，一键生成原生的vue单页表单代码；vscode插件：form-generator-plugin具体实现1、2、前台页面如何使用为了方便我们自己测试，就先在前原创 2020-09-03 10:07:45 · 26576 阅读 · 17 评论 -
解决vue v-if 不重新渲染组件问题
问题描述：tab切换，发现v-if 的组件并没有销毁掉组件原因：Vue组件v-if新渲染的组件不更新：可能原因是Vue识别到是相似组件（高度相似甚至相同）不会更新元素。解决办法：给原来的组件和新组件分别给不同的key值让Vue识别为不同的组件。...原创 2020-08-19 10:52:29 · 9913 阅读 · 6 评论 -
解决 elementUI 在IE下 table 表格宽度不是100%的问题
问题描述（看下图）：解决方法：.el-table__header{ width: 100% !important;}.el-table__body{ width: 100% !important;}原创 2020-01-19 10:56:03 · 4158 阅读 · 6 评论 -
解决elementui动态切换table列内容，出现数据闪动情况
功能描述：动态显示表格的某些列的内容二级表头也是动态显示解决问题:先看下我录制的gif图，会有数据闪动的情况解决方法：首先，不要使用v-show，要使用v-if。其次，表格加载属于懒加载，所以每次切换内容需要让表格重新加载一次实现方法：给表格加索引，每次切换改变索引值直接上代码：// 控制表格切换<el-radio-group size="mini" v-mode...原创 2019-12-21 11:21:38 · 9266 阅读 · 15 评论 -
router.push()，router.repalce()，router.go()使用
router对象提供了三个用于跳转链接的方法：router.push( ... ) =>跳转到某个子页面，并在history中添加一条记录router.repalce( ... ) =>替换当前的页面，其实也可以理解为跳转，和push的区别就是不会在history中添加记录router.go(number) =>刚才提到的history，在go()中被使用，跳转到上一页就...原创 2019-11-17 21:07:31 · 802 阅读 · 0 评论 -
CSS hack
什么是css hack?由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hac...原创 2019-11-12 18:54:03 · 158 阅读 · 0 评论 -
2019前端工程师自检清单与思考
看到一篇比较好的文章，跟大家一起分享，个人觉得这一波自检与思考对前端工程师有很大帮助，颇受启发对于JavaScript，掌握其语法和特性是最基本的，但是这些只是应用能力，最终仍旧考量仍然是计算机体系的理论知识，所以数据结构，算法，软件工程，设计模式等基础知识对前端工程师同样重要，这些知识的理解程度，可以决定你在前端工程师这条路上能走多远，是时候进行一波自检了，查漏补缺，只有全面发展，才会使你更强...转载 2019-04-16 11:39:29 · 221 阅读 · 0 评论 -
【Flutter 学习笔记八】 Flutter plugin not installed; this adds Flutter specific...
简单描述安装好Android Studio后，运行flutter doctor命令检查配置环境，报如下错误：解决办法解决以下俩个问题：Flutter plugin not installed; this adds Flutter specific functionality.Dart plugin not installed; this adds Dart specific fun...原创 2019-07-15 11:51:31 · 4054 阅读 · 0 评论 -
【Flutter 学习笔记五】windows7系统将PowerShell升级到5.0(5.1)
简单描述1、我在学习flutter，运行flutter doctor命令时候提示以下错误；Checking Dart SDK version...无法将“Unblock-File”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写......我网上搜索说是powerShell版本太低要升级到更高版本2、然后就按照 https://blog.csdn.net...原创 2019-07-11 11:43:44 · 1573 阅读 · 0 评论 -
【Flutter 学习笔记九】 Error running Gradle: ProcessException: Process "**\gradlew.bat"...
简单描述根据官网配置完flutter的各种配置，在 start debugging时候报错Flutter * Error running Gradle: ProcessException: Process "**\gradlew.bat" exited abnormally* What went wrong://这里有个提示，是说我的目录中有中文，要把项目移动一下报错原因在D...原创 2019-07-15 17:08:23 · 1533 阅读 · 3 评论 -
【Flutter 学习笔记六】Android Studio安装与配置
简单描述学习flutter，需要安装Andriod Studio，网上找到一片文章个人感觉超级棒，没有时间总结，直接将地址奉上：https://www.cnblogs.com/xiadewang/p/7820377.html（怕以后找不到，把链接先保存起来）...转载 2019-07-11 14:58:41 · 151 阅读 · 0 评论 -
总结几种实现左边宽度固定，右边宽度自适应的方法
第一种：display:table-cell的应用html代码css代码：.wrapper{ width:100%; display:table;}.left{ width:200px; display:table-cell; background:red;/*为了下边明显看出效果*/}.right{ background:yello...原创 2019-07-18 11:10:48 · 971 阅读 · 0 评论 -
echarts--树图实现自定义图标
简单描述需求第一级：服务器图标有红、绿色俩种状态，只要后边有发现可疑操作就显示红色的(有一个小红灯不那么明显)；第二级：有多个用户，红色图标的用户则表示，发现可以操作，绿色图标的用户没有发现可疑操作；第三级：表示每个用户有多次登录，登录以后做了异常操作就显示红色；第四级：表示具体的异常操作，并且点击跳转到详情页面；...原创 2019-07-16 14:45:36 · 4631 阅读 · 8 评论 -
提交Git文件报错：error: failed to push some refs to 'https://github.com/xxxx'...
简单描述：运行git push -u origin master命令报错Fatal: HttpRequestException encountered.Username for 'https://github.com': xxxx@qq.comTo https://github.com/xxxxxx/vue-webpack-mock-axios-vuex! [rejected] ...原创 2019-07-20 10:22:09 · 1151 阅读 · 0 评论 -
px2rem-loader将px转化为rem，适配移动端vant-UI等框架
简单描述最近尝试了几个移动端的ui框架，发现vant-ui还不错；但是有个问题，就是vant-ui单位是px，使用时需要我们自己去转换为rem；具体实现方法1.下载lib-flexible使用的是vue-cli+webpack，通过npm来安装的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexiblei...原创 2019-08-13 18:32:49 · 1945 阅读 · 0 评论 -
【vue】父组件给子组件传值
简单描述：1、蓝框–组件（SplitLine），代码中有用到，这里说一下，不细说代码；2、红框–组件（bookList），子组件中做循环，父组件给子组件传值；结合下图看下，更明白些；代码1、父组件引入子组件，并使用<BookList :bookList = "bookList"></BookList>模拟数据data () { return...原创 2019-08-09 13:18:25 · 213 阅读 · 0 评论 -
【vue】子组件调用父组件的方法
简单描述总结子组件调用父组件的3种方法：1、直接在子组件中通过this.$parent.event来调用父组件的方法；2、在子组件里用$emit向父组件触发一个事件，父组件监听这个事件；3、父组件把方法传入子组件中，在子组件里直接调用这个方法；具体实现方法第一种子组件中通过this.$parent.event来调用父组件的方法父组件<template> <...原创 2019-08-12 13:06:38 · 294 阅读 · 0 评论 -
【Flutter 学习笔记七】Windows安装 Flutter 运行失败Android licenses not accepted. To resolve this, run: flutter...
简单描述安装好Android Studio 以后，运行 flutter doctor命令，报以下错误：Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses解决办法1、运行flutter doctor --android-licenses命令2、一直输入Y就可以了...原创 2019-07-15 11:10:02 · 2097 阅读 · 0 评论 -
【Flutter 学习笔记四】Windows 7系统PowerShell升级版本
操作环境Windows 7PowerShell 2.0 –> PowerShell 4.0下图看版本号为2.0解决办法1、下载Windows6.1-KB2819745-x64-MultiPkg.msu （https://www.microsoft.com/zh-CN/download/details.aspx?id=40855）2、下载.net4环境，如已安装请忽略（https...原创 2019-07-10 17:37:20 · 718 阅读 · 0 评论 -
echarts--柱状图每个柱子和图例对应，给数值和纵坐标自定义添加'%'
简单描述需求：1、每个柱子表示的内容 和 图例对应 ，并且相对应的柱子和图例颜色一致；2、纵坐标和 柱子上边 数值都需要添加’%’；3、图例显示在右边，涉及到位置设置；看下图，是你想要的柱状图吗？接下来直接上代码！！！重点看代码中的注释不要忘记引入echarts.min.js和jquery.min.js哦！！！<!DOCTYPE html><html la...原创 2019-05-27 11:24:46 · 14867 阅读 · 7 评论 -
Less学习笔记 --- 给 CSS 加点料
概述Less（Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS扩展语言。Less 增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展Less 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。变量（Variables）LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次使用 “@” 来申明一个变量：@color：red...原创 2019-05-15 15:49:57 · 184 阅读 · 0 评论 -
Node自动重启工具 nodemon
一、为什么要使用nodemon在编写调试Node.js项目，修改代码后，需要频繁的手动close掉，然后再重新启动，非常繁琐。现在，我们可以使用nodemon这个工具，它的作用，是监听代码文件的变动，当代码改变之后，自动重启。二、怎么使用1、下载安装（我这里使用npm） npm install -g nodemon2、新建一个文件app.js，并编写下面内容： var expres...原创 2019-04-23 14:25:52 · 1386 阅读 · 0 评论 -
axios+webpack+proxyTable解决开发环境跨域问题
Axios + webpack （proxyTable）一、安装1、 利用npm安装npm install axios --save2、 利用bower安装bower install axios --save3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>...原创 2019-04-15 11:32:14 · 1104 阅读 · 0 评论 -
页面关键字实时搜索查询案例
实时搜索，先来看一下效果吧如果这是你需要的效果：直接上代码一、HTML<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-04-17 11:58:09 · 843 阅读 · 0 评论 -
easyui数据表格datagrid单元格纵向合并
调用datagrid的onLoadSuccess方法onLoadSuccess: function(data){//data是默认的表格加载数据，包括rows和Total var num = 1;//这里涉及到简单的运算，num 是计算每次需要合并的格子数 for (var i=1; i < data.rows.length; i++) { //这里循环表格当前的数据...原创 2019-04-12 11:05:23 · 876 阅读 · 0 评论 -
echarts 实现柱状图左右横向对比显示
重点看代码中的注释 ： 处理负半轴的数据显示，后台传负数，代码中处理显示时为正数接下来直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>对比柱状图</title> <script type...原创 2019-03-29 11:22:09 · 10954 阅读 · 3 评论 -
百度地图--展示行政区划（省市区县）和添加多个标注点案例
百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，您需先申请密钥（ak）才可使用。申请密钥链接: http://lbsyun.baidu.com/.然后按照提示一步一步操作就可以了，这里我们不重点讲如何申请密钥了。接下来我们重点看案例的效果图（案例以中国–浙江–杭州–桐庐县为例）：1、一级地图（中国）2、二级地图（...原创 2019-04-11 15:21:51 · 12332 阅读 · 2 评论 -
常见的web前端性能优化方法总结
首先，我们要了解一下，前端优化的目的是什么从用户角度，优化能够让页面加载得更快、对用户的操作响应更快，给用户提供更为友好的体验。从服务商角度，优化能够减少页面请求数、或者减小请求所占带宽，节省资源。大概有如下优化方法，我们看一下：一、页面内容优化减少http请求次数减少DNS查询次数避免页面跳转缓存ajax延迟加载（一般用在图片多的页面中，滚动时才加载）预加载减少D...原创 2019-04-11 11:13:53 · 4043 阅读 · 0 评论 -
echarts--解决图例和文字位置反了的问题
问题简单描述：我们在设置图例位置时，想要让图例显示在右边，就会设置 x：‘right’，这时你会发现图例和文字方向反了legend: { orient: 'vertical', // 'horizontal' data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'], textStyle: { // 图...原创 2019-05-27 11:34:20 · 3545 阅读 · 2 评论 -
webpack Error: clean-webpack-plugin only accepts an options object
错误描述：webpack官网使用方法如下图：但是npm run build报错以下错误：TypeError:CleanWebpackPlugin is not a constructor然后百度说是这样写：这时又报了个错误：Error:clean-webpack-plugin only accepts an options object错误原因这是由于clean-webpa...原创 2019-06-21 15:08:27 · 402 阅读 · 0 评论 -
【Flutter 学习笔记三】Windows 7系统powershell查看版本号
可以看到版本是 2.0原创 2019-07-10 17:24:09 · 398 阅读 · 0 评论 -
【Flutter 学习笔记二】'PowerShell.exe' 不是内部或外部命令,也不是可运行的程序
简单描述：运行flutter doctor命令时候报下边错误：'PowerShell.exe' 不是内部或外部命令,也不是可运行的程序解决办法：1、检查一下Powershell在不在环境变量的路径中；2、找到 Powershell的执行文件：（以下是我的路径）C:\Windows\System32\WindowsPowerShell\v1.0\3、配置到环境变量中，看环境变量中有...原创 2019-07-10 17:05:55 · 11473 阅读 · 2 评论 -
【Flutter 学习笔记一】flutter开发时候遇到unable to find git in your path的问题
简单描述1、明明已经设置好了git的环境变量，也重启了电脑；2、命令行中运行 flutter doctor还是会报错 unable to find git in your path;解决方法环境变量path配置看有没有C:\Windows\System32;如果没有,填入然后重启电脑，已经正常了....原创 2019-07-10 15:28:35 · 2522 阅读 · 0 评论 -
两种方法上传本地文件到github
1. github在线上传文件夹点击上传文件直接拖拽 即可上传文件夹及文件夹里面的文件。如果点击 choose your files 就只能上传单个文件。2. 通过git工具上传本地文件夹（本地项目）2.1 下载git工具 [https://git-scm.com/downloads]2.2 下载完成后安装完成，注意在安装过程中可以选择创建桌面快捷方式2.3 绑定用户打开...原创 2019-05-23 13:44:13 · 322 阅读 · 0 评论 -
git如何找回本地被覆盖的代码
简单描述pull 仓库代码时候把本地的代码覆盖掉了，导致写的代码被覆盖掉了解决方法1、执行命令 git reflog获取提交的版本号2、 git reset --hard 版本号查看本地文件，已经回来了...原创 2019-07-09 10:35:07 · 16014 阅读 · 14 评论 -
Vue项目中使用swiper在移动端开发轮播图
vue项目中用swiper轮播图老规矩，先看效果第一步：安装swipernpm install vue-awesome-swiper --save第二步：在vue文件中使用1、 引入依赖import 'swiper/dist/css/swiper.css';import { swiper, swiperSlide } from 'vue-awesome-swiper'; ...原创 2019-07-08 11:42:33 · 9454 阅读 · 0 评论