hh-vue-base

[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

• 聊天组件