Carlstory-ui NPM

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