前端
第一段代码
第一行代码,从开始到精通
展开
-
管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::
管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::原创 2022-07-26 16:39:30 · 1867 阅读 · 1 评论 -
Vue使用Scoped属性后部分标签设置样式不生效 || /deep/语法报错并且无法启动项目
1 Scoped属性作用当 <style> 标签设置 scoped 属性后,它的 CSS 只作用于当前组件中的元素(本地和全局的概念).情况如下:使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响(所以有时候给子组件设置的属性会发现不起作用)。在vue官方文档的vue-loader中看到如下解决方法:2 解决方案2.1 页面中混用本地和全局样式一个组件中同时原创 2022-04-30 22:19:32 · 3925 阅读 · 0 评论 -
Vue[eslint-rules配置]:解决Vue中 eslint 语法检测报错或报错改成警告 // eslint-disable-next-line to ignore the next line.
Es-lint语法严格,很多时候,在Vue中本身不应该是错的写法,在es-lint下会保证代码的严谨性友好的给一个error错误,如v-for的:key等.解决方法:在package.json中对eslintConfig进行配置,即修改或新增rules值(这个是webpack中设置,只是vue-cli集成了webpack)配置实例如下:(看rules中即可)"eslintConfig": { "root": true, "env": { "node": true原创 2022-04-20 18:31:34 · 6406 阅读 · 0 评论 -
Vue:通过浏览器控制台查看全局data值
Vue中借助data实现了数据的存储和中转,方便了界面的绑定渲染和值使用.一些时候,为了调试程序,我们可能需要通过浏览器来查看data中的值到底目前是一个什么情况,方便调试和查找问题.而现有基于Vue-cli框架和单个页面的Vue在定义时,会导致data获取值方法不相同.尤其是通过Vue-cli创建的,里面的文件都是一个个的组件,如何在控制台中修改,查看组件data里的值??(1)没有或找不到具体的Vue对象发现很多通过Vue-Cli创建的具体页面在定义data后,export时,多半没有对原创 2022-04-20 18:22:55 · 15240 阅读 · 1 评论 -
Vue中Axios发起接口请求出现跨域问题:has been blocked by CORS policy
blocked by CORS policy:Access-Control-Allow-Origin通常指的就是浏览器判断请求跨域问题导致.解决方案:1.前端设置代理的方式:在vue.config.js的配置文件中,配置代理伪装请求的方式,解决跨域:详细配置和配置属性解释,见代码注释devServer: { port: 9999, // open: true, // 设置代理 proxy: { //配置跨域 '/api': { tar原创 2022-04-15 10:52:17 · 7323 阅读 · 0 评论 -
JS箭头函数用户和箭头函数转成普通函数处理方法
1 箭头函数箭头函数是ES6出现的新的函数形式即,使用ES6箭头函数语法定义函数,将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数列表和函数体。如:普通函数定义var fn1 = function(a, b) { return a + b} function fn2(a, b) { return a + b}箭头函数定义,为var fn1 = (a, b) => { return a + b} (a,.原创 2022-04-11 11:50:23 · 2223 阅读 · 0 评论 -
VSCode下载提速
在vscode官网下载,速度特别慢,且容易下载中断失败。提速方法:下载地址仍是一样,进入vscode官网点击下载软件,然后把下载的链接地址复制一下,复制链接如下:(原始)https://az764295.vo.msecnd.net/stable/f80445acd5a3dadef24aa209168452a3d97cc326/VSCodeUserSetup-x64-1.64.2.exe然后更换下载域名镜像,即将 az764295.vo.msecnd.net部分换成vscode....原创 2022-03-02 10:46:55 · 388 阅读 · 0 评论 -
解决JS中URL中文乱码-解码
解决url乱码,主要有三种方法:unescape,encodeURI以及encodeURIComponent(),对于url中含有中文的,发现此前用的不起作用,改成了decodeURL中文解码正常,代码如下var url = window.location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -原创 2021-12-29 17:54:09 · 6000 阅读 · 0 评论 -
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值。document.getElementById("xx").style.xxx=xxxxx;对应的属性方法如下表:(js语法存在和css语法中style设置有些区别和转换)盒子标签和属性对比 CSS语法(不区分大写和小写) JavaScript语法(区分大写和小写) border border border-bottom borderBottom border-bottom-c原创 2021-12-28 16:45:24 · 12156 阅读 · 1 评论 -
仿百度地图实现底部自动收缩的切换地图模式的三个按钮
在开发和使用百度地图时,发现百度地图开发的模式切换自动收缩挺方便的,查看了一下网页源代码,发现不是地图封装的控件,是html写的按钮.这里代码用CSS3 transition 属性实现地图切换.<html><head><style scoped>#mapType { width: 106px; height: 70px; position: absolute; bottom: 20px; right: 20px; z-inde.原创 2021-11-04 15:54:19 · 548 阅读 · 0 评论 -
基于CSS的前端图片自适应等比缩放
前端处理过图片的同学,当图片出现像素大小不一,高宽不确定的时候,很多时候,需要根据容易大小完成图片的自适应等比缩放效果,不然会出现图片变形或者图片被裁剪的不友好渲染.解决方法:1.治标.要想治标的话,就需要在上传照片的时候对图片限制或者等比提前处理,这样后续前端取出来的话,就可以非常开心的渲染了,因为图片提前已经根据我们的需要后端处理好了.但是,上述情况,很多时候不适用,更多时候,需要我们后续前端拿图片的时候,实现图片的自适应,(因为用户很多时候的图片很难达到要求)2.终极解决方法:前端CS原创 2021-11-03 10:20:31 · 6349 阅读 · 0 评论 -
CSS实现网页内容禁止选中和复制
.disabled-copy {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}原创 2021-07-04 17:08:03 · 444 阅读 · 0 评论 -
Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦
最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量渲染bu'tong原创 2021-07-01 14:53:07 · 1928 阅读 · 0 评论 -
layui组件添加动画并控制layui-anim动画的显示速度
layui给组件添加动画非常简单,只需要给对应的组件加上class即可:layui-anim layui-anim-scaleSpringlayui-anim必须要给,后面那个是具体动画的效果,layui提供了11种动画效果和1个循环动画的类.具体效果可看:Layui CSS3动画类if (d.待派单 > 0) { $("#dpd_tips").addClass("layui-anim layui-anim-scaleSpr原创 2021-05-12 17:17:13 · 2798 阅读 · 1 评论 -
前端布局CSS样式的一些吐血总结耐用的设置知识
A 盒子模型的一些处理如果你想要调整标签与标签之间的距离 你就可以调整margin,你想填充内部大小可以使用padding.浏览器会自带8px的margin,一般情况下我们在写页面的时候,上来就会先将body的margin去除,所以一般会有万精油去边距的写法:*{margin: 0;padding: 0;}A-1 border边框border:1px solid #fff; (border/margin/padding 都有四边属性,默认顺序是上右下左)A-2 ove..原创 2020-08-10 16:34:41 · 395 阅读 · 0 评论 -
Echarts:使用技巧记录
本文 专门记录Echarts使用过程常用技巧(Tips:可能对于我是技巧,记录下,下次可以直接使用)1.图形随窗口大小自适应图形自适应可以解决浏览器窗口变换大小或电脑分辨率不高导致的变形遮掩等问题,其实方法也挺简单,就是在setOption后,在加一个方法就行,代码如下:myChartAB.setOption(option);myChartAB.resize();//resize就是自动调整size的方法上面的resize方法管用,但是有些时候会实效,其实不是这个方法实效,而是E.原创 2021-03-22 17:25:08 · 781 阅读 · 0 评论 -
LayUI:基于LayUI的图片放大预览方法
B/S端经常需要显示图片,图片有时候,需要预览放大,实现的方法,挺多的,比如鼠标点击放大,比如鼠标悬浮放大等,最近看到LayUI下,可以直接给img绑定onclick时间,可以在事件中打开一个弹窗显示图片,觉得还挺方便,记录以供后面使用. 该方式是通过点击事件后,在方法中实现,感觉后续也可以改成鼠标悬浮的响应事件吧.过程:(1)img标签 中需要增加绑定事件:onclick=\"previewImg(this)\"dr["照片"] = "<img onclick=\"previewI原创 2021-03-22 17:03:13 · 6202 阅读 · 1 评论 -
Echarts X轴文字自适应显示不被遮挡
近期Echarts图形化数据展示项目上线,导入了新的组织结构,奔溃了.为啥?第一,部门数量多,一些地方通过xAxis-axisLabel,可以实现超多部门的斜列显示,但是有些时候设置旋转角度不完全管用,比如下面说到了还有就是部门太密集重叠;"xAxis": [{ "type": "category", "axisLabel": { "interval": 0,原创 2021-01-07 15:57:17 · 10487 阅读 · 1 评论 -
Echarts 雷达图角上的文字遮住显示不全-实现雷达图大小缩放-位置设置以及雷达角上的文字位置调整
最近,Echarts实现雷达图,发现雷达图角上文字被边线遮掩显示不全,原本想着通过grid控制图形位置显示,发现一顿操作没有效果,差点怀疑人生了.后面发现这是一个坑,跟Echarts其他图不一样,雷达图Grid不会生效的,至少我实践是这个样子,图的位置边距以及缩放等都没有改变效果.最后,虽然没有找到为什么gird在雷达图的说法,但是找到了另一种解决方法,通过半径radius和对齐center值设置图的大小和位置.(感觉这个可能在饼图中也可以借鉴这种,未实践)通过radar>radius原创 2020-11-23 15:32:15 · 14021 阅读 · 7 评论 -
ECharts: Uncaught Error: `setOption` should not be called during main process
最近做Echarts数据图形渲染,图形数据量比较大,渲染后,点击查询图形再次渲染,可能数据量大,重新渲染时,出现Uncaught Error: `setOption` should not be called during main process这个错误,代码肯定是没有问题的,因为第一遍默认加载的时候是正常显示,只是重新渲染的时候出现了问题。这个报错,是为了限制 setOption 调用时机,意思是如果 setOption 或者 dispatchAction 的流程没有走完,中途再调用一次 set原创 2020-11-03 18:15:54 · 27466 阅读 · 0 评论 -
Echarts 各配置项详细说明总结
option = { theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','...原创 2020-10-18 23:34:03 · 376 阅读 · 0 评论 -
Vue入门:: this.$emit:Vue父子组件传值(子父之间的通信)和splice()方法的用法
vue中子组件跟父组件通信需要使用this.$emit(),我们先来回顾一下,父组件和子组件的通讯使用什么呢?a.父组件向子组件传值:通过v-bind:的形式进行数据的传递(可直接简写为冒号) 然后子组件 使用props来接收如:// 父组件<todo-item v-bind:item="item" v-bind:index="index" v-for="(item,index) in list"></todo-item>//原创 2020-08-12 17:19:03 · 5598 阅读 · 0 评论 -
Vue入门:计算属性computed的基本使用和特性/计算属性缓存/Vue侦听器Watch
在VUE中,对于任何复杂逻辑,我们都应当养成使用计算属性的好习惯!来看一个例子,我们假设页面某个字符在vue模版下渲染,并渲染前需要加工,如下:<div id="example"> {{ message.split('').reverse().join('') }} // 对字符切割翻转后重组</div>在上面这个地方,我们发现模板不再是简单的声明式逻辑。我们要必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串。A 基本使用方法..原创 2020-08-13 18:02:55 · 1162 阅读 · 0 评论 -
Vue入门:自定义组件(全局组件/局部组件/props/v-bind知识点)
0 组件组件是可复用的 Vue 实例,且带有一个名字.下面就是一个典型的全局组件例子,组件的名字是<button-counter>。// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You c.原创 2020-08-11 18:46:55 · 1509 阅读 · 0 评论 -
Vue入门:Vue常用的基本事件(v-for/v-on/v-model),实现Todo List项目为例
1 v-for:Vue循环取数v-for这里已ul->li 循环显示多个li数据为例.<body> <div id="app"> <input type="text" /> <input type="button" value="提交"> <ul> <li v-for="item in list">{{item}}</li>原创 2020-08-11 17:08:56 · 513 阅读 · 0 评论 -
Vue入门:Hello World
1 Vue安装Vue不支持IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。下载:https://cn.vuejs.org/v2/guide/installation.html2 第一个Vue实例:hello world<!DOCTYPE html><html lang="en"> <head> <meta chars..原创 2020-08-11 15:59:36 · 846 阅读 · 0 评论 -
Charles不能捕获localhost请求解决方法-修改host方法
上文我讲述了一种:Charles不能捕获localhost请求解决方法:曲线救国完成捕获并成功映射线上URL 的文章,用了Fidder方法曲线救国,完成了域名的重定向。本文在补充一下该提到的修改host并成功的方法:通过修改localhost(127.0.0.1)为指定域名解决问题。方法如下1.打开hosts文件:编辑器打开C:\Windows\System32\drivers\etc下的...原创 2019-07-24 16:58:50 · 4018 阅读 · 0 评论 -
Charles不能捕获localhost请求解决方法:曲线救国完成捕获并成功映射线上URL
0.需求说明这个曲线救国仅仅实现可以满足我项目目前的功能:1.能够软件能够捕捉到localhost本地流量;2.解决地址映射(请求重定向),前端项目本地测试时不能跨域请求需要映射下线上服务地址完整调试;3.它的功能跟charles差不多,而且开源免费;4.完整实现上述两个目标并测试成功,详细的实现过程记录,方便初步使用。1.前言看到此篇博客的朋友,在网上可能看了很多博友写的Charle...原创 2019-07-14 22:55:40 · 10744 阅读 · 1 评论