@nhdropshipping/y-components

@nhdropshipping/y-components

Vue 3 组件库，包含常用的 UI 组件。

安装

npm install @nhdropshipping/y-components
# 或
yarn add @nhdropshipping/y-components
# 或
pnpm add @nhdropshipping/y-components

使用

⚠️ 重要提示

使用组件库前，必须先引入样式文件！

import '@nhdropshipping/y-components/dist/style.css'

全量引入

import { createApp } from 'vue'
import YComponents from '@nhdropshipping/y-components'
import '@nhdropshipping/y-components/dist/style.css' // ⚠️ 必须引入样式文件

const app = createApp(App)
app.use(YComponents)

按需引入

<template>
  <YButton variant="primary" size="medium">点击我</YButton>
  <YInput v-model="inputValue" placeholder="请输入" />
</template>

<script setup lang="ts">
import { YButton, YInput } from '@nhdropshipping/y-components'
import '@nhdropshipping/y-components/dist/style.css' // ⚠️ 必须引入样式文件
import { ref } from 'vue'

const inputValue = ref('')
</script>

使用 YMessage

YMessage 支持两种使用方式：

方式一：直接导入使用

import { YMessage } from '@nhdropshipping/y-components'

// 成功提示
YMessage.success('操作成功')

// 警告提示
YMessage.warning('请注意')

// 错误提示
YMessage.error('操作失败')

方式二：全局使用（无需 import）

使用 Vue.use() 后，YMessage 会自动挂载到全局，可以直接使用：

// main.ts
import { createApp } from 'vue'
import YComponents from '@nhdropshipping/y-components'
import '@nhdropshipping/y-components/dist/style.css' // ⚠️ 必须引入样式文件

const app = createApp(App)
app.use(YComponents) // 挂载后，YMessage 自动可用

// 在任何组件或文件中直接使用（无需 import）
YMessage.success('操作成功！')
YMessage.warning('请注意')
YMessage.error('操作失败')

<template>
  <button @click="handleClick">点击我</button>
</template>

<script setup lang="ts">
// 无需 import YMessage，直接使用
function handleClick() {
  YMessage.success('操作成功！')
}
</script>

带选项的调用：

YMessage.success('操作成功', {
  duration: 3000, // 3秒后自动关闭
  closable: true  // 显示关闭按钮
})

组件列表

• YButton - 按钮组件
• YInput - 输入框组件
• YSelect - 选择器组件
• YTable - 表格组件
• YPagination - 分页组件
• YBadge - 徽章组件
• YDialog - 对话框组件
• YDrawer - 抽屉组件
• YPopover - 弹出框组件
• YSwitch - 开关组件
• YImage - 图片组件
• YDropdown - 下拉菜单组件
• YTree - 树形组件
• YTime - 时间选择器组件
• QueryEncapsulation - 查询封装组件
• YMessage - 消息提示（函数式调用）

开发

# 安装依赖
npm install

# 构建
npm run build

# 开发模式（监听模式）
npm run dev

发布

# 构建后发布
npm run build
npm publish

License

MIT