Cgql-ui NPM | npm.io

cgql-ui

基于vue3搭建的组件库

安装

npm install cgql - ui

引入

import {createApp} from 'vue'
import App from './App.vue'

import cUi from 'cgql-ui'
import 'cgql-ui/dist/style.css'

createApp(App)
.use(cUi)
.mount('#app')

可直接使用

按需引入组件和样式

需要安装cgql-ui-on-demand-package, 此插件目前只支持vite

import onDemandPackage from "cgql-ui-on-demand-package"
import {cgComponents} from "cgql-ui"

export default defineConfig({
	plugins: [vue(), onDemandPackage(cgComponents())]
})

内置的字体文件需要在入口文件中手动引入

import "cgql-ui/dist/components/index/index.css"

组件使用说明

VuePlayerController
播放器控件组件

props

attr	type	description
dataSource	Array	音乐资源，每个对象必须要有src属性
audioCtx	HTMLAudioElement	指定的audio对象（dom）
timeLineWidth	Number	slider时间轴长度
sKey	String	指定的rowKey
showTotal	Boolean	是否显示音乐总时间文本
showOperate	Boolean	是否显示音乐控件
blockColor	CSSStyle	滑块颜色
activeColor	CSSStyle	滑块走过的颜色
backgroundColor	CSSStyle	滑块未走过的颜色
newIcons	Object	自定义控件图标
iconPrefix	String	自定义图标前缀（需要将自定义的字体图标css在main.js中引入）

内置icons

const icons = {
	SEQUENCE: String,
	RANDOM: String,
	SINGLE: String,
	prev: String,
	playStart: String,
	playPause: String,
	next: String,
	other: String
}

events

name	params	description
start	-	音乐开始时的回调
stop	-	音乐停止时的回调

slots

name	slot-scope	action
mode	-	自定义模式按钮
left	-	自定义上一首
play	-	自定义开始/暂停
right	-	自定义下一首
other	-	自定义右侧显示内容

Slider
滑块组件

props

attr	type	description
value	Number	设置当前滑块的偏移量，基于max属性
max	Number	可滑动区域的最大值
width	Number	实际显示大小px
blockColor	CSSStyle	滑块颜色
activeColor	CSSStyle	滑块走过的颜色
backgroundColor	CSSStyle	滑块未走过的颜色

events

name	params	description
change	num	返回基于max的偏移值

cg-icon
字体图标组件

props

attr	type	description
iconPrefix	String	自定义图标前缀
type	string	图标类

cg-Comment
评论区组件

props

attr	type	description
articleData	Object	当前评论的数据
dataKeys	Array	数据所指定的keys：`[头像,昵称,内容,追评的id,追评头像,追评昵称,追评内容]`如果没有某个属性则应该给予一个空值
index	Number	用于组件内部确定当前渲染的是哪一条评论内容，（我们推荐使用列表下标）
children	Array	追评
showMoreReplies	Boolean	是否显示更多追评按钮

events

name	params	description
agree	row	点赞的回调
unAgree	row	不喜欢的回调
share	row	分享按钮的回调
more	row	点击更多的回调
details	row	点击头像的回调
replay	row	点击内容时的回调
moreReplies	row, childrenKeys, setChildrenKeys	点击更多回复的回调，childrenKeys 为第一层所有已显示追评的key，setChildrenKeys 为设置key的方法