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')

基础组件

Icon Icon图标

Popup 弹出层组件

Picker 选择器组件

Toast 弱提示组件

Dialog 弹出框组件

DateTimePicker 时间选择器组件

ChartRadar 雷达图组件

ActionSheet 动作面板组件

Swipe 轮播组件

SwipeCell 滑动单元格组件

NumberKeyboard 数字键盘组件

PasswordInput 密码输入框组件

Collapse 折叠面板组件

Switch 开关组件

Radio 单选组件

Stepper 步进器组件

Checkbox 复选框组件

NoticeBar 通知栏组件

Tab 标签页组件

Tabbar 标签栏组件

IndexBar 索引栏组件

Lazy 懒加载组件

Circle 环形进度条

Skeleton 骨架屏