- 博客(42)
- 收藏
- 关注
原创 修改图标颜色除了使用iconfont,这种方法也可以
0x1 前言做过前端开发的都知道,我们在日常的开发中,常常需要用到很多图标,而且有时候,图标的颜色要跟随系统的颜色配置来实时更改需要的颜色。在这里我相信大多数的情况都会选择使用强大的iconfont图标库来完成。但是我这里要介绍是另一个方法,不需要引用iconfont图标库文件。话不多说,我们开始。0x2 主角登场我们都知道,图片图标是无法通过CSS修改颜色的,无论是png还是jpg。但是svg却可以。那么到底该如何实现呢?那么久需要借助svg-inject.js这个插件啦!!!简直不要太强大。点.
2021-11-18 16:01:12
1358
原创 vue2.x封装axiosAPI接口
import axios from 'axios'import Store from '../store'import { Message, MessageBox } from 'element-ui'import GLOBAL from '../api/global'import qs from 'qs'axios.defaults.baseURL = GLOBAL.baseUrlaxios.defaults.timeout = 100000// 请求拦截axios.intercepto
2021-08-31 11:28:17
288
转载 总结了38个ES6-ES12的开发技巧
ES61、let 和 const这两个的出现,总感觉是为了开发的代码规范而出现的。我们要逐渐放弃var,在项目中多用let和const与var的区别:var有变量提升,有初始化提升,值可变let有变量提升,没有初始化提升,值可变const有变量提升,没有初始化提升,值不可变,但如果是定义对象,则属性可变暂时性死区问题说明:其实let和const是有变量提升的,但是没有初始化提升:var name = '林三心'function fn () { console.log(name)
2021-08-12 15:29:39
236
原创 【建议收藏】前端瀑布流实现原理
原理分析:1、瀑布流就是第一排从左到右依次排序,第二排的第一个盒子排列在第一排中最小盒子的后面,后面的就以此类推。2、这里需要计算每排盒子的高度+外边距、宽度+外边距。3、最后通过定位来放在高度最小的盒子的后面。代码实现:var test = (function init(){ // 1、获取所有的盒子 宽度都是固定的 var node = document.querySelectorAll('.item'); // 2、获取第一个盒子的宽度+外边距 var nodeWidth =.
2021-08-09 18:30:53
2913
1
原创 vue实现元素拖动并互换位置
项目场景:在使用Vue的场景下,需要实现对元素进行拖动交换位置。需求分析:1、两两交换的其实是数组的下标。数据内容不变。2、拖拽功能需要用到一下API。方法名详解ondraggable设置元素是否允许被拖动。链接和图片默认是可拖动,因此不用设置该属性ondragstart用户开始拖动元素或选择的文本时触发。ondragover拖动元素或选取的文本正在拖动到放置目标时触发。默认情况下,数据/元素不能放置到其他元素中。 如果要实现改功能,我们需要防止元素的默认
2021-07-29 13:48:55
6411
3
原创 前端使用svg图标的时候,苹果手机出现模糊问题的原因
结果:这个问题主要是使用了<img src="asda.png">标签导致的。原因:1、为什么使用img在苹果手机上出现模糊的效果?img标签引入的svg在苹果浏览器是无法支持的,会被直接解析成普通图片的格式(.png\.jpg)。所以就会出现安卓手机上一点都不模糊,而苹果手机却模糊的要死。解决办法:采用iframe、object来加载。<iframe src="abc.svg"></iframe><!--或者--><object t
2021-07-26 14:28:56
4341
7
原创 明明已经正确引入了iconfont.woff2文件,为什么浏览器还会报Failed to decode downloaded font?
问题背景在开发网站的时候,难免会用到iconfont图标库文件,但是会出现,Failed to decode downloaded font这种错误。这里特指的是没有使用打包工具等方式的引入,这里我遇到的就是普通的引入方式。上图的这个报错,我原先使用的是官方默认给的引入方式,后来将iconfont.woff2装成了base64的格式,打开依然是报这个错误。解决方法直接去iconfont官网去生成对应的在线地址。就可以解决以上问题了。...
2021-06-21 20:03:03
1938
原创 纯CSS3实现常见的时间进度线(竖立方向)
实现效果图:实现思路:html代码:<div class="grow-item"> <div class="time-line"> <div class="time-line-dot"></div> <div class="time-line-title">2019年</div> <div class="time-line-cont">2019年厦门x
2021-05-28 18:42:27
644
原创 js实现数字转中文汉字大写数字,建议保留收藏
function toChineseNum(num){ if(!['number','string'].includes(typeof num)) return console.error('类型错误:应为number类型或者string类型'); var newnum = String(num).match(/[0-9]/ig) if(newnum.length > 10) return console.error('位数过大,无法计算'); var tmpnew
2021-04-21 10:47:35
894
原创 自己在用的VScode配置文件,以防换电脑需要重新配置
{ //打开文件不覆盖 "workbench.editor.enablePreview": false, //关闭快速预览 "editor.minimap.enabled": true, //使用主题 // "workbench.colorTheme": "Darcula Theme from IntelliJ", // 头部注释 插件 ==> koroFileHeader "fileheader.customMade": { "Author": "song.
2021-04-13 11:02:16
367
原创 纯CSS实现超美选项卡
纯静态的,后续的内容可以自己加上去哟!!!<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.
2021-03-31 11:36:23
388
原创 我用8个小时,把TypeScript从头学了一遍,并没有你想象的那么难!!!
TypeScript建议先学JavaScript再看TypeScript,这样你就会很快的理解。文章目录TypeScript第一节 基础类型第二节 变量声明类型断言类型推断变量作用域第三节 运算符算术运算符关系运算符逻辑运算符短路运算符(&& 与 ||)位运算符赋值运算符三元运算符(? :)类型运算符typeof 运算符instanceof 运算符其它运算符负号运算符(-)字符串运算符:连接运算符(+)第四节 条件语句if 语句if...else 语句if...else if...els
2021-03-30 18:35:48
4547
3
转载 在vue中,如何防止element-ui message重复弹框?
场景展示在使用element-ui框架的时候,我们会经常使用到Message组件。但是原生的有个bug,就是会形成消息队列,消息提示会越来越多!那么该如何解决呢?如何解决?利用element-ui中message的close方法,在下一个弹框弹出前先把上一个弹框实例关闭掉代码实现// messags.js 这是自定义的文件import { Message } from 'element-ui'; // 引入messagelet messageInstance = null;const
2021-03-10 18:07:32
751
原创 uniapp开发微信公众号JSSDK分享给朋友、分享到朋友圈
这篇日志,主要记录我工作中遇到的问题。为未接触过的人踩坑!功能需求:点击右上角分享给朋友、分享到朋友圈,当被分享人点击之后,就自动鉴权。(自动鉴权通过后端实现的,但是我觉得也可以通过前端调用官方API进行鉴权请求)开发环境:uniapp、vue安装:在 uniapp 中可以使用模块方式引用微信 js-sdk ,微信官网直接下载的使用有问题,可以使用 jweixin-module。- NPM安装方式(不会用NPM就不要用这种方式)npm install jweixin-module --s.
2021-03-05 11:40:57
2473
原创 uniapp小程序接入友盟
与原生的小程序开发不同,由于uniapp创建的项目没有package.json文件,那我们要如何实现呢?uniappnpm的配置:1.在项目的更目录打开命令控制台:npm init -y这时候就会在更目录中有package.json(我们这里不用修改改文件)2.下载友盟的包npm install umtrack-wx --save3.配置由于使用的是uniapp 所以不能按照官方给出的方式来配置:我们在main.js文件中加入一下内容:import uma from 'umtra
2020-12-22 16:25:45
2928
4
原创 css多行显示省略号同时将最后一行只显示一半,查看全文效果
纯CSS就可以做出来,不需要通过后端来截取返回带有"..."的效果。实现的效果图:实现的代码:<p class="content">如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用tex
2020-12-17 11:15:03
5441
5
原创 微信小程序消息订阅如何监听是否选中“总是选择以上....“?
开发环境:uniapp问题场景在开发微信小程序的时候,遇到了在弹窗的后面加一个层级提示,当你选择了消息订阅提示框的“总是选择以上消息提醒”的时候,就要将这个背景隐藏掉。因为微信官方提供的uni.requestSubscribeMessage({})API并没有直接返回是否选中“总是”的字段。所以这里我们需要配合使用另一个API(uni.getSetting)。如何判断是否选中“总是选择…”?通过观察uni.getSetting()返回的数据,发现关键部分:如果选中了“总是选择…”就会返回您的temp
2020-12-07 18:57:18
2165
原创 微信小程序授权微信手机号踩坑,第一次无法获取到手机号,第二次成功的解决方案
开发工具:uniApp使用场景:点击按钮一键获取微信用户号手机号,并进行登录。过程解析:要获得手机号,前端需要实现以下的代码:<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="default">微信一键登录</button>写好了以上内容,我们就需要通过回调函数getPhoneNumber来获得返回给我们的信息,通过以下的代码我们可以发现,系统返回了一个对象数据。其
2020-11-13 13:11:07
6099
原创 在uniapp中使用vant weapp库开发微信小程序遇到的无法获取tabs参数问题
关于在uniapp中引入第三发UI库的步骤:1:在项目中新建文件夹wxcomponnets,进入该文件夹并创建vant(这是便于区分)2:将下载的vant weapp UI库中的dist解压到wxcomponents > vant 中。3:在App.vue中写入以下内容4:这里有个坑请注意:①第一种写法:该写法也可以实现效果,但是我在使用tabs时,无法获取到当前点击的是哪一个。解决办法就是改写成第二种写法。②第二种写法:哪个页面需要就写在对应的路由下
2020-09-15 12:41:18
916
2
原创 这是前端新手该写出的代码吗?水平太差!
今天博主就来趴一趴自己写的代码是多么的烂!故事是这样:因为在公司我还是一个新手,实际参与的功能需求也比较少。有时候,一个页面都要花上几天的时间,刚开始我还没有觉得什么,甚至觉得自己还有点NewBee?但是,我今天发现了自己有这样的心态,实属太自我了。因为我前面将我负责的项目需求完成的差不多了,所以。我就去看看他们写的代码。诶!突然发现,有个页面的数据一次性加载太多,我就想着将数据改为按需加载(数据懒加载),最后成功的将功能实现了。.那么为什么说我写的代码超烂,烂到了极点呢?下面是我写的代码:
2020-07-30 10:49:35
362
转载 前端性能优化常用方案
=前端开发性能优化方案=减少HTTP请求次数和请求大小代码优化->有利于SEO->有利于扩展维护->有利于减少性能消耗[JS代码优化的108条建议] [雅虎CSS优化的36条建议]...DNS及HTTP通信方式的优化1.在JS中尽量减少闭包的使用(原因:闭包会产生不释放的栈内存)A:循环给元素做事件绑定的时候,尽可能的把后期需要的信息(例如索引)存储到元素的自定义属性上,而不是创建闭包存储B:可以在最外层形成一个闭包,把一些后续需要的公共信息进行存储,而不是每一个方
2020-07-27 09:37:58
182
原创 Vue初级教程组件间八种传值(props、$refs、$emit、bus、vuex)
父子组件通信:props >>>https://www.cnblogs.com/whyaza/p/11528020.html $refs >>>https://blog.csdn.net/qq_38526573/article/details/98216037 $children >>>https://blog.csdn.net/qq_31173561/article/details/89498942子父组件通信:$e...
2020-07-13 23:43:26
445
原创 【前端基础】ES6新增的标准语法
ES6标准let 不能重复声明箭头函数let fun = ()=>{}只有一个参数()省略 let t = a=>{return a2}如果只有一条语句就可以省略{} let t = a =>a2参数扩展存放多个参数function show ( a, b ,...c){}; show(1,2,3,4,5) 参数扩展三个点点,a存1,b存2,c存3,4,5必须是最后一个展开数组let arr=[1,2,3]
2020-07-08 14:11:55
306
转载 【前端面试题整理】ES6篇
1、es5和es6的区别,说一下你所知道的es6 ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化 ECMAScript6,即ES6,是ECMAScript的第六次修订,于2015年完成,也称ES2015 ES6是继ES5之后的一次改进,相对于ES5更加简洁,提高了开发效率 ES6新增的一些特性: 1)let声明变量和const声明常量,两个都有块级作用域 ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一
2020-07-03 18:13:28
223
转载 【前端必学技能】JS防抖节流
0. 引入首先举一个例子:模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>没有防抖</title> <style type="text/css"></style> <script t
2020-07-03 15:40:26
165
原创 我在创业公司的独立完成的第一个项目
我是一个前端小白,来自2020年的应届毕业生。讲真话,疫情期间我也面试了N多家公司,惨遭拒绝。还是麻痹大意了,一开始就去面试心意的公司。既来之则安之。自从毕业之后,我已经快工作一个月了(5月6号上班),在上班的期间,从最初的了解公司产品及业务到现在的前端开发,让我对公司的业务有所了解。废话不多说,现在就来说说我计划三天完成,实际却花了一周左右的时间的小功能模块吧。应公司要求,需要我去完成一个学生认证的页面。拿到原型图之后,经过我三下五除二的思维就开始动手。先给大家看看我的最终效果图吧!!
2020-06-17 20:11:27
316
原创 如何给组件自定义数据动态绑定v-model
<div id="app"> <!-- 使用v-model命令绑定data中需要展示数据 --> <custom-input v-model="msg"></custom-input> <!-- 使用文本插值展示内容 --> <p>{{msg}}</p></div><script> Vue.component('custom-input',{ // 1.子组件中需要接收value.
2020-05-21 12:00:51
516
原创 适合Vue新手练手的项目的最后一章节(八)
第八章 旅游网详情页面开发详情页动态路由及banner布局创建分支“detail-banner”,接下来要实现的是点击首页的某个内容就能进入对应的详情页面。首先给首页的页面模块添加跳转标签,修改home/components/Recommend.vue文件代码如下:<template> <div> <div class="recommend-tit...
2020-01-14 14:45:38
592
原创 使用Vue框架开发去哪儿旅游网移动端实战项目(六)
第六章 旅游网站首页开发首页导航栏根据设计稿完成页面的布局:在正式编写代码之前,先来介绍一下stylus 这是一种与less、sass一样的功能,可以帮助我们快速完成css代码的编写。请使用一下命令进行安装:npm install stylus --savenpm install stylus-loader --save开始编写header页面:<template>...
2020-01-13 14:40:44
1725
1
原创 使用Vue框架开发去哪儿旅游网移动端项目(七)
第六章 旅游网站首页开发首页导航栏根据设计稿完成页面的布局:在正式编写代码之前,先来介绍一下stylus 这是一种与less、sass一样的功能,可以帮助我们快速完成css代码的编写。请使用一下命令进行安装:npm install stylus --savenpm install stylus-loader --save开始编写header页面:<template>...
2020-01-10 15:41:12
999
2
原创 手把手教你Vue框架从入门到实战项目(五)
第四章 搭建项目环境下载NODEJS首先我们需要去node官网下载node.js,这里我建议在开发环境中下载 LTS 类型的即可。这里呢,你根据自己的操作系统下载对应的版本可以了。下载完之后,直接下一步。最后安装也完成之后呢,我们打开我们控制台输入node -v指令,如果安装成功,则会显示当前node.js的版本。接下来我们再输入npm -v指令,如果前面成功的话,这一步也会显示一个版本号...
2020-01-06 13:42:37
612
原创 手把手教你Vue框架从入门到实战项目(四)
第四章 过渡 & 动画VUE中CSS动画原理如果你希望你的某个内容呈现动画效果,需要在当前内容的标签的外部写上transition标签。同时可以给该标签命名一个任意名字。<transition name="fade"> <div v-if="show">hello world</div></transition>实际上加...
2019-12-27 17:13:11
374
原创 手把手教你Vue框架从入门到实战项目(三)
第三章 深入理解Vue组件组件使用中的细节点解析 DOM 模板时 <div id="app"> <table> <tbody> <row></row> </tbody> </table> ...
2019-12-25 19:15:44
675
原创 手把手教你Vue框架从入门到实战项目(二)
第二章 Vue基础精讲Vue实例在Vue中,所有的组件都可以理解为Vue实例。一个Vue应用通过new Vue创建的根Vue实例。<!-- 文本插值{{message}} --><div id="app">{{message}}</div>//全局组件Vue.component('item',{ template:'<div>你...
2019-12-24 13:11:08
615
原创 手把手教你Vue框架从入门到实战项目(一)
第一章 vue的起步VUE的安装官方网站:https://cn.vuejs.org在官网下载最新开发版本的vue.js文件,在开发过程中,我们使用使用vue.js实现Hello World<body> <!-- {{}} 这种叫模板语法 --> <div id="app">{{content}}</div></body>...
2019-12-22 21:56:01
1441
原创 【自学笔记】适合新手入门的ES6基础讲解
第一节1.let、const作用域:ES5中作用域有函数作用域、全局作用域、局部作用域;ES6中新增了块级作用域。let和const中属于块级作用域。//ES6中,默认使用的是【use strict】严格模式function test(){ let a=1; //let a=2; 1. 不可以对已经声明的变量重新声明 console.log(a);// 1 ...
2019-12-22 21:47:37
508
原创 关于跨域解决方案JSONP和CORS
为什么要使用跨域技术?在回答和这个问题之前,我们先来理解一下什么是同源策略?同源策略指的是,不同源地址之间,默认是不能相互发送请求的,这是浏览器的一种安全策略。那么可能你又会问什么是同源?所谓的同源就是指完全相同的协议、域名、端口,只有在这种情况下才可以进行AJAX请求。下面列出来的一张表获取你就明白了。例如与https://blog.csdn.net/index.html进行对比ht...
2019-12-06 23:14:35
253
原创 PHP是最好语言?却不知道如何配置PHP扩展
1.在php目录中找到php.ini-development最好复制一份,将它修改为php.ini打开php.ini找到extension开头的代码,将它前面的注释;去掉即可。2.在Apache/conf目录中找到httpd.conf将PHPIniDir D:/php添加到里面去,任意位置。建议和php相关的配置放在一起。3.重启Apache==================...
2019-12-01 11:48:03
165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人