carlstory-ui
A Vue UI component library
Install
npm i carlstory-ui --save
Quick Start
import {createApp} from 'vue'
import App from './App.vue'
import CarlstoryUI from "carlstory-ui"
import "carlstory-ui/lib/style.css";//引入样式
const app = createApp(App)
// app.use(CarlstoryUI);
app.use(CarlstoryUI,{fontSize:40,color:"#00adff"}); //全局注册
app.mount('#app');
Component List
CSTable
表格组件
属性
| prop |
description |
type |
default |
example |
| tableTitle |
表头 |
Array |
none |
["序号","管辖片区","中文船名"] |
| tableTitle.name |
名称 |
String |
none |
|
| tableTitle.prop |
属性 |
String |
none |
|
| tableTitle.sortable |
是否可排序 |
Boolean |
false |
|
| tableTitle.parentName |
父名称 |
String |
none |
|
| tableTitle.summary |
是否计算合计 |
Boolean |
false |
|
| tableData |
数据 |
Array |
none |
[{index:1,jurisdiction:"斗尾港区",shipsName:"猎豹",},{index:2,jurisdiction:"斗尾港区",shipsName:"猎豹"}] |
| showSummary |
是否显示合计(和tableTitle.summary搭配使用) |
Boolean |
false |
|
| gap |
列宽 |
Array |
[1,1,1,1,1] |
[0.5, 1, 1, 1, 1] |
| height |
高度 |
Number |
300 |
100 |
| row-th-class |
row的class |
String |
carlstory-th-row |
none |
| row-class |
row的class |
String |
carlstory-row |
none |
| operations |
操作列 |
Array |
[] |
[{text:"新增",style:{padding:"0 5px"},callback:()=>{}},{text:"查看",style:{padding:"0 5px"},callback:fun}] |
事件
| method |
description |
params |
return |
| rowClick |
row点击触发 |
item, isCancel(是否重复点击), selectedItemIndex |
- |
CScharts
图表组件
属性
| prop |
description |
type |
default |
example |
| options |
图表设置 |
Object |
- |
同echarts |
| scroll-options |
滚动设置(搭配dataZoom使用) |
Object |
null |
{ x: true, y: false, num:12,timer: 1000 } |
事件
| method |
description |
params |
return |
| chartClick |
点击图表触发 |
- |
- |
| dispatchAction |
触发图表行为 |
{"type":"highlight","seriesIndex":0,"dataIndex":2} |
- |
| resizeHandler |
尺寸改变，手动触发 |
- |
- |
CSCarousel
走马灯组件
属性
| prop |
description |
type |
default |
example |
| visionCount |
展示在视野上carouselItem的数量 |
Number |
1 |
1 |
| intervalTime |
切换时间间隔 |
Number |
4000 |
2000 |
| transitionSpeed |
移动速度，数字越大，移动速度越快 |
Number |
60 |
30 |
| gap |
轮播里面内容的间隔距离 |
Number |
16 |
16 |
| count |
轮播的内容数量 |
Number |
6 |
6 |
| carouselItemHeight |
carouselItem的高度 |
Number |
150 |
300 |
| openAutoPlay |
是否开启自动播放 |
Boolean |
true |
true |
| openDot |
是否开启dots |
Boolean |
true |
false |
| openArrow |
是否开启arrow |
Boolean |
true |
false |
CSCarouselItem
配合CSCarousel使用，用来展示内容
CSIcon
图标组件
属性
| prop |
description |
type |
default |
example |
| icon |
展示图标allicon |
String |
- |
refresh-left |
| size |
图标大小 |
Number |
16 |
20 |
| color |
图标颜色 |
String |
#333 |
- |
| rotate |
是否旋转 |
Boolean |
false |
true |
CSTime
时间组件
属性
| prop |
description |
type |
default |
example |
| format |
时间格式 |
String |
- |
- |
| className |
className |
String |
- |
- |
事件
| method |
description |
params |
return |
| getTime |
获取时间 |
- |
- |
| setTime |
设置时间 |
time |
- |
CSWeather
天气组件
属性
| prop |
description |
type |
default |
example |
| option |
天气配置项 |
Object |
- |
{"type":"高德","params":{"city":"500000","key":"your api key"}} |
| option.type |
API类型 |
String |
高德 |
高德 / 心知天气 |
| option.params |
API参数 |
Object |
{"city":"500000","key":"your api key"} |
|
| showIcon |
是否显示天气图标 |
Boolean |
true |
false |
| showTemper |
是否显示温度 |
Boolean |
true |
false |
| className |
className |
String |
- |
- |
事件
| method |
description |
params |
return |