- 博客(44)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue-awesome-swiper或swiper点击事件失效问题解决
注：代码使用vue-awesome-swiper开发，而vue-awesome-swiper也是将swiper进行封装，二者遇到的问题、解决思路一致，只是写法上略有不同。出现点击失效的原因：在loop模式下，超出实际数量的轮播项实际上是被复制出来的，是swiper虚拟slide进行填充，对这些虚拟slide元素进行操作无效。在开发项目时，遇到了需要实现在轮播模式下（loop:true）点击元素事件的需求，在多次踩坑后，总结记录到这篇文章中，希望对遇到这个问题的同行有所帮助。3.获取到html自定义属性。
2023-05-15 17:10:05
4842
2
原创 Vue3中父子组件的v-model双向绑定
以最简单的input组件为例，父组件：<template> <div> <MInput v-model="fNumber" @input="changeFNumber"/> </div></template><script setup>import { ref } from "vue";import MInput from './input.vue'const fNumber = ref('23424'
2022-05-16 14:40:55
2480
原创 一文弄懂react-router V5的使用
一、基础api1. Route：是用于声明路由映射到应用程序的组件层，主要参数有用于react-router匹配使用的path，匹配后对应渲染到页面上的component2. 路由模式选择：hash模式：HashRouter，history模式：BrowserRouterimport { BrowserRouter as Router } from 'react-router-dom'3. switch：只匹配第一个的Route并返回到页面上，如下面的例子，在本地打开项目，假设启动后的路
2022-04-06 18:17:20
1742
原创 React入门（4）--react提升项目性能的Api(pureComponent、memo、useMemo、useCallback)
先看下面的例子import React, { Component } from 'react';class Child extends Component { render() { console.log('Foo render') return null }}class App extends Component { state = { count: 0 } render() { return ( <div&...
2021-05-27 11:39:03
466
4
原创 React入门（3）-- React的错误边界（Error Boundaries）
熟悉React都知道，在React中一些UI的错误，比如throw new Error()，加载服务器资源报错时，或者一些js的语法错误可能会导致整个项目崩溃掉，满屏的红色报错，非常不友好。为了解决这个问题，React16引入了错误边界。就是在报错的情况下，可以通过static getDerivedStateFromError()和componentDidCatch()捕获到这个错误。import React, { Component, lazy, Suspense } from 'rea...
2021-05-18 19:15:13
524
原创 React入门（2）--React的虚拟dom和diff算法
一、虚拟dom和真实dom的区别 我们在render函数里写的jsx其实就是react.creactElement的语法糖，在插件babel-plugin-transform-react-jsx的作用下，jsx就会被转为const title = React.createElement( 'h1', { className: 'header' }, 'Hello, world!')的结构，然后在React.createElement方法中，通过确认标签类型...
2021-05-17 16:58:11
287
2
原创 React入门（1）--React组件的生命周期及其使用场景
学习一门最需要先了解的就是它的生命周期，知道每个生命周期钩子该做什么事情，同时也能理解在不同阶段，React在内部做了什么事情。图片来源：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/挂载时：首先是constructor，一个组件在更新到页面之前需要创建出来，constructor就是class组件的构造函数。static getDerivedStateFromProps的意思就是从props中获取state。
2021-05-17 15:01:25
250
原创 hexo无法正常显示图片的问题
根据hexo官网的文档，想要添加图片，先npm install 一个hexo-asset-image的依赖，然后把_config.yml中的post_asset_folder设为true，这个配置的意思是每次new post一个博客，会增加一个和博客同名的文件夹，把图片放到文件夹里，最后用---title: testdate: 2021-05-07 19:17:57tags: vue---这种写法就可以把图片引进来。然而鄙人多次引用无效，后查...
2021-05-07 20:12:20
667
原创 字节和滴滴一面总结
3月10号先面了字节，提的问题： VueX的原理 js任务机制，setTimeout、promise、async的区别 如何用数组map方法封装一个reduce方法 如果让后端传一个非常大的视频，如何在网络断掉的情况下记住上次传输的位置并继续下载 koa2洋葱模型 3月16号滴滴橙心优选一面，问了以下几个问题： 手写promise all diff算法 鲲鹏架构 实...
2021-03-17 10:14:44
452
7
原创 css3的pointer-events
项目中遇到的问题：在写大屏的时候遇到A元素的层级要在B元素上面，但又不能影响B元素的点击事件，于是便用到了pointer-events: noneMDN上的说明：pointer-eventsCSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target...
2021-03-17 09:59:28
176
原创 react hooks中使用嵌套组件
可以直接将一个组件当成一个参数去传递，通过props.components可以使用这个组件。import React, { useEffect } from 'react';import './staffList.scss';function Title2() { return ( <div>111</div> )}function Title(props) { useEffect(() => { console.log(...
2021-01-12 11:22:29
1334
原创 ant design 表格通过发送请求排序方法
首先，在columns需要排序的那一项中加上sorter:true，因为sorter会触发Table的onChange方法，因此onChange中可以调用获取数据的接口 sorterFun = (pagination,filters,sorter) => { let sortType = sorter.order // 排序类型，正序/倒叙/不排序 if (sortType) { this.getDataList(sortType === 'ascend' ? '.
2020-11-24 17:16:23
1803
原创 react中配置请求代理
首先，使用npm或yarn安装http-proxy-middleware$ npm install http-proxy-middleware --save$ # 或$ yarn add http-proxy-middleware然后，在src文件夹下新建一个setupProxy.js，引用http-proxy-middleware后即可配置代理const proxy = require('http-proxy-middleware');module.exports = f...
2020-11-24 17:04:13
826
2
原创 react-router如何传参
通过params传参 /*路由配置页面*/<Route path="/addPage/:id" component={addPage} />/*跳转前的页面，点击后跳转的方法*/goAddPage() { let id = 111 this.props.router.push({ pathname: `/addPage/${id}` })} 在跳转后的页面中可以通过this.props.router.params得...
2020-11-24 16:01:20
1013
原创 树状图异步请求时的数据处理
在使用ant-design的Tree时，由于每一层的数据较大，不能一次性把数据全部拉取出来，使用了Tree中的loadData后最大的难题就是把每一层的children数据放到树节点中了。我们数据结构大概是这样的list = [ { id:1, children: null, parent: true }]list2 = [ { id: 1-1, children: null, ...
2020-06-18 18:14:31
325
原创 ant-design弹窗Modal报错
安装了react和ant-design后，改变modal的visible的属性，会报“Cannot read property 'getParent'of undefined”的错。苦寻答案良久，在ant-design的gitHub的issue里找到了一位同学分享的答案：ant里的rc-util是5.0.1版本的，在rc-util升到5.0.4就可以修复这个bug。...
2020-06-17 23:23:09
959
原创 vue-route中父路由没有component怎么办
可以在父路由中的component中写component:()=>import('@views/fillout')，就可以正常显示出子路由的内容，不然会发现页面中该是子路由显示内容的地方是空白的。...
2020-03-14 16:19:13
3839
1
原创 手写一个Popover 弹出框
最近的项目中需要一个类似于element但又有多种定制化功能的弹出框，但element给的弹出框只支持点击或者鼠标悬浮唤醒，而项目中需要的是右击，或者嵌套操作，所以就自己写了一个，成果如下图。我按照个人完成的整个思路去介绍。步骤一：首先找到点击的这个dom,然后通过计算这个dom的宽高等属性将这个弹窗定位，如何点击后获取这个dom的尺寸和定位呢？这里我是这样写的<...
2020-02-15 23:17:14
3162
原创 vue中点击后获取该dom的属性以及使用右击事件
<div class="demo" @contextmenu.prevent="getDemo($event)"></div>export default { methods: { getDemo(e) { console.log(e.toElement.className) } }} ...
2020-02-12 21:18:47
1174
原创 Echarts渐变、饼图中间间隔的实现
总结一下最近在Echarts中遇到的问题并找出的解决方法。一、Echarts渐变的写法import echarts from 'echarts'color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF5502' }, { ...
2020-01-10 16:14:24
1994
原创 CSS: 前端的视差滚动，写出看起来高逼格的网页效果
视差滚动其实是一个比较久远的技术，但第一次看到还是被震撼到了，这是什么神仙，是几个页面堆在一起的吗，但真正了解了之后发现写起来真的不难，而且看起来蛮高大上的。我第一次见到其实是在法拉第未来的官网里，你们懂得，贾跃亭的梦想之车https://www.faradayfuturecn.com/cn/ff-91/。 然后我就把这玩意用在了年终总结的PPT上。没错，作为一个...
2020-01-10 15:39:41
2182
2
原创 css实现文字超出后加省略号
先看一下实现后的样子在文字所在的class添加下面的代码：div{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}我们来一个一个的看上面的属性text-overflow属性规定当文本溢出包含元素时发生的事情。它有三个值clip、ellipsis、string,c...
2020-01-09 11:59:37
955
原创 Vue传值——bus总线机制
众所周知，vue提供了很多套组件间传值的方法，父子组件直接用props和$emit就好，大型项目则用vuex，但有一种更适合在小项目中使用的非父子组件传值方法，即bus总线机制。它的用法的实现原理是前端面试中常考的。在第一次换工作的时候，几乎所有面试官都问了有关vue组件传值的几种方法，所以掌握这个知识点是很重要的。 这种方法的原理是通过一个空的Vue实例作为中央事件总线...
2019-12-06 11:48:30
1775
原创 微信小程序中使用iconfont遇到的坑(以下文件没有被打包上传)
最近公司需要做个小程序项目参加创新大赛（祖传开头，最近公司xxx），那就抽空花了2个工时撸出了一个简单的小应用，写的过程中发现小程序和正常的前端项目还是有不少区别的。其中花费时间最多的是研究怎么在小程序中使用iconfont。 这里我记录下摸索的过程： 1.和正常的前端代码一样，在入口的html文件（我使用的是mpvue，如果使用小程序原生标签应该也是类似的...
2019-12-02 15:18:32
9214
2
原创 前端代码规范的重要性及如何组件化开发
从吐槽开始，最近连续接了两个代码质量让自己吐血的项目，出自两个不同的靓妹之手（我没有性别歧视的意思，相反我非常喜欢靓妹）。A妹写的代码，我改了一个月的bug还没有改完，从一开始他们写了一半，然后就长期闲置了该项目。然后有一天，产品突然推了这个项目的进行，就交由我去拯救了。我拿到手，发现所有的分页、所有的缺省页、所有的表单验证、所有的loading、所有的筛选都没有，测试提的bug大多就用了...
2019-10-28 16:52:28
934
原创 在vue中手写一个文字的轮播功能
最近在中控项目中遇到一个问题，就是需要轮播显示数据，网上给的教程都是定高的，所以就自己写了一个，效果如下：对于这种轮播的功能，其实应该根据是否定高去分为两种情况用不同的方案去处理。一、不定高轮播 我在看了很多博客之后发现他们给的方案都是定高的，这种你可能一搜一大把，我就只分享别人没有说过或者不容易找到的情况吧。我暂且将轮播的部分称为轮播区域，将轮播区域之外的地方...
2019-09-21 16:09:28
3025
原创 qrcodejs如何设置宽度和高度为rem单位
在手机端选用了qrcodejs用来生成二维码，但有个问题让人头疼了。我们都知道在qrcodejs中设置宽度和高度的方法有两个，一个就是在canvas标签中：<canvas height="200" wight="200"></canvas>另一种就是在使用QRCode.toCanvas方法时import QRCode from 'qrcode'...
2019-07-26 14:54:10
5984
原创 React中实现手机端滑动分页功能
最近用react做了一个手机端，可以说了解了很多以前没有接触的东西，其中在项目中实现滑动分页让我印象颇为深刻。首先，我们要知道这个功能需要用到哪些准备知识。一、预备阶段 我的想法很简单，就是计算每次加载的最后一条距离项目footer垂直方向上的距离，从而知道什么时候需要将当前页面+1并且向后端发送请求，将重新获得的数据加到上一次获取数据的后面。首先，我们要知道在Reac...
2019-07-26 14:36:24
3539
原创 React系列一：react中提升性能和阅读观感的细节
最近在公司负责的项目从Vue转到了React，于是这一个月沉迷React无法自拔....好吧，这不是不写博客的理由，感觉两个月不写整个人都不好了呢。那今天就说说我了解的React提升性能的细节点吧，并且这篇博客会在之后不断更新完善。一、用Fragment代替div 众所周知，在react的render函数中返回一个组件时，如果有多个JSX标签，则需要用一个父标签包裹住...
2019-07-20 15:39:24
157
原创 vue项目中出现window is not defined报错
最近在vue中使用vue-pdf插件时遇到了window is not defined的报错,查资料表明这是webpack3.0的bug，只需要在webpack.base.config.js下的output中添加一条globalObject: 'this'即可解决此问题。...
2019-05-09 16:15:36
30331
10
原创 javascript遍历循环对象和判断是否为对象的方法
最近公司让我面试了一个前端时，我问了“遍历对象的方法”，结果她给了我一个曾经没有用过的方法，果然面试也是一种学习，故在此记录总结。一. 遍历对象的方法1.使用for ... in语句 for..in语句是一种迭代语句，可以用来枚举对象的属性，也可以用来循环数组。但这里是有个坑的，会把原型上的方法名也遍历出来Object.prototype.method=f...
2019-03-11 16:21:47
1460
原创 探讨vue的双向绑定v-model在项目中的条件搜索遇到的问题
vue的v-model是一个非常好用的双向绑定指令，不难想象因为它帮我们简化了多少逻辑代码。但在最近，测试反馈给我一个问题：在搜索时，只填搜索内容而不点击搜索按钮，接着点击翻页，会有报错说该条件下的搜索结果不存在（就是如下的巨简单无奇的搜索框）。 这里我先说明一下我们项目的搜索和分页机制。我们项目的分页是我们在每次点击页码，将页码数字和各种搜索条件传给后端，再将后端的...
2018-12-29 17:24:14
2112
原创 围住浮动元素的三种方法（css设计指南笔记）
浮动元素脱离了文档流，其父元素也看不到它了，因而不会包围它，比如下面的例子。<section> <img src="images/rubber_duck2.jpg"> <p>It's fun to float.</p></section><footer> Here is the foote
2018-12-18 10:18:22
296
原创 手动销毁Vue中挂载的组件
因为很多页面需要用到<keep-alive>，我就用其将承载页面的父组件包裹了，但这也带来了一些问题。比如新写的页面中，进入下个页面还在调用上个页面的数据（以前没有遇到过，不清楚是是什么原因），即已经切换路由却无法自己destory掉，打日志发现确实没有跑destoryed这个生命周期函数。 如何解决：在需要删除的组件中的deactivated生命周期函数中手动调用t...
2018-12-06 16:57:05
35216
7
原创 vue+element UI带输入建议的输入框el-autocomplete
之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的：companyList = [ { company_id: 1, comopany_name: '腾讯' }, { company_id: 2, comopany_...
2018-12-06 15:36:55
13169
8
原创 Es6数组方法
es6数组增加了forEach,map,filter,find,every,some,reduce等方法，它们都是使用了迭代器函数。一、forEach 遍历循环数组的方法，简化了以前的for( var i = 0; i< arr.length; i++) 操作var colors = ["red","blue","green"];// ES5遍历数组方...
2018-11-27 20:27:59
1037
原创 elementUI上传功能实战心得
最近产品添加了上传文件的功能，我也是刚开始做有关上传的东西，所以这两天收获蛮多，在博客中记录一下心得。一. 基础用法 饿了么在官网把基础用法的API 和示例写的很清楚，这里为节约有效资源的时间，不再赘述，只做补充。 首先，不要被这句“只能传咘啦咘啦”的给骗了，我刚开始就是被这句话迷惑，去找了其他插件，结果由于文档不详细，又换了回来。其实从某种方面来说，文件上传时没有...
2018-10-16 10:01:57
7579
原创 element UI表格排序sortable
最简单的按大小排序，需要添加prop,不然无法使用<el-table-column label="人次" align="center" sortable prop="times" width="100px">
2018-10-10 09:50:23
7833
1
原创 Js中二维数组格式转换问题
项目中遇到个问题，就是后端给我一个如下的二维数组：即一个17项的数组，每一项是一个长度为5的数组，我暂时定义为17*5的数组，而我需要转换为5*17的数组，即5项，每一项是一个长度为17的数组。我使用的是将数组遍历两次（性能可能会不好，但暂时只会使用这种）。我先假定17*5的数组为a，目标数组5*17为b，那我先遍历循环b,构造出每一项都为空数组的b，再把a使用forEach方法，...
2018-10-10 09:46:42
1160
原创 nvm-windows使用与避坑指南，npm没反应也不报错怎么办
装了N次的nvm-windows，然而昨天还是进了各种坑里，捯饬了很久有点尴尬...安装过程 GitHub：https://github.com/coreybutler/nvm-windows/releases 我选择的是nvm-noinstall.zip，下载下来解压到自己创建的C:\dev\nvm目录，以管理员身份运行install会出来一个settings文本...
2018-09-14 14:28:20
7864
4
算法帝国2014中文版pdf
2018-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人