jk-comps

Installation

npm i --save jk-comps

// main.js
import jkComps from 'jk-comps'
import 'jk-comps/lib/ele-var.scss' // 覆盖element主题色, 引入此行, 则不需再次引入element样式

Vue.use(jkComps)
jkComps.themeUtil.initTheme()

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "jk-comps/lib/theme.scss";`
      }
    }
  }
}

Usage

主题工具

jkComps会给Vue.prototype绑定一个$themeUtils

// 使用方式
// 初始化主题
$themeUtils.initTheme()

// 切换主题(如果不传参, 则默认切换当前主题)
$themeUtils.setTheme() // dark -> light || light -> dark
$themeUtils.setTheme('dark') // 切换至dark 主题
$themeUtils.setTheme('light') // 切换至light主题

$themeUtils.getTheme() // 获取当前主题 [dark|light]

记忆主题

// 设置`useMemory`为true, 则会把主题存在localStorage中
$themeUtils.initTheme({ useMemory: true })

样式工具

jk-comps 提供了一些scss mixin, 可通过@include方式调用, 可用列表如下

• color 文字颜色
• bgcolor 背景色
• bdcolor 边框颜色
  • bdcolor-top
  • bdcolor-right
  • bdcolor-bottom
  • bdcolor-left
• outline-color outline颜色

使用示例

// 此处设置了div元素的背景色
// 在黑色主题下, 背景色为#ccc
// 在白色主题下, 背景色为#333
div {
  @include bgcolor(#ccc, #333);
  @include bdcolor-top(#ddd, #222);
}

Element 说明

所有.jk-style class的元素及子元素, 都会自动继承此库设置的样式

样式覆盖列表

• [x] Button
• [x] Radio
• [ ] Checkbox
• [ ] Input
• [ ] Select
• [ ] TimePicker
• [ ] DatePicker
• [ ] Transfer
• [x] Table
• [x] Breadcrumb
• [x] Dialog
• [x] Drawer
• ...more

其他

• [x] 滚动条样式(chrome)

button

button有多种颜色类型, 用class区分

• blue
• lightblue
• green
• red
• orange
• gray

使用方式如下

<el-button class="blue">btn</el-button>