hh-vue-base
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

[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

  • 聊天组件

Readme

Keywords

Package Sidebar

Install

npm i hh-vue-base

Weekly Downloads

156

Version

0.0.9

License

MIT

Unpacked Size

336 kB

Total Files

8

Last publish

Collaborators

  • hhui056