[toc]
npm i hh-vue-base
编辑main.ts/main.js文件,使用如下:
import { createApp } from 'vue'
import './style.css'
import 'hh-vue-base/dist/styles.css'
import App from './App.vue'
import hhBaseVue from 'hh-vue-base'
const app = createApp(App)
app.use(hhBaseVue)
app.mount('#app')
用于分页查询显示列表内容,包含下拉刷新和上拉加载
<template>
<HPaging ref="paging" @query="query" v-model="chatList" :defaultPageSize="30" :enableRefresh="true">
<div v-for="(item, index) in datas" :key="index">
{{ item }}
</div>
</HPaging>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { HpagingInstance } from "./index";
const datas = ref<Array<string>>([])
const paging = ref<HpagingInstance | null>(null)
function query(pageNumber: number, pageSize: number) {
let datas = new Array<string>()
for (let i = 0; i < num; i++) {
datas.push(`第${i}条数据`)
}
paging.value?.complete(datas)
}
</script>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
defaultPageSize | 每次请求数据条数 | number | 10 |
defaultPageNumber | 开始页码 | number | 0 |
enableLoadMore | 是否开启上拉加载更多 | boolean | true |
enableRefresh | 是否开启下拉刷新 | boolean | true |
方法名 | 描述 | 参数 | 返回值 |
---|---|---|---|
complete | 填充数据 | datas:any[] | void |
reload | 重新加载数据 | - | void |
事件名 | 说明 | 回调参数 |
---|---|---|
query | 请求数据 | pageNumber:number ,pageSize:number |
名称 | 说明 | 参数 |
---|---|---|
default | 列表数据内容 | - |
top | 固定顶部区域 | - |
bottom | 固定底部区域 | - |
-
聊天组件