快速开始

安装

npm install @star-dream051118/drawings-ui

需要 Vue ^3.4（peerDependency）。

全量注册（插件方式）

import { createApp } from 'vue'
import App from './App.vue'
import DrawingsUI from '@star-dream051118/drawings-ui'
import '@star-dream051118/drawings-ui/style.css'

createApp(App).use(DrawingsUI).mount('#app')

导入一次，全局可用 —— .use(DrawingsUI) 后所有组件已全局注册，模板里直接写 <DwButton> 即可，无需再单独 import。

按需引入

<script setup lang="ts">
import { DwButton } from '@star-dream051118/drawings-ui'
import '@star-dream051118/drawings-ui/style.css'
</script>

<template>
  <DwButton type="primary">提交</DwButton>
</template>

TIP

样式文件 style.css 必须引入一次，包含所有组件的样式。

字体

组件库使用 Minecraft 像素字体，如需使用请额外引入：

import '@star-dream051118/drawings-ui/fonts.css'

不引入则使用系统默认字体。

组件命名

所有组件统一使用 Dw 前缀，避免与项目中已有组件重名：

组件	标签名
Button	<DwButton>

音效

按钮按下时自动播放音效，全局关闭：

import { useSound } from '@star-dream051118/drawings-ui'

const { setEnabled } = useSound()
setEnabled(false) // 关闭所有按钮音效

单个按钮关闭：

<DwButton :sound="false">无音效</DwButton>

自定义主题

组件库使用 CSS 自定义属性实现主题，覆盖变量即可换肤：

:root {
  --dw-color-bg: #6F6F6F;
  --dw-color-text: #FFFFFF;
  --dw-color-border: #000000;
}

详见 设计 Token。