chenc/cd_form_editor_web: 表单编辑器 @ 760610b57d588bac7cac0d94f573eea4c0f29ff9

定制主题

k-form-design 的样式使用了 Less 作为开发语言，并定义了主色、布局色变量，你可以根据需求进行相应调整

k-form-design样式变量

@primary-color: "#13c2c2"; // 主色
@layout-color: "#ee88aa"; // 布局色
@title-text-color: "#ffffff"; // 标题文字颜色
@header-height: 56px; // 头部高度
@left-right-width: 270px; // 左右栏宽度
@border-color: #ccc; // 边框颜色

首先需要引入less文件才能生效

// 引入less文件后，无需再引入上述的css文件
import 'k-form-design/styles/k-form-design.less'

定制方式

我们使用 modifyVars 的方式来进行覆盖变量。下面将针对不同的场景提供一些常用的定制方式

在 webpack 中定制主题

我们以 webpack@4 为例进行说明，以下是一个 webpack.config.js 的典型例子，对 less-loader 的 options 属性进行相应配置

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
     options: {
       modifyVars: {
         "primary-color": "#13c2c2",
          "layout-color": "#ee88aa"
       },
       javascriptEnabled: true,
     },
    }],
    // ...other rules
  }],
  // ...other config
}

在 vue cli 3 中定制主题

项目根目录下新建文件vue.config.js

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          "primary-color": "#13c2c2",
          "layout-color": "#ee88aa"
        },
        javascriptEnabled: true
      }
    }
  }
}

ant-design-vue主题自定义

首先需要安装ant-design-vue

yarn add ant-design-vue

引入组件样式

// 需要在k-form-design样式后引入，覆盖默认的样式
import 'ant-design-vue/dist/antd.less'

?> 参考ant-design-vue 定制主题

customize-theme.md 2.1 KB History Raw