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的方法 |

cg-document-preview

文档预览器组件

props

| attr | type | description | |-------|--------|--------------------------------------------------| | src | String | 文档的路径 |