@nhdropshipping/y-components 1.0.0 → 1.0.2

package/README.md

@@ -14,12 +14,20 @@ pnpm add @nhdropshipping/y-components
 
 ## 使用
 
+### ⚠️ 重要提示
+
+**使用组件库前，必须先引入样式文件！**
+
+```typescript
+import '@nhdropshipping/y-components/dist/style.css'
+```
+
 ### 全量引入
 
 ```typescript
 import { createApp } from 'vue'
 import YComponents from '@nhdropshipping/y-components'
-import '@nhdropshipping/y-components/dist/style.css' // 如果有样式文件
+import '@nhdropshipping/y-components/dist/style.css' // ⚠️ 必须引入样式文件
 
 const app = createApp(App)
 app.use(YComponents)
@@ -35,6 +43,7 @@ app.use(YComponents)
 
 <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('')
@@ -43,6 +52,9 @@ const inputValue = ref('')
 
 ### 使用 YMessage
 
+YMessage 支持两种使用方式：
+
+**方式一：直接导入使用**
 ```typescript
 import { YMessage } from '@nhdropshipping/y-components'
 
@@ -56,6 +68,46 @@ YMessage.warning('请注意')
 YMessage.error('操作失败')
 ```
 
+**方式二：全局使用（无需 import）**
+
+使用 `Vue.use()` 后，`YMessage` 会自动挂载到全局，可以直接使用：
+
+```typescript
+// 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('操作失败')
+```
+
+```vue
+<template>
+  <button @click="handleClick">点击我</button>
+</template>
+
+<script setup lang="ts">
+// 无需 import YMessage，直接使用
+function handleClick() {
+  YMessage.success('操作成功！')
+}
+</script>
+```
+
+**带选项的调用：**
+```typescript
+YMessage.success('操作成功', {
+  duration: 3000, // 3秒后自动关闭
+  closable: true  // 显示关闭按钮
+})
+```
+
 ## 组件列表
 
 - **YButton** - 按钮组件