Skip to content

@ckpack/v-ui 声明组件的 UICSS 分离, 组件的样式基于Vue 的 provide/inject 特性,所以你需要通过 create 函数(全局)或 config-provider 组件(局部)按需注入组件所需的 CSS

默认注入全部 themes

js
import VUI from '@ckpack/v-ui';

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

create 函数注入 themes

js
import { create, themes } from '@ckpack/v-ui';

// 或按需注入themes
// import { baseInjectionKey, baseTheme, buttonInjectionKey, buttonTheme, create } from '@ckpack/v-ui';
// const themes = {
//   [baseInjectionKey]: baseTheme,
//   [buttonInjectionKey]: buttonTheme,
// };

const app = createApp(App);
app.use(create({
  themes,
}));
app.mount('#app');

config-provider 组件注入 themes

vue
<script setup lang="ts">
import { themes } from '@ckpack/v-ui';

// 或按需注入themes
// import { baseInjectionKey, baseTheme, buttonInjectionKey, buttonTheme /**  */ } from '@ckpack/v-ui';

// const themes = {
//   [baseInjectionKey]: baseTheme,
//   [buttonInjectionKey]: buttonTheme,
// };
</script>

<template>
  <v-config-provider
    :themes="themes"
  >
    <v-button theme="primary">
      Button
    </v-button>
  </v-config-provider>
</template>

根据 ISC 许可证发布.