可选配置项

Less的全局变量

全局变量配置

在 vite.config.js 中配置以下代码，可在全局引入@techui/lessmixin 和 @techui/colors

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData:`
          @import "${path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')}";
          @import "${path.resolve(__dirname, './node_modules/@techui/colors/base.less')}";
          @import "${path.resolve(__dirname, './node_modules/@techui/colors/extended.less')}";
          `
      }
    }
  },
})

全局变量的使用

在vite.config.js配置Less公共变量后，即可在任意的vue组件中，均可直接使用。

• 详细的lessmixin，请查阅此路径下的定义node_modules/@techui/lessmixins/index.less
• 关于颜色表的定义，请查阅此路径下的预览文件node_modules/@techui/colors/preview.html

<style lang="less">
.demo-box{
  .bgc(@bll5);//背景色
  .fc(@bk); //字体颜色
  .bgBlur; //背景模糊
}
</style>

JS中使用颜色表

颜色表组件@techui/colors，可在Less中使用，也可以在JS中使用，当在JS中使用，可以全局导入，也可以在组件中按需导入。

颜色表在JS中使用通常是用于Echarts图表配置，Cesium配置等。也可以直接调用系统主题来完成这类工作，请查阅 主题 章节

全局导入

在main.js中配置以下代码：

import TuiColors from "@techui/colors"
app.use(TuiColors)

按需导入

在任意vue文件中，使用以下代码导入：

import {$c,$chroma} from "@techui/colors"

$chroma，相当于chromajs组件的入口，可以调用所有的chromajs函数，请查阅 chromajs 的相关文档。

组件中使用

无论哪种导入方式，均可以在vue组件中使用颜色表，如下：

const colorBlue=$c.bll5;
const opacityBlue=$c.fade('bll5',0.5);
const colorArr=$c.scale(['bll5','aql5','rel5'],10); //根据3个颜色的区间值，取10个颜色