Base6-UI

文档

$3

- AppProvider
- BaseDataTable
- BaseDialog
- BaseInputNumber
- BaseLayout
- Aside
- BaseProgress
- BaseRadio
- BaseSelect
- BaseSlider
- BaseSwitch

$3

1. Base6UI基于naive-ui开发，使用参照naive-ui组件库提供props及用法
3. 项目根目录引入以下代(码组件库按需引入)：

``js
/**
* 注册全局函数
* 渲染base6风格 comfirmTip和message
*
*/
import { registerGlobalMethods } from 'base6-ui'
import 'base6-ui/index.css'
`
4. AppProvider组件注册$loadingBar、$dialog、$message、$notification方案，具体使用
`html





`
5. 组件库提供亮色/暗色两种主题覆盖配置（darkThemeOverrides, lightThemeOverrides）代码参照如下主题配置：
`js
import { darkThemeOverrides, lightThemeOverrides, AppProvider } from 'base6-ui'
import useWatermarkHook from '@/hooks/useWatermark'
import { useThemeStore } from '@/store/modules/theme'
import { useLayoutStore } from '@/store/modules/layout'
import { storeToRefs } from 'pinia'
import { computed, watch } from 'vue'
import { darkTheme, type GlobalThemeOverrides } from 'naive-ui'
import { getNaiveTheme } from '@/utils/layout'

const { watermarkOptions } = useWatermarkHook()

const { isUseWatermark, isDarkMode } = storeToRefs(useThemeStore())
const { layoutConfig } = storeToRefs(useLayoutStore())

const appTheme = computed(() => isDarkMode.value ? darkTheme : undefined)

let naiveTheme: GlobalThemeOverrides = {
...getNaiveTheme({ primary: layoutConfig.value.themeColor }),
...lightThemeOverrides
}

const { themeColor } = layoutConfig.value
watch(
() => isDarkMode.value,
(curVal) => {
if (curVal) {
naiveTheme = {
...getNaiveTheme({ primary: layoutConfig.value.themeColor }),
...darkThemeOverrides
}
} else {
naiveTheme = {
...getNaiveTheme({ primary: layoutConfig.value.themeColor }),
...lightThemeOverrides
}
}
},
{
immediate: true
}
)
``