1.0.1 • Published 1 year ago
@hcl-org/vue-quarter-picker v1.0.1
vue-quarter-picker
介绍
一款基于Vue2.0+Ant Design的季度选择组件。
npm install @hcl-org/vue-quarter-picker --saveAPI
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| infinite-scroll-throttle-delay | 滚动延迟 | number | 200 | |
| infinite-scroll-disabled | 是否禁止 | boolean | false | |
| infinite-scroll-distance | 滚动条距离底部的距离 | number | 0 | |
| infinite-scroll-immediate-check | 是否立即触发滚动 | boolean | true | |
| infinite-scroll-watch-disabled | 与infinite-scroll-disabled绑定的对应值 | string | null |
指令
| 指令名称 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| v-infinite-scroll | 指令，执行滚动触发的事件 | () => void | - |
使用示例
注册指令
import infiniteScroll from 'vue3-infinite-scroll-better'
app.use(infiniteScroll).mount('#app')在组件中使用
<div
class="list-lis"
v-infinite-scroll="handleInfiniteOnLoad"
:infinite-scroll-immediate-check="false"
:infinite-scroll-disabled="scrollDisabled"
infinite-scroll-watch-disabled="scrollDisabled"
:infinite-scroll-distance="20">
<ul>
<li v-for="(item, index) in renderDataList" :key="index">
<a
:href="item.url"
target="_blank"
rel="noopener"
>{{index + 1}}、{{item.name}}</a
>
</li>
<div v-if="scrollDisabled">数据加载完毕</div>
</ul>
</div>setup(props, context) {
const renderDataList = [] // 数据列表
const listCount = 50
const handleInfiniteOnLoad = () => {
// 异步加载数据等逻辑
if (scrollDisabled) {
// 数据加载完毕
} else {
// 加载数据列表
}
}
const scrollDisabled = computed(() => renderDataList.length >= listCount)
return {
scrollDisabled,
renderDataList,
handleInfiniteOnLoad
}
}