- 博客(42)
- 收藏
- 关注
RSS订阅原创 修改图标颜色除了使用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关注的人