[toc]

基于vue3的常用组件和工具库

如何使用

安装依赖库

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')

文档

HPaging 分页

介绍

用于分页查询显示列表内容，包含下拉刷新和上拉加载

代码演示

<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>

Props

| 参数 | 说明 | 类型 | 默认值 | | :---------------: | :------------------: | :-----: | :----: | | defaultPageSize | 每次请求数据条数 | number | 10 | | defaultPageNumber | 开始页码 | number | 0 | | enableLoadMore | 是否开启上拉加载更多 | boolean | true | | enableRefresh | 是否开启下拉刷新 | boolean | true |

API

| 方法名 | 描述 | 参数 | 返回值 | | :------: | :----------: | :---------: | :----: | | complete | 填充数据 | datas:any[] | void | | reload | 重新加载数据 | - | void |

Events

| 事件名 | 说明 | 回调参数 | | :----: | :------: | :--------------------------------: | | query | 请求数据 | pageNumber:number ,pageSize:number |

Slots

| 名称 | 说明 | 参数 | | :-----: | :----------: | :--: | | default | 列表数据内容 | - | | top | 固定顶部区域 | - | | bottom | 固定底部区域 | - |

TODO

• 聊天组件