clx-components
v1.2.0
Published
添加一个cMessage消息提示组件
Downloads
1,274
Maintainers
Readme
快速开始
介绍
这个组件库使用 的技术栈 是vite+vue3+ts 开发,所以这个只项目支持vue3项目使用
安装
npm
npm i clx-components
yarn
npm i clx-components
说明
xiaobaikeai这是作者的Github
这个组件库是作者封装于Github上一些有趣的组件,二次封装降低了原组件的灵活度,但提供了更方便快捷的使用。如果和需求有出入,可以去原组件去使用。这个组件库的目标是为程序员们提供一个方便快捷的组件库,也是作者学习的经验总结,
本人实力也是不太行,第一次写组件库,肯定有很多BUG,后续会持续修改
现在属于测试阶段,建议不要用在公司项目,本人开发时间有限,在公司摸鱼的时候才能写,肯定有很多问题。
全局注册
import { createApp } from 'vue'
import App from './App.vue'
// 样式 使用组件先再main中导入样式,必须!!!不管是局部导入或者全局导入
import '../node_modules/clx-components/style.css'
//核心代码
import CComponents from 'clx-components'
const app = createApp(App)
//注册
app.use(CComponents)
app.mount('#app')
提示
import CComponents from 'clx-components' //如果导入报错
请在 src目录下面 新建一个 vite-env.d.ts
里面内容是:
declare module 'clx-components'
c-button 组件
局部导入
import { cButton } from 'clx-components'
基本使用
<!-- 大型按钮 -->
<c-Button size="large" type="default">默认</c-Button>
<c-Button size="large" type="success">成功</c-Button>
<c-Button size="large" type="primary" loading>主要</c-Button>
<c-Button size="large" type="warning" loading circle>主要</c-Button>
<c-Button size="large" type="danger" circle>危险</c-Button>
<!-- 默认小型按钮 -->
<c-Button size="small" type="default">默认</c-Button>
<c-Button size="small" type="success">成功</c-Button>
<c-Button size="small" round type="primary" loading>主要</c-Button>
<c-Button size="small" type="warning" loading>主要</c-Button>
<c-Button size="small" type="danger" disabled>危险</c-Button>
<!-- 迷你按钮 -->
<c-Button size="mini" type="default">默认</c-Button>
<c-Button size="mini" type="success">成功</c-Button>
<c-Button size="mini" type="primary" color="orange">主要</c-Button>
<c-Button size="mini" type="warning" loading>主要</c-Button>
<c-Button size="mini" round type="danger">危险</c-Button>
参数
| 名称 | 类型 | 默认值 | 说明 | | -------- | ------- | ------- | :----------------------------------------------------------: | | size | string | small | 可选值为 'large' | 'small' | 'mini' | | type | string | default | 可选值为 'default' |'primary'| 'success' | 'warning' | 'danger' | 'gray' | | style | string | '' | 原生样式 | | color | string | '' | 定义按钮文字颜色 | | round | boolean | false | 是否为圆角按钮 | | circle | boolean | false | 是否为圆形按钮 | | disabled | boolean | false | 是否禁用按钮 | | line | boolean | false | 是否为文字按钮 | | loading | boolean | false | 是否显示加载按钮 |
插槽
| 插槽名 | 说明 | | ----------- | ------------------ | | icon | 自定义图标 | | default | 自定义按钮内容 | | loadingName | 自定义加载文字内容 | | loadingIcon | 自定义加载图标内容 |
c-input组件
局部导入
import { cInput } from 'clx-components'
基础用法
<c-input v-model="test" size="mini" placeholder="默认"></c-input>
<c-input v-model="test" size="small" placeholder="嵌入">
<template #prefix>
<img style="width: 20px;height: 20px;" src="./assets/下雪.png" alt="">
</template>
</c-input>
<c-input v-model="test1" clearable size="large" placeholder="可清空"></c-input>
<c-input v-model="test1" showPassword size="large" placeholder="密码"></c-input>
<c-input v-model="test" maxLength showWordLimit size="large" placeholder="显示"></c-input>
<c-input v-model="test" type="textarea" rows="3" maxLength="10" showWordLimit placeholder="文本域" </c-input>
<c-input v-model="test" type="textarea" resize showWordLimit placeholder="可拖动"></c-input>
参数
| 名称 | 类型 | 默认值 | 说明 | | ------------- | ------- | -------------- | :------------------------------------------------------: | | size | string | small | 可选值为 'large' | 'small' | 'mini' (不支持textarea) | | type | string | default | 原生的类型 可选值为 'text' |'textarea'等... | | placeholder | string | 'Please input' | 原生的placeholder | | color | string | '#606266' | 输入框的字体颜色 | | clearable | boolean | false | 是否可以清空 (不支持textarea)默认false | | showPassword | boolean | false | 是否显示密码 (不支持textarea)默认false | | disabled | boolean | false | 是否禁用 默认false | | width | string | '180px' | 输入框的宽度 | | height | string | '25px' | 输入框的高度 | | maxLength | string | 10 | 限制输入 | | rows | string | 2 | 行数 | | cols | string | 20 | 列数 | | resize | boolean | false | 是否可以拖动(只支持textarea)默认false | | showWordLimit | boolean | false | 是否显示字数限制 默认为 false |
插槽
| 插槽名 | 说明 | | ------ | -------------------------------- | | prefix | 输入框前置图片(不支持textarea) | | suffix | 输入框前置图片(不支持textarea) |
BUG
1. 清空需要点击两次。
2. showWordLimit 输入的内容会被部分。
3.有两个个文本域在同一行 拖动其中一个文本域,另一个文本域的显示限制位数会跟着移动。
c-loading组件
备注
这个组件是封装与Github上 (asvae) 发布的loading组件,
局部导入
import { cLoading } from 'clx-components'
基本使用
<c-loading type="1" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="2" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="3" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="4" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="5" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="6" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="7" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="8" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="9" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="10" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="11" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="12" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="13" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="14" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="15" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="16" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="17" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="18" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="19" animationTime="2000" size="50" color="#409eff"/>
<c-loading type="20" animationTime="2000" size="50" color="#409eff"/>
参数
| 名称 | 类型 | 默认值 | 说明 | | ------------- | ------ | ------- | ----------------- | | type | string | 5 | 不同的loading样式 | | size | number | 60 | loading的大小 | | color | string | #409eff | loading的颜色 | | animationTime | number | 1000 | 动画时间 |
c-dragrank组件
这个组件是是封装 Vue3 DnD库的可拖拽排序组件
局部导入
import { cDragrank } from 'clx-components'
基本使用
<c-dragrank v-model="Lists" @deleteValue="deleteValue" isDelete gap="10px" width="400px" height="400px" />
参数
| 名称 | 类型 | 默认值 | 说明 | | -------------------- | -------------------------- | ------ | ---------------------- | | modelValue /v-model | {id:number,text:string} | [] | 拖拽列表数据 | | style | string | '' | 每个可拖动数据块的样式 | | width | string | 400px | 组件的宽度 | | height | string | 400px | 组件的高度 | | gap | string | 0px | 数据块之间的间距 | | isDelete | boolean | false | 是否显示删除按钮 |
事件
@deleteValue = (item:any) => {} // 删除事件 item 是当前点击的数据。
插槽
delete 删除按钮插槽
<c-dragrank v-model="Lists" @deleteValue="deleteValue" gap="10px" width="400px" height="400px" >
//row是点击的块的数据
<template #delete="{row}">
删除
</template>
</c-dragrank>
c-lialog组件
这是一个弹窗组件 且可以拖拽
局部导入
import { cDialog } from 'clx-components'
基本使用
<c-button type="success" size="large" @click="show = true" >Show</c-button>
<c-dialog v-model="show" height="200px" >
<template #default>
<span>It's a draggable Dialog</span>
</template>
<template #footer>
<div style="display: flex; gap: 10px;position: absolute;right: 10px;">
<c-button type="primary" size="small" @click="show = false">确定</c-button>
<c-button type="default" size="small" @click="show = false">取消</c-button>
</div>
</template>
</c-dialog>
参数
| 名称 | 类型 | 默认值 | 说明 | | -------------------- | ------- | ------- | --------------------- | | modelValue /v-model | boolean | false | 控制显示隐藏 | | style | string | '' | 自定义样式 | | title | string | '标题' | 标题文字 | | width | string | '400px' | 宽度 | | height | string | ’200px' | 高度 | | modal | boolean | true | 是否显示遮罩层 | | closeModal | boolean | true | 是否点击遮罩层关闭 | | closeEscape | boolean | false | 是否按esc关闭 | | openDelay | number | 100 | 默认100ms 打开延迟 | | closeDelay | number | number | 默认100ms 关闭延迟 | | isclose | boolean | true | 是否显示闭按钮 | | isDrag | boolean | true | 是否可以拖拽 默认true |
插槽
| 插槽名 | 说明 | | ------- | ---------------------------------- | | header | 对话框标题的内容;会替换标题部分。 | | default | Dialog 的内容 | | close | 关闭按钮 | | footer | Dialog 按钮操作区的内容 |
事件
| 事件名 | 说明 | Type | | ------ | ----------------- | ----------- | | open | Dialog 打开的回调 | ()=> void | | close | Dialog 关闭的回调 | ()=> void |
c-cropper组件
这个组件是封装于GitHub上 vue-cropper开源的组件
局部导入
import { cCropper } from 'clx-components'
基本使用
<c-cropper v-model="show" :fixedNumber="[1,1]" action="/api/testUpload" @success="success" />
参数
| 参数名 | 类型 | 默认值 | 说明 | | ----------- | --------------- | ---------- | -------------------------------- | | modelValue | boolean | false | 是否显示 | | action | string | '' | 图片上传地址(你自己配置跨域代理) | | background | string | '#fff' | 弹出框的背景色 | | fixedNumber | [number,number] | [1,1] | 裁剪框比例 | | closeModal | boolean | false | 是否可以通过点击遮罩层关闭弹窗 | | title | string | '图片裁剪' | 弹窗标题 | | btnBgColor | string | '#409eff' | 按钮背景色 | | outputType | string | 'png' | 可选值:'png'|'jpeg'|'webp' |
事件
| 事件名 | 类型 | 说明 | | -------- | ----------------- | --------------------------------- | | @success | (data:any)=> void | 上传成功回调 data是成功返回的数据 | | @error | (data:any)=> void | 上传失败回调data是失败的说明 |
插槽
| 插槽名 | 说明 | | ------ | -------- | | close | 关闭按钮 |
c-emoji组件
这个组件是封装于GitHub上 **vue3-emoji-picker**开源的组件
局部导入
import { cEmoji } from 'clx-components'
基本使用
<template>
<div style="display: flex;justify-content: center;align-items: center;height: 100vh;">
<c-button type="success" size="large" @click="show = !show" >Show</c-button>
<c-input v-model="str"></c-input>
<c-emoji v-model="show" @success="success" style="width: 300px;" ></c-emoji>
</div>
</template>">
<script setup lang="ts">
import { ref } from "vue";
const show = ref(true)
let str = ref<string>('')
const success = (res: any) => {
str.value+=res
}
</script>
参数
| 参数名 | 类型 | 默认值 | 说明 | | ---------------- | ------- | -------- | --------------------------- | | modelValue | boolean | false | 是否显示 | | theme | string | 'auto ' | 'light' | 'dark' | 'auto' | | displayRecent | boolean | false | 是否显示最近使用表情 | | disableSkinTones | boolean | true | 是否禁用肤色选择 | | draggable | string | true | 是否可拖动 默认 true | | style | string | '‘ | 表情选择器样式 |
事件
| 事件名 | 类型 | 说明 | | -------- | -------------------- | ---------------- | | @success | (data:string)=> void | data是表情包内容 |
c-scrolling组件
这个组件是封装于GitHub上 **vue-danmaku**开源的组件
局部导入
import { cScrolling } from 'clx-components'
基本使用
<script setup lang="ts">
import { onMounted, ref } from "vue";
const danmus = ref([
{
id:1,
text:"测试弹幕",
img:'src/assets/下雪.png',
time:0
},
{
id:2,
text:"测试弹幕2",
color:"red",
img:'src/assets/下雪.png',
time:0
},
])
const scrolling = ref<any>()
</script>
<template>
<div style="padding-top: 200px; display: flex;flex-direction: column;align-items: center;gap: 10px">
<div style="display: flex;">
<c-button @click="scrolling.danmakuRef.play()">开始</c-button>
<c-button @click="scrolling.danmakuRef.pause()">暂停</c-button>
<c-button @click="scrolling.danmakuRef.stop()">清除</c-button>
<c-button @click="scrolling.danmakuRef.show()">弹幕显示</c-button>
<c-button @click="scrolling.danmakuRef.hide()">弹幕隐藏</c-button>
</div>
<c-scrolling ref="scrolling"
style="width: 1000px;height: 500px;background-color: skyblue;border-radius: 20px;"
:channels="10"
:useSlot="true"
loop v-model="danmus"
isSuspend
:autoplay=false
>
<template #dm="{index,danmu}">
<div>
<img style="width: 20px;height: 20px;border-radius: 50%;" :src="danmu.img" alt="">
<span>{{ danmu.text }}</span>
</div>
</template>
</c-scrolling>
</div>
</template>
参数
| 参数名 | 类型 | 默认值 | 说明 | | ---------------- | ------- | -------- | --------------------------- | | modelValue | Array[string|object] | [] | | | channels | number | 3 | 轨道数量条数 | | autoplay | boolean | true | 是否自动播放 | | useSlot | boolean | false | 是否使用插槽 | | loop | boolean | false | 是否循环播放 | | style | string | 'height:100px;width:300px | 弹幕轨道样式 | | debounce | number | 100 | 弹幕刷新频率(ms) | | speeds | number | 200 | 弹幕速度 | | randomChannel | boolean | false | 是否随机轨道 | | isSuspend | boolean | false | 是否开启弹幕悬浮暂停 | | top | number | 4 | 弹幕轨道顶部距离 | | right | number | 0 | 弹幕轨道右侧距离 |
内置方法
<!-- <c-scrolling ref="scrolling" :useSlot="true" loop v-model="danmus" isSuspend :autoplay=false />
<script lang="ts">
const scrolling = ref<any>()
// 开始播放
scrolling.value.danmakuRef.play()
</script> -->
| 方法名 | 说明 | 参数 | | ------------ | -------------------------------------------- | ----------------------------- | | paly | 开始/继续播放 | | | pause | 暂停弹幕播放 | | | stop | 停止播放并清空弹幕 | | | show | 弹幕显示 | | | hide | 弹幕隐藏 | | | reset | 重置配置 | | | resize | 容器尺寸改变时重新计算滚动距离(需手动调整) | danmu数据,可以是字符串或对象 | | push | 发送弹幕(插入到弹幕列表末尾,排队显示) | danmu数据,可以是字符串或对象 | | add | 发送弹幕(插入到当前播放位置,实时显示) | danmu数据,可以是字符串或对象 | | insert | 绘制弹幕(实时插入,不进行数据绑定) | | | getPlayState | 获取当前播放状态 | |
事件
| 事件名 | 类型 | 说明 | | -------- | ------------- | ------------------------------------------------------------ | | @ListEnd | ()=> void | 所有弹幕插入完毕 | | @playEnd | (index)=>void | 所有弹幕播放完成(已滚出屏幕)返回值 index(最后一个弹幕的下标) | | @dmOver | (danmu)=>void | 开启弹幕悬浮暂停时,当进入弹幕,暂停时触发 返回值 触发的弹幕对象元素 | | @dmOut | (danmu)=>void | 开启弹幕悬浮暂停时,当离开弹幕,恢复滚动时触发 返回值 触发的弹幕对象元素 |
插槽 dm
danmu是每个对象的值,或者字符串的值
<template #dm="{index,danmu}">
<span>{{ index }}{{ danmu }}:{{ danmu.text }}</span>
</template>
c-checkbox组件
局部导入
import { cCheckbox } from 'clx-components'
基本使用
<c-checkbox v-model="checked" size="default" @change="console.log(checked)" border>123</c-checkbox>
参数
| 参数名 | 类型 | 默认值 | 说明 | | ---------------- | ------- | -------- | --------------------------- | | modelValue | boolean | false | 是否勾选 | | size | string | default | 'default'|'small 'large ' 控制大小 | | disabled | boolean | false | 是否禁用 | | border | boolean | false | 是否有边框 | | label | string | checkbox | 显示的文字 | | value | string | number | '' | 标识值,在c-checkbox-group中必填!! |
事件
| 事件名 | 类型 | 说明 | | ------- | --------------------------- | -------------------------------------------------------- | | @change | ({done,value,label})=> void | 改变时触发done表示是否勾选,value表示值,label显示的文字 |
插槽
默认字体插槽
c-checkbox-group组件
max和min 这两个属性有点难,以后有空再仔细琢磨,
局部导入
import { cCheckboxGroup } from 'clx-components'
基本使用
<c-checkbox-group v-model="arr" @change="change" >
<c-checkbox label="test1" value="1" ></c-checkbox>
<c-checkbox label="test2" value="2" ></c-checkbox>
<c-checkbox label="test3" value="3" ></c-checkbox>
<c-checkbox label="test4" value="4" ></c-checkbox>
</c-checkbox-group>
参数
| 参数名 | 类型 | 默认值 | 说明 | | ---------------- | ------- | -------- | --------------------------- | | modelValue | [string|number] | [] | 默认选中的值 |
事件
| 事件名 | 类型 | 说明 | | -------- | ------------- | ------------------------------------------------------------ | | @change | (val)=> void | 改变的value值 |
插槽
默认插槽 默认字体插槽
c-checkbox-group-inline组件
实现 max和min 功能
局部导入
import { cCheckboxGroupInline } from 'clx-components'
基本使用
<template>
<c-checkbox-group-inline v-model="arr" @change="change1" :max="3" :min="1" style="" />
</template>
<script setup lang="ts">
import {ref} from 'vue'
//数据 label 是多选框的文字, value 是选中的值,done 表示 是否选中
const arr = ref([
{label:'test1',value:'a',done:false},
{label:'test2',value:'b',done:false},
{label:'test3',value:'c',done:false},
{label:'test4',value:'d',done:false},
])
</script>
参数
| 参数名 | 类型 | 默认值 | 说明 | | ---------------- | ------- | -------- | --------------------------- | | modelValue | [{}] | [] | 渲染的个数,label显示的文字,value标识,done是否显示 | | max | number | Infinity | 最多勾选值 | | min | number | 0 | 最少勾选值 | | style | string | '' | 默认样式 可以修改布局 |
事件
| 事件名 | 类型 | 说明 | | ------- | ----------- | -------------------------------------------- | | @change | ([])=> void | [{done:boolean,value:string}] 已经勾选的数组 |
c-message组件
消息提示组件
局部导入
import {cMessage} from "clx-components";
基本使用
<script setup lang="ts">
import {cMessage} from "../cComponents/cComponents.js";
</script>
<template>
<c-button size="small" type="primary" @click="cMessage({type: 'success', message: '获取成功', duration: 2000})">show</c-button>
<c-button type="warning"@click="cMessage({type: 'warning', message: '警告警告', duration: 2000})">inline</c-button>
<c-button type="gray" @click="cMessage({type: 'info', message: '默认默认', duration: 2000})">test</c-button>
<c-button type="danger" @click="cMessage({type: 'error', message: '获取失败', duration: 2000})">danyi</c-button>
</template>
参数
| 参数名 | 类型 | 默认值 | 说明 | | ---------------- | ------- | -------- | --------------------------- | | types | string | success | 'success'|'warning' |'info' |'error' | | message | string|number | '' | 提示内容, | | duration | number | 3000 | 消失的毫秒 |