repository·master·Indexed 18 days ago
https://github.com/wocwin/t-ui-plusA Vue 3 component library built on TypeScript and Element-Plus, providing enhanced, pre-configured components for administrative backends and complex management interfaces. Features include the TAdaptivePage layout component, TSelectTable with virtual scrolling, TButton with built-in debounce, and a TChart wrapper for Echarts.
TCheckbox supports several visual customizations:
size attribute with values 'large', 'default', or 'small'.type="button" to render checkboxes as buttons.border to true to render checkboxes with a border.slot property within an option object to target a specific named slot.TTabs component inherits all attributes, events, and slots from the underlying el-tabs component. This allows you to use standard Element Plus tab properties for advanced configuration and customization.When isDropDownSelectMore is set to true, additional conditions are hidden behind a dropdown menu. This is useful for complex forms to save space.
Attributes for Dropdown Mode:
| Parameter | Description | Type | Default |
|---|---|---|---|
popoverAttrs | Configuration for el-popover and localized text | object | { showTxt: '更多', title: '所有条件', allTxt: '全选', reverseTxt: '反选', clearTxt: '清空', placement: 'bottom', width: 240, trigger: 'click' } |
moreCheckList | Data source for the dropdown items | Array | - |
moreCheckList item structure:
label: Titlecomp: Component name/objectisSelfCom: If true, uses custom component without el-optionprop: Backend field namebind: Component attributes (can be a function receiving form)slotName: Custom input slotspan: Column span (1-4)type: Element type (radio, checkbox, select-arr, select-obj)list: Data source for el-selectTForm provides two ways to render custom labels:
labelRender (TSX/Function): Provide a function to the labelRender property in the field configuration. If labelRender is present, it takes precedence over the label property.labelSlotName (Slot): Use the labelSlotName property in the field configuration to specify a slot name, then provide the content via that slot in your template.Enable multiple selection by setting the multiple prop to true.
Key features:
selectable prop (a function (row: any, index: number) => boolean) to determine if a checkbox can be checked.multipleFixed (default true) keeps the checkbox column fixed.@selectionChange to receive the selected items and the collection of their keywords.value identifiers.multipleDisableDelete to true to hide the delete icon on selected tags. This is useful when switching pages or performing queries where previously selected data might not exist in the current view.state.defaultValue to show labels, but you must call the exposed selectTable.toggleRowSelection method to actually check the rows.By default, TSelectTable operates in single selection mode.
Common configurations:
isRadioDisabled property (if applied to the table data) to prevent selection of certain rows.isKeyup to true to enable up/down arrow selection and Enter to confirm. Note: max-height must be set for scrolling to work correctly.isShowFirstColumn to false to hide the radio button column.rowClickRadio (default true) allows selecting a row by clicking anywhere on it.radioSameIsCancel (default true) allows clicking the same item again to deselect it.When enabling the 'simple' (简洁风格) mode, certain layout properties will be ignored. Specifically, the following props will become ineffective:
align-centerdescriptiondirectionspaceTo use T-ui-Plus globally in your Vue application, you must first ensure that element-plus is globally registered, as T-ui-Plus depends on it. Import the T-ui-Plus CSS and the library itself, then use app.use(TuiPlus) in your main entry file.
When configuring locales, you can merge the element-plus locale with the @wocwin/t-ui-plus/locale locale to ensure both libraries are localized correctly.
// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import "element-plus/theme-chalk/dark/css-vars.css"
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import plusZhCn from '@wocwin/t-ui-plus/locale/zh-cn'
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import TuiPlus from "@wocwin/t-ui-plus"
import "@wocwin/t-ui-plus/index.css"
const app = createApp(App)
// Register Element Plus icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// Register ElementPlus with merged locales
app.use(ElementPlus, {
locale: { ...zhCn, ...plusZhCn }
})
// Register TuiPlus
app.use(TuiPlus)
app.mount("#app")You can include T-ui-Plus directly in your HTML using a CDN provider like unpkg or jsDelivr. This requires vue and element-plus to be loaded first.
<!-- unpkg example -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/element-plus"></script>
<link rel="stylesheet" href="//unpkg.com/@wocwin/t-ui-plus/index.css" />
<script src="//unpkg.com/@wocwin/t-ui-plus"></script>
</head>The TStepWizard component is a data-driven wrapper around Element-plus el-steps and el-step. It simplifies step management by allowing you to define steps via a stepData array rather than writing repetitive HTML. You can use named slots (e.g., #first, #second) to define the content of each step.
Key features include:
btnArr) with custom titles, parameters, and event handlers.lastBtnArr).<t-step-wizard
:stepData="stepData"
:active="active"
:successTitle="successTitle"
@complete="complete"
>
<template #first>第一步骤</template>
<!-- Additional step slots as needed -->
</t-step-wizard>