Baucd-ui NPM | npm.io

Baucd-UI

简介

一个支持拟态风格的 Vue UI 组件

使用

安装

npm i baucd-ui

全局注册

import UI from 'baucd-ui'
Vue.use(UI)

按需导入

import BaucdUI, { Button, Form } from 'baucd-ui'
Vue.use(BaucdUI, {
  components: [Button, Form]
})

导入样式

import 'baucd-ui/dist/baucd-ui.css'

导入 font-awesome 字体图标

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import {
  faEnvelope,
  faStar,
  faEdit,
  faTrashAlt,
  faSmile,
  faTimesCircle,
  faEye
} from '@fortawesome/free-regular-svg-icons'

import { faCheck } from '@fortawesome/free-solid-svg-icons'

组件

Button

属性	值	描述
type	String	按钮类型：primary,info,success,warning,danger
plain	Boolean	是否为朴素按钮，默认为 false
mimicry	Boolean	是否为拟态按钮，和 plain 不能同时设置，会被 plain 覆盖。默认为 false
disabled	Boolean	是否禁用按钮，默认为 false
round	Boolean	是否为圆角按钮，默认为 false
circle	Boolean	是否为圆形按钮，默认为 false
icon	Array 或 Boolean	font-awesome 字体数组，默认为 false

事件	值	描述
click	Function	点击事件

Dialog

属性	值	描述
title	String	对话框头部提示，默认为"提示"
visiable	Boolean	对话框可见状态，默认为 false
mimicry	Boolean	对话框是否为拟态风格，默认为 false
width	String	对话框宽度，默认为 60%
top	String	对话框距离顶部位置，默认为 15vh

插槽	描述
title	Dialog 标题区的内容
footer	Dialog 按钮操作区的内容

Input

属性	值	描述
placeholder	String	输入框占位文本，默认为空字符串
type	String	表单类型，默认为'text'
value / v-model	String, Number	绑定值，默认为空字符串
mimicry	Boolean	对话框是否为拟态风格，默认为 false
name	String	原生属性，默认为空
disabled	Boolean	是否禁用，默认为 false
clearable	Boolean	是否可清空，默认为 false
showPassword	Boolean	是否显示密码可见，默认为 false

Switch

属性	值	描述
mimicry	Boolean	对话框是否为拟态风格，默认为 false
name	String	switch 对应的 name 属性，默认为空
value / v-model	String	绑定值，默认为空字符串
disabled	Boolean	是否禁用，默认为 false
activeColor	String	激活状态颜色，默认为#dcdfe6
inactiveColor	String	未激化状态颜色，默认为#dcdfe6

事件	值	描述
change	Function	状态修改触发事件，返回修改后的状态

Radio

属性	值	描述
label	String, Number, Boolean	单选框的value值，默认为空字符串
value / v-model	String, Number, Boolean	单选框的绑定值，默认为空字符串
mimicry	Boolean	对话框是否为拟态风格，默认为 false
name	String	表单命名，默认为空
color	String	单选框选择时的颜色，默认为#409eff

RadioGroup

用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

Checkbox

属性	值	描述
label	String, Number, Boolean	单选框 label 值，默认为空字符串
value	String	表单值，默认为空字符串
mimicry	Boolean	对话框是否为拟态风格，默认为 false
name	String	表单命名，默认为空
color	String	单选框选择时的颜色，默认为#409eff