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