![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
温柔于心动
来点干货吧,直面问题答案
展开
-
Unable to clone WebGL context as it has preserveDrawingBuffer=false
创建地图的时候添加preserveDrawingBuffer,并设置为ture。使用如下代码进行截图时,出现地图空白情况。地图使用的框架为mapbox。原创 2024-07-02 08:47:07 · 312 阅读 · 0 评论 -
vue3在router中使用store报错解决方案
就是需要在实例化一下,因为在编译router的时候pinia还未被实例化。原创 2023-11-20 09:03:36 · 419 阅读 · 1 评论 -
vue2和vue3中 ref/refs 使用示例
举例的都是方法,参数的话是大同小异,可以自己动手试试!原创 2023-10-01 09:45:00 · 295 阅读 · 0 评论 -
一行代码让页面变成黑白
对图片进行灰度转换,允许有一个参数,可以是数字(0到1)或百分比,0% 到 100% 之间的值会使灰度线性变化。如果你不想完全灰掉。可以设置个相对小的数字。CSS 特性 filter,并用了。原创 2022-12-02 11:46:16 · 309 阅读 · 0 评论 -
vant 使用deep修改样式不好使解决方案
【代码】vant 使用deep修改样式不好使解决方案。原创 2022-11-19 17:57:41 · 1236 阅读 · 0 评论 -
svg修改图标颜色
我们可以在style中设置fill:#00A0FF。原创 2022-08-15 14:42:45 · 717 阅读 · 8 评论 -
初入职场的前端小白
前提是要会点前端技术,把面试题用自己的话记熟一点,简历整的漂漂亮亮的,然后就可以开始了。原创 2022-08-04 13:57:59 · 1541 阅读 · 1 评论 -
小程序跳转方式
小程序跳转方式。原创 2022-08-02 15:17:23 · 205 阅读 · 3 评论 -
前端网页自动刷新的3种方法
1.页面自动刷新把如下代码加入区域中。2.页面自动跳转把如下代码加入区域中。3.页面自动刷新js版。原创 2022-07-27 15:43:37 · 11316 阅读 · 1 评论 -
关闭页面时向后台发送消息
不管是刷新页面还是关闭页面,后台都能接收到前端发送过来的请求,完美实现需求。当用户代理成功把数据加入传输队列原创 2022-07-27 15:29:44 · 763 阅读 · 2 评论 -
鼠标移入标签上时展示所有内容
一般在文本做完超出...样式处理后,想要鼠标移入时提示所有内容可用此方法。<p title="全部内容">全部...</p>注:title里是要展示的所有内容,不限于P标签,很多标签都可以使用。原创 2022-04-13 11:52:41 · 2512 阅读 · 2 评论 -
Echarts图表变形与自适应解决方案
原因:是Echarts在初始化实例的时候,对应dom元素的宽高还没有确定。1. 监听对应dom元素,如果大小发生变化,调用resize()方法。let chartDom = document.getElementById('myChart');let myChart = echarts.init(chartDom);// 若dom尺寸变化,则resizeconst chartObserver = new ResizeObserver(() => { myChart.res.原创 2022-04-12 14:38:28 · 3331 阅读 · 4 评论 -
vue-treeselect插件
npm install @riophae/vue-treeselect --save //安装import Treeselect from '@riophae/vue-treeselect' //导入import '@riophae/vue-treeselect/dist/vue-treeselect.css' //导入components: { Treeselect } //定义<treeselect:options="orgData" //接口请求回来的数据fiel...原创 2022-03-23 15:04:31 · 1250 阅读 · 2 评论 -
Select下拉框只显示上次选中的值
<template> <Select v-model="model1" style="width:200px"> <Option ref="selectType" v-for="item in cityList" :value="item.value" :key="item">{{ item.label }} </Option> </Select><.原创 2022-02-18 14:42:13 · 684 阅读 · 1 评论 -
setTimeout 与 setInterval
const timer1 = setTimeout(function () { this.newsPres = false }, 3000) clearTimeout(timer1)原创 2022-02-11 16:35:18 · 423 阅读 · 0 评论 -
节流防抖简化版
节流function throttle(fn, delay) { let last = 0 // 上次触发时间 return (...args) => { const now = Date.now() if (now - last > delay) { last = now fn.apply(this, args) } }}// 测试function task() { console.log('run task')}转载 2022-01-29 14:13:40 · 117 阅读 · 0 评论 -
javascript实战笔记
1.flat() - 数组扁平化flat()会按照指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并,返回新数组let arrayOne = [0, 1, 2, [3]]arrayOne.flat() // [0, 1, 2, 3] let arrayTwo = [0, 1, 2, [[[3]]]];arrayTwo.flat(2) // [0, 1, 2, [3]]arrayTwo.flat(3) // [0, 1, 2, 3, 4] //使用 Infinity原创 2022-01-28 14:42:49 · 1186 阅读 · 10 评论 -
Promise.all或者Promise.race处理并发请求
Promise.all处理请求时全部成功,才会成功,否则失败。顺序是从前到后Promise.race 处理请求时有一个请求成功,就会成功。哪个快就先返回哪个 模板: let 创建的变量 = 导入的接口组件.组件内封装的接口名字('上传的参数') let num1 = interfaceFile.role('aaa') let num2 = interfaceFile.role('bbb') Promise.all([num1, num2]).then(res => { /.原创 2022-01-24 16:54:57 · 1086 阅读 · 2 评论 -
随机生成字母数字字符串
const str = Math.random().toString(36).substr(2, 10)console.log(str) // '28hg3htkbz'原创 2022-01-19 15:15:29 · 583 阅读 · 0 评论 -
后台管理系统左侧菜单权限怎么控制
答:是由后端进行控制的。登陆时,我们将用户名密码发送给后端,后端会根据相应的用户返回相应的数据我们前端只需要拿到数据进行渲染即可原创 2021-11-05 14:07:41 · 490 阅读 · 0 评论 -
TS中的函数
1.函数的定义//ES5里定义函数方法function run(){ //函数的申明法 return 'run'}var run = function{ //匿名函数 return 'run'}//ts中定义函数的方法function run:string(){ //函数的申明法 return 'run' //必须类型对应}var run = function:number{ //匿名函数 ...原创 2021-10-03 17:47:07 · 936 阅读 · 0 评论 -
GitLab开发分支提交代码命令
首先查看是否在开发分支,查看分支 git branchgit branch -a查看项目所有分支如果不是,切换分支 git checkout -b切换分支git pull 拉取代码git add . 提交所有文件至暂存区git commit -m "注释" 向仓库提交代码 |将暂存区的内容提交至本地git仓库git push 提交文件至远程仓库git status 查看文件状态...原创 2021-09-30 09:42:46 · 313 阅读 · 0 评论 -
CSS样式书写顺序以及规范
顺序1.位置属性 position, top, right, z-index, display, float 等2.大小 width, height, padding, margin3.文字系列 font, line-height, letter-spacing, color- text-align 等4.背景 background, border 等5.其他 animation, transition 等规范CSS缩写属性CSS有些属性是可以缩写的,比如padding,.原创 2021-09-15 19:49:18 · 383 阅读 · 1 评论 -
vue项目中接口api的封装
在utils下的axiosAPI.js在src下的api文件夹中创建每个页面的api在页面中可以直接使用了原创 2021-09-06 15:52:04 · 286 阅读 · 0 评论 -
vue项目中遇到的难点
input中type为number时 max-length 失效 解决:input type="tel" vue组件中click事件失效 解决:使用了bette-scroll插件做滚动。加.native也不好使,发现better-scroll的配置中没有设置 click:true,设置过之后click事件成功。 不同商品页,id变化,商品不变 监听$route变化,然后获取id重新去取数据。 修改完数据点击提交后,数据变了 页面数据没有更新 原因:因为v...原创 2021-09-03 17:50:47 · 4472 阅读 · 2 评论 -
javascript短路运算
普通写法 我们根据另一个值来设置一个值不是falsy值,一般会使用if-else语句,就像这样: getList(Frazier){ let lcStr; if(Frazier){ lcStr = Frazier }else{ lcStr = 'Tom' } return lcStr }, console.log(this.getList('Frazier'));//Fr...原创 2021-08-26 14:48:57 · 1150 阅读 · 6 评论 -
el-input 禁止输入特殊字符
<el-input size="small" v-model="city" placeholder="请输入" @blur="addCity(scope.$index)" @keyup.native="btKeyUp" @keydown.native="btKeyDown"></el-input>原创 2021-08-26 10:44:46 · 1071 阅读 · 3 评论 -
Element-ui 设置弹窗取消关闭
在main.js中配置如下代码即可ElementUI.Dialog.props.closeOnClickModal.default = false; Vue.use(ElementUI)原创 2021-08-15 08:07:17 · 1507 阅读 · 0 评论 -
window.location.href打开新窗口
window.location.href="URL"; 表示重新定向到新页面,同时刷新打开的这个页面;例子:window.location.href="http://www.baidu.com"//也可以直接放接口window.open("URL",'top'); 只是表示打开这个页面,并不是打开并刷新页面;...原创 2021-07-24 22:05:59 · 30212 阅读 · 2 评论 -
选项卡(精致版)
<template> <div class="box"> <!--省市区--> <div class="addBody" v-show="flag"> <ul > <li v-for="(item,index) in head" :key="index" v-bind:class="{act:active == index}" @click="active = index">{{ite.原创 2021-07-24 16:37:42 · 130 阅读 · 0 评论 -
vue 强制更新视图(视图不跟新的解决方案)
方案一:this.$set(this.obj,'key','value') //把数据放进去方案二:利用Object.assign({},this.obj)创建新对象方案三:this.$forceUpdate(); //可以直接使用**这个是强制更新 但不推荐使用调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。...原创 2021-07-24 16:29:23 · 1235 阅读 · 0 评论 -
一个项目,同时要适配移动端和pc端,你会怎么做
一般情况下:1.首先使用flex布局,把页面元素都转换成弹性盒子,2.然后通过rem去做页面细节适配.3.接着根据用户在浏览器端和手机端的屏幕大小不同使用媒体查询.根据不同的屏幕宽度做不同的样式布局展示...原创 2021-05-28 10:45:03 · 2540 阅读 · 2 评论 -
Vue2 Vue3中scoped样式穿透修改样式
在vue组件样式中使用scoped,相当于将样式私有化,即样式只用于与当前组件。通过该属性,可以使得组件之间的样式不互相污染。原创 2021-05-15 17:28:59 · 2162 阅读 · 0 评论 -
h5 和css3 的新特性
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 — 变形(transform)、过渡(transtion)、动画(animation) 1. h5新增特性: 语义化标签:header、footer、section、nav、aside、article 增强型表单:input 的多个 type 新增表单属性:placehoder、required、min 和 max 音频视频:audio、video canva原创 2021-05-07 21:34:40 · 238 阅读 · 0 评论 -
proxy快速处理跨域
首先vue组件内<template> <div> <h2>Proxy代理</h2> </div></template><script> import axios from "axios" export default { created() { //这里是自己模拟的带跨域的服务器接口 axios.ge原创 2021-04-07 18:33:11 · 311 阅读 · 3 评论 -
利用惰性思想进行浏览器兼容处理
首先要学会如何获取当前浏览器信息window.navigator.userAgent每次都判断兼容: 利用惰性思想进行浏览器兼容处理function getXhr() { let arr = [ function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, function () { return new ActiveX..原创 2021-04-06 17:05:50 · 133 阅读 · 1 评论 -
如何成为web前端大神以及进阶之路
前端大神要想成为厉害的开发者,那么最不可缺少的就是知识技能的累计,首先一些必要的基础还是要掌握的,除此之外每天抽一点点时间学习一个新的技能点,一年365天 ,你就能get到365个技能,那么你想想 2年 3年 以后呢?还有每天工作中的项目心得也是很重要,除了可以让你技能知识更加熟练以外,还有工作中遇到难点以及不会点,在百度搜索或者团队的帮助下解决掉,在这里也可以有不小的收获,日积月累你也很厉害了。进阶之路成为大神之路看了吧,实力狠硬的情况下那么恭喜你成为了一个资深的.原创 2021-04-06 16:54:19 · 924 阅读 · 4 评论 -
什么是接口文档,如何写接口,有什么规范?
一、什么是接口文档?在项目开发中,web项目的前后端分离开发,APP开发,需要由前后端工程师共同定义接口,编写接口文档,之后大家都根据这个接口文档进行开发,到项目结束前都要一直维护。二、为什么要写接口文档?1、项目开发过程中前后端工程师有一个统一的文件进行沟通交流开发2、项目维护中或者项目人员更迭,方便后期人员查看、维护三、接口规范是什么?首先接口分为四部分:方法、uri、请求参数、返回参数1、方法:新增(post) 修改(put) 删除(delete) 获取(get)2.原创 2021-04-02 15:50:52 · 3569 阅读 · 1 评论