} else {
options.params = Object.assign({}, options.params, params)
}
this.$axios.request(options).then((res) => {
const data = res.result
this.times += 1
this.loading = false
this.count = data.pageCount
this.$emit('success', data.list)
this.$emit('complete')
}).catch((e) => {
this.loading = false
this.$emit('error', e)
this.$emit('complete')
})
},
/**
* 重置加载相关变量
*/
reset() {
this.count = 0
this.times = 0
this.started = false
this.loading = false
},
/**
*重新开始加载
*/
restart() {
this.reset()
this.load()
},
},
}
</script>
———————-我是分割线——————–
2017-09-18 组件优化
我们在写组件时候，通常会大致先分为两种，业务组件和通用组件，业务组件通和业务逻辑相关，一般作为一个业务模块的局部组件， 比如列表中的列表项组件；通用组件适用面广，不会和业务有牵扯，比如弹出框组件。
所以我们开始封装一个组件的时候，就要划分业务逻辑，做什么，不做什么，从外部接收什么，向外部提供什么，这个边界应该非常清楚
但是之前的封装的loadmore组件不太符合这一点，可能是项目一开始比较关注功能的实现，将其当成的一个业务组件撰写，现在有一点需要优化：
之前我们传入了各种请求相关的参数，包括url在组件内部完成加载和页码控制等一系列操作，显然这不太符合组件功能职责单一化的原则， 其实组件内部并不关心加载到第几页或者是需要请求什么后端接口，而只要父组件告诉自己是否还可以加载就可以了， 至于加载请求列表，子组件通知父组件去加载就OK。
最终我们得到一个和业务完全分离的通用组件，代码如下：
<template>
<div class="loadmore" ref="loadmore">
<div class="loadmore__body">
<slot></slot>
</div>
<div class="loadmore__footer">
<span v-if="loading">
<i class="tc-loading"></i>
<span>正在加载</span>
</span>
<span v-else-if="loading">正在加载...</span>
<span v-else>没有更多了</span>
</div>
</div>
</template><script>
export default {
props: {
/**
* 是否加载
*/
loading: {
type: Boolean,
default: false,
},
/**
* 滚动外部容器, 选择器字符串
*/
container: {
default: () => (global),
},
/**
* 距离底部多远加载
*/
distance: {
type: Number,
default: 200,
},
},
