tr-vue3ui

Vue 3 组件库，基于原子设计（Atomic Design）模式构建。

安装

npm install tr-vue3ui
# 或
pnpm add tr-vue3ui

快速上手

全局注册（推荐）

import { createApp } from 'vue'
import App from './App.vue'
import TrVue3ui from 'tr-vue3ui'
import 'tr-vue3ui/styles'

const app = createApp(App)
app.use(TrVue3ui)
app.mount('#app')

全局注册后，所有组件均可使用 tr- 前缀直接在模板中使用：

<template>
  <tr-button variant="primary" @click="handleClick">点击</tr-button>
  <tr-input v-model="value" placeholder="请输入" />
  <tr-modal :visible="visible" title="标题" @close="visible = false">
    <p>内容</p>
  </tr-modal>
</template>

按需引入

<script setup lang="ts">
import { TrButton, TrInput, TrModal } from 'tr-vue3ui'
import 'tr-vue3ui/styles'
</script>

<template>
  <TrButton variant="primary">点击</TrButton>
  <TrInput v-model="value" placeholder="请输入" />
</template>

组件

tr-button

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | 'primary' \| 'secondary' \| 'outline' \| 'ghost' | 'primary' | 按钮样式变体 | | size | 'sm' \| 'md' \| 'lg' | 'md' | 按钮尺寸 | | disabled | boolean | false | 禁用状态 | | loading | boolean | false | 加载状态 | | type | 'button' \| 'submit' \| 'reset' | 'button' | HTML type 属性 |

tr-input

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string \| number | - | v-model 绑定值 | | type | 'text' \| 'password' \| 'email' \| 'number' | 'text' | 输入类型 | | size | 'sm' \| 'md' \| 'lg' | 'md' | 输入框尺寸 | | disabled | boolean | false | 禁用状态 | | readonly | boolean | false | 只读状态 | | invalid | boolean | false | 校验失败状态 | | errorMessage | string | - | 错误提示信息 | | placeholder | string | - | 占位文本 |

tr-modal

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | visible | boolean | - | 显示/隐藏 | | title | string | - | 弹窗标题 | | width | string \| number | - | 弹窗宽度 | | maskClosable | boolean | true | 点击遮罩关闭 | | closeOnEsc | boolean | true | 按 Escape 关闭 |

License

MIT