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

API

Events

Slots

TODO

• 聊天组件