circles-ui
v1.0.10
Published
This is a UI components for Vue 2.x.
Downloads
12
Readme
circles-ui
仿Vant-ui移动端Vue UI组件库(circle star miss)。文档地址
快速上手
安装
在Vue项目根目录下
npm i circles-ui --save-dev全局引入
在main.js里新增以下代码
import csUI from 'circles-ui'
import 'circles-ui/packages/theme-default/lib/index.min.css'
Vue.use(csUI)按需引入
- 首先，安装 babel-plugin-component：
cnpm i babel-plugin-component --save-dev- 更改根目录的.babelrc文件为下面的代码
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime", ["component", {
"libraryName": "circles-ui",
"styleLibrary": {
"name": "theme",
"base": false
}
}]]
}- 在需要引入的Vue页面新增以下代码
import { csPicker } from 'circles-ui'
import Vue from 'vue'
Vue.use(csPicker)文档
主题色
2020.09.07新增主题色，使用css variable实现，请注意兼容性。要使用主题色只需在注册csUI时修改为Vue.use(csUI, themeName)，目前支持的主题色有
| 主色(默认) | 成功 | 警告 | 危险 | 详情 | |--|--|--|--|--| | Primary | Success | Warning | Danger | Info | | #1989fa | #69c23a | #E6A23C | #FF2C7D | #909399 |
代码示例:
Vue.use(csUI, 'Warning')