@hh-admin/components

@hh-admin/components

Shared Vue components for Hh Admin templates.

Usage

import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
import '@hh-admin/components/style.css'

app.use(ArcoVue)

You can import individual component entries when you do not want the root entry:

import { HhTable } from '@hh-admin/components/HhTable'
import { HhForm } from '@hh-admin/components/HhForm'

The package marks only CSS and SCSS files as side effects. Named imports from the root entry are expected to tree-shake in Vite/Rollup consumers, and child apps can use subpath imports for an explicit component-level boundary.

import { HhForm } from '@hh-admin/components'
import { HhForm as HhFormEntry } from '@hh-admin/components/HhForm'

HhButton automatically displays loading while an async click handler is pending. Synchronous handlers are unchanged, and automatic loading can be disabled per button.

<HhButton type="add" @click="save">保存</HhButton>
<HhButton type="export" :auto-loading="false" @click="startExport">导出</HhButton>
<HhButton type="search" :throttle="1000" @click="refresh">刷新</HhButton>

throttle uses leading execution without a trailing call. It is disabled when the prop is omitted, 0, or negative.

HhTable supports the same behavior for its refresh action through auto-refresh-loading and refresh-throttle. HhTreePanel keeps only the latest remote result and accepts an optional search-debounce interval.

Table header cells can be styled consistently through header-style and header-class. The configuration remains effective when columns are reordered, hidden, fixed, or rendered again. Header text uses #333 by default and can be overridden through header-style.color.

Columns are centered by default. Set align: 'left' or align: 'right' on an individual column when a different alignment is needed.

Tables use the small size by default. Pass size="mini", size="medium", or size="large" to select another initial size; later prop changes are also applied to the internal table state.

Search-mode HhForm uses an adaptive compact layout when at most three fields are visible. Each field takes six desktop grid columns, the action area fills the remaining columns, and the fold button is hidden. Set auto-search-layout="false" to keep a manually configured layout.

<HhTable
  :columns="columns"
  :data="tableData"
  header-class="member-table-header"
  :header-style="{ backgroundColor: '#f2f3f5' }"
/>

Components

• HhButton
• HhFlex
• HhDot
• HhEditor
• HhTag
• HhCellAvatar
• HhCellGender
• HhCellStatus
• HhCellTags
• HhCodeButton
• HhCodeView
• HhInputSearch
• HhPageLayout
• HhFooter
• HhForm
• HhIconBox
• HhTable
• HhTableSetting
• HhIconSelector
• HhIframe
• HhEditTable
• HhOption
• HhOptionItem
• HhThemeBtn
• HhTrend
• HhUpload