组件库UI 主要文件 examples 用于测试组件 packages 存放组件 vue.config.js 配置文件
若需要修改样式 ,可通过加上/deep/来提高优先级
<cai-button type='primary' size='small' @click='handleClick'></cai-button>
type: (可选)primary | success | error
size:small | large
disabled 禁用(可选) (默认false)
shape 形状(可选) round | circle(circle建议与icon一起使用)
plain 朴素纯文字按钮 可选 (默认false)同样具有 type: primary | success | error 但size shape均失效
@click 处理点击事件
<cai-icon name='xxx'></cai-icon>
name 图标名称
<cai-link>xxxx</cai-link>
href: 跳转链接 String
type: (可选)primary | success | danger
underline 是否显示下划线
<cai-alert name='success-fill' title='带图标成功提示文案' type='success' @handleClose='handleClose'></cai-alert>
title: 提示文案 String
type: (可选)success | warning | error
name: 左边图标名称 String
@handleClose 处理关闭提示的回调
通过全局方法调用组件
调用方式:
this.$message({
content:'消息提示······',
icon:'cai-icon-success-fill',
type:'success'
})
##属性均可选##
content 提示内容
icon 右边图标名称
type success | warning | error
<cai-radio :options="testArray" :selectOption="testselect" @radioChange="setRadioValue"></cai-radio>
!!该组件目前需要选项对象中还有name和value属性
options: 选项数组
selectOption: 当前所选 (需与选项的value属性对应才有效)
@radioChange: 改变当前所选时的回调(接收一个参数 - 当前所选的value值)
<cai-divider>XXXX</cai-divider>
direction: (可选值)vertical 垂直分割线 其他值(或不传)均为水平分割线
content-position: left | right | center 文本内容位置
<cai-drawer title='Hello,Drawer' content='Hello' width='400' :visible.sync='visibleDrawer'>
title 标题 String
content 内容 String
width 宽度 String
visible 控制显示 Boolean
@handleClose 弹窗关闭回调
调用方式
//显示
this.$caiLoading.show({
text:'...', #(可选)
el:this.$refs.xxx #(必选)需要建立一个元素来存放caiLoading组件
})
// 隐藏
this.$caiLoading.hide()
以库模式打包
vue-cli-service build --target lib --name lib
demo:vue-cli-service build --target lib --name chicagoUI --dest lib packages/index.js
target 默认的构建应用,lib模式
# 在lib下创建package.json
{
"name": "xxx-ui",
"version": "0.1.0",
"main": "xxx.umd.js" // xxx根据实际目录下的
}
然后执行npm publish(在lib下执行cmd),可能需要先登录npm