bug修复
This commit is contained in:
xugaoyi
parent
199aa1fa21
commit
c8126e1f2f
|
|
@ -20,6 +20,6 @@ module.exports = {
|
|||
|
||||
"/《TypeScript 从零实现 axios》/": [{"title":"《TypeScript 从零实现 axios》","collapsable":false,"children":[]},{"title":"初识 TypeScript","collapsable":false,"children":[["01.初识 TypeScript/01.简介.md","简介"],["01.初识 TypeScript/02.安装 TypeScript.md","安装 TypeScript"],["01.初识 TypeScript/03.编写第一个 TypeScript 程序.md","编写第一个 TypeScript 程序"]]},{"title":"TypeScript 常用语法","collapsable":false,"children":[["02.TypeScript 常用语法/01.基础类型.md","基础类型"],["02.TypeScript 常用语法/02.变量声明.md","变量声明"],["02.TypeScript 常用语法/03.接口.md","接口"],["02.TypeScript 常用语法/04.类.md","类"],["02.TypeScript 常用语法/05.函数.md","函数"],["02.TypeScript 常用语法/06.泛型.md","泛型"],["02.TypeScript 常用语法/07.类型推断.md","类型推断"],["02.TypeScript 常用语法/08.高级类型.md","高级类型"]]},{"title":"ts-axios 项目初始化","collapsable":false,"children":[["03.ts-axios 项目初始化/01.需求分析.md","需求分析"],["03.ts-axios 项目初始化/02.初始化项目.md","初始化项目"],["03.ts-axios 项目初始化/03.编写基础请求代码.md","编写基础请求代码"]]},{"title":"ts-axios 基础功能实现","collapsable":false,"children":[["04.ts-axios 基础功能实现/01.处理请求 url 参数.md","处理请求 url 参数"],["04.ts-axios 基础功能实现/02.处理请求 body 数据.md","处理请求 body 数据"],["04.ts-axios 基础功能实现/03.处理请求 header.md","处理请求 header"],["04.ts-axios 基础功能实现/04.获取响应数据.md","获取响应数据"],["04.ts-axios 基础功能实现/05.处理响应 header.md","处理响应 header"],["04.ts-axios 基础功能实现/06.处理响应 data.md","处理响应 data"]]},{"title":"ts-axios 异常情况处理","collapsable":false,"children":[["05.ts-axios 异常情况处理/01.错误处理.md","错误处理"],["05.ts-axios 异常情况处理/02.错误信息增强.md","错误信息增强"]]},{"title":"ts-axios 接口扩展","collapsable":false,"children":[["06.ts-axios 接口扩展/01.扩展接口.md","扩展接口"],["06.ts-axios 接口扩展/02.axios 函数重载.md","axios 函数重载"],["06.ts-axios 接口扩展/03.响应数据支持泛型.md","响应数据支持泛型"]]},{"title":"ts-axios 拦截器实现","collapsable":false,"children":[["07.ts-axios 拦截器实现/01.拦截器设计与实现.md","拦截器设计与实现"]]},{"title":"ts-axios 配置化实现","collapsable":false,"children":[["08.ts-axios 配置化实现/01.合并配置的设计与实现.md","合并配置的设计与实现"],["08.ts-axios 配置化实现/02.请求和响应配置化.md","请求和响应配置化"],["08.ts-axios 配置化实现/03.扩展 create 静态接口.md","扩展 create 静态接口"]]},{"title":"ts-axios 取消功能实现","collapsable":false,"children":[["09.ts-axios 取消功能实现/01.取消功能的设计与实现.md","取消功能的设计与实现"]]},{"title":"ts-axios 更多功能实现","collapsable":false,"children":[["10.ts-axios 更多功能实现/01.withCredentials.md","withCredentials"],["10.ts-axios 更多功能实现/02.XSRF 防御.md","XSRF 防御"],["10.ts-axios 更多功能实现/03.上传和下载的进度监控.md","上传和下载的进度监控"],["10.ts-axios 更多功能实现/04.HTTP 授权.md","HTTP 授权"],["10.ts-axios 更多功能实现/05.自定义合法状态码.md","自定义合法状态码"],["10.ts-axios 更多功能实现/06.自定义参数序列化.md","自定义参数序列化"],["10.ts-axios 更多功能实现/07.baseURL.md","baseURL"],["10.ts-axios 更多功能实现/08.静态方法扩展.md","静态方法扩展"]]},{"title":"ts-axios 单元测试","collapsable":false,"children":[["11.ts-axios 单元测试/01.前言.md","前言"],["11.ts-axios 单元测试/02.Jest 安装和配置.md","Jest 安装和配置"],["11.ts-axios 单元测试/03.辅助模块单元测试.md","辅助模块单元测试"],["11.ts-axios 单元测试/04.请求模块单元测试.md","请求模块单元测试"],["11.ts-axios 单元测试/05.headers 模块单元测试.md","headers 模块单元测试"],["11.ts-axios 单元测试/06.Axios 实例模块单元测试.md","Axios 实例模块单元测试"],["11.ts-axios 单元测试/07.拦截器模块单元测试.md","拦截器模块单元测试"],["11.ts-axios 单元测试/08.mergeConfig 模块单元测试.md","mergeConfig 模块单元测试"],["11.ts-axios 单元测试/09.请求取消模块单元测试.md","请求取消模块单元测试"],["11.ts-axios 单元测试/10.剩余模块单元测试.md","剩余模块单元测试"]]},{"title":"ts-axios 部署与发布","collapsable":false,"children":[["12.ts-axios 部署与发布/01.ts-axios 编译与发布.md","ts-axios 编译与发布"],["12.ts-axios 部署与发布/02.引用 ts-axios 库.md","引用 ts-axios 库"]]}],
|
||||
|
||||
"/《Vue》笔记/": [{"title":"《Vue》笔记","collapsable":false,"children":[]},{"title":"基础","collapsable":false,"children":[["01.基础/00.MVVM模式.md","MVVM模式"],["01.基础/10.生命周期.md","生命周期"],["01.基础/20.计算属性 vs 方法 vs 侦听属性.md","计算属性 vs 方法 vs 侦听属性"],["01.基础/30.v-if vs v-show.md","v-if vs v-show"],["01.基础/35.列表渲染之数组、对象更新检测.md","列表渲染之数组、对象更新检测"]]},{"title":"组件","collapsable":false,"children":[["02.组件/36.使用组件的细节点.md","使用组件的细节点"],["02.组件/40.父组件给子组件传值.md","父组件给子组件传值"],["02.组件/50.子组件派发事件和值给父组件.md","子组件派发事件和值给父组件"],["02.组件/52.Prop 验证 与 非 Prop 的 Attribute.md","Prop 验证 与 非 Prop 的 Attribute"],["02.组件/55.自定义事件.md","自定义事件"],["02.组件/60.兄弟组件传值.md","兄弟组件传值"],["02.组件/65.非父子组件传值.md","非父子组件传值"],["02.组件/70.父组件调用子组件方法并传入值.md","父组件调用子组件方法并传入值"],["02.组件/75.插槽slot.md","插槽slot"],["02.组件/80.动态组件与 v-once 指令.md","动态组件与 v-once 指令"],["02.组件/90.vue父子组件的生命周期顺序.md","vue父子组件的生命周期顺序"]]},{"title":"过渡&动画","collapsable":false,"children":[["03.过渡&动画/110.transition过渡&动画.md","transition过渡&动画"],["03.过渡&动画/112.使用animate库.md","使用animate库"],["03.过渡&动画/120.transition-group列表过渡.md","transition-group列表过渡"]]},{"title":"可复用性&组合","collapsable":false,"children":[["04.可复用性&组合/01.Mixin混入.md","Mixin混入"]]},{"title":"工具","collapsable":false,"children":[["05.工具/10.Vue CLi v3 创建项目使用记录.md","Vue CLi v3 创建项目使用记录"]]},{"title":"规模化","collapsable":false,"children":[["06.规模化/100.vuex操作相关.md","vuex操作相关"],["06.规模化/140.路由懒加载.md","路由懒加载"]]},{"title":"其他","collapsable":false,"children":[["99.其他/80.节流函数封装（搜索框防多次请求）.md","节流函数封装（搜索框防多次请求）"],["99.其他/90.操作本地缓存.md","操作本地缓存"]]}],
|
||||
"/《Vue》笔记/": [{"title":"《Vue》笔记","collapsable":false,"children":[]},{"title":"基础","collapsable":false,"children":[["01.基础/00.MVVM模式.md","MVVM模式"],["01.基础/10.生命周期.md","生命周期"],["01.基础/20.计算属性 vs 方法 vs 侦听属性.md","计算属性 vs 方法 vs 侦听属性"],["01.基础/30.v-if vs v-show.md","v-if vs v-show"],["01.基础/35.列表渲染之数组、对象更新检测.md","列表渲染之数组、对象更新检测"]]},{"title":"组件","collapsable":false,"children":[["02.组件/36.使用组件的细节点.md","使用组件的细节点"],["02.组件/40.父组件给子组件传值.md","父组件给子组件传值"],["02.组件/50.子组件派发事件和值给父组件.md","子组件派发事件和值给父组件"],["02.组件/52.Prop 验证 与 非 Prop 的 Attribute.md","Prop 验证 与 非 Prop 的 Attribute"],["02.组件/55.自定义事件.md","自定义事件"],["02.组件/60.兄弟组件传值.md","兄弟组件传值"],["02.组件/65.非父子组件传值.md","非父子组件传值"],["02.组件/70.父组件调用子组件方法并传入值.md","父组件调用子组件方法并传入值"],["02.组件/75.插槽slot.md","插槽slot"],["02.组件/80.动态组件与 v-once 指令.md","动态组件与 v-once 指令"],["02.组件/90.vue父子组件的生命周期顺序.md","vue父子组件的生命周期顺序"]]},{"title":"过渡&动画","collapsable":false,"children":[["03.过渡&动画/110.transition过渡&动画.md","transition过渡&动画"],["03.过渡&动画/112.使用animate库.md","使用animate库"],["03.过渡&动画/120.transition-group列表过渡.md","transition-group列表过渡"]]},{"title":"可复用性&组合","collapsable":false,"children":[["04.可复用性&组合/01.Mixin混入.md","Mixin混入"]]},{"title":"工具","collapsable":false,"children":[["05.工具/10.Vue CLi v3 创建项目使用记录.md","Vue CLi v3 创建项目使用记录"]]},{"title":"规模化","collapsable":false,"children":[["06.规模化/100.vuex操作相关.md","vuex操作相关"],["06.规模化/140.路由懒加载.md","路由懒加载"]]},{"title":"其他","collapsable":false,"children":[["99.其他/80.Vue中的防抖函数封装和使用.md","Vue中的防抖函数封装和使用"],["99.其他/90.操作本地缓存.md","操作本地缓存"]]}],
|
||||
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<span v-else>最近更新</span>
|
||||
</div>
|
||||
<div class="article-wrapper">
|
||||
<dl v-for="(item, index) in topPublishPosts" :key="item.key">
|
||||
<dl v-for="(item, index) in topPublishPosts" :key="index">
|
||||
<dd>{{'0' + (index + 1)}}</dd>
|
||||
<dt>
|
||||
<a :href="item.path"><div>{{item.title}}</div></a>
|
||||
|
|
@ -100,13 +100,13 @@ export default {
|
|||
display none
|
||||
.article-title
|
||||
border-bottom 1px solid #eaecef
|
||||
font-size 1.1rem
|
||||
font-size 1.3rem
|
||||
font-weight bold
|
||||
padding 0 0 .5rem 1rem
|
||||
.article-wrapper
|
||||
overflow hidden
|
||||
dl
|
||||
border-bottom 1px solid #eaecef
|
||||
border-bottom 1px dotted #eaecef
|
||||
width 50%
|
||||
float left
|
||||
display flex
|
||||
|
|
@ -119,7 +119,7 @@ export default {
|
|||
font-size 1.1rem
|
||||
color #F17229
|
||||
width 50px
|
||||
margin-left 30px
|
||||
margin-left 22px
|
||||
font-weight bold
|
||||
line-height: 55px;
|
||||
@media (max-width: $MQNarrow)
|
||||
|
|
@ -146,6 +146,7 @@ export default {
|
|||
color $accentColor
|
||||
span
|
||||
width 100px
|
||||
margin-right 15px
|
||||
color #999
|
||||
text-align right
|
||||
font-size .9rem
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
---
|
||||
title: Vue中的防抖函数封装和使用
|
||||
date: 2020-02-04
|
||||
permalink: /pages/fb08e252dfd8fdfd
|
||||
---
|
||||
|
||||
# Vue中的防抖函数封装和使用
|
||||
|
||||
# 防抖函数封装和使用
|
||||
|
||||
如搜索框中，每改变一个数值就请求一次搜索接口，当快速的改变数值时并不需要多次请求接口，这就需要一个节流函数：
|
||||
如搜索框中，每改变一个数值就请求一次搜索接口，当快速的改变数值时并不需要多次请求接口，这就需要一个防抖函数：
|
||||
|
||||
```js
|
||||
// 防抖函数
|
||||
|
|
@ -26,9 +30,8 @@ import { debounce } from '@/common/js/util'
|
|||
|
||||
created() {
|
||||
/**
|
||||
* 监控query变化派发事件给父组件
|
||||
* 为什么不直接在watch里面写？？？
|
||||
* 因为要做节流处理，防止在快速输入时多次请求接口
|
||||
* 因为要做防抖处理，防止在快速输入时多次请求接口
|
||||
*/
|
||||
this.$watch('query', debounce((newQuery) => {
|
||||
this.$emit('query', newQuery)
|
||||
Loading…
Reference in New Issue