vue3+ts+vite 封装的 图片裁剪组件 弹幕组件 表情包组件 loading组件 拖拽排序组件 日历组件 消息提示组件 等...

原创 已于 2024-11-20 14:53:47 修改 · 1.1k 阅读 · 24 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
vue

当前文章被收录于：

vue
1 篇文章 0 人学习
订阅专栏 查看详情
于 2024-10-25 16:51:20 首次发布

快速开始

介绍

这个组件库使用 的技术栈 是vite+vue3+ts 开发，所以这个只项目支持vue3项目使用

安装
npm
npm i clx-components
yarn
yarn add clx-components
说明

xiaobaikeai这是作者的Github
npm组件库npm位置

这个组件库是作者封装于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')

在这里插入图片描述

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>
参数
名称类型默认值说明
sizestringsmall可选值为 ‘large’ | ‘small’ | ‘mini’
typestringdefault可选值为 ‘default’ |‘primary’| ‘success’ | ‘warning’ | ‘danger’ | ‘gray’
stylestring‘’原生样式
colorstring‘’定义按钮文字颜色
roundbooleanfalse是否为圆角按钮
circlebooleanfalse是否为圆形按钮
disabledbooleanfalse是否禁用按钮
linebooleanfalse是否为文字按钮
loadingbooleanfalse是否显示加载按钮
插槽
插槽名说明
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>
参数
名称类型默认值说明
sizestringsmall可选值为 ‘large’ | ‘small’ | ‘mini’ （不支持textarea）
typestringdefault原生的类型 可选值为 ‘text’ |'textarea’等…
placeholderstring‘Please input’原生的placeholder
colorstring‘#606266’输入框的字体颜色
clearablebooleanfalse是否可以清空 （不支持textarea）默认false
showPasswordbooleanfalse是否显示密码 （不支持textarea）默认false
disabledbooleanfalse是否禁用 默认false
widthstring‘180px’输入框的宽度
heightstring‘25px’输入框的高度
maxLengthstring10限制输入
rowsstring2行数
colsstring20列数
resizebooleanfalse是否可以拖动（只支持textarea）默认false
showWordLimitbooleanfalse是否显示字数限制 默认为 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"/>

参数

名称类型默认值说明
typestring5不同的loading样式
sizenumber60loading的大小
colorstring#409effloading的颜色
animationTimenumber1000动画时间

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}[]拖拽列表数据
stylestring‘’每个可拖动数据块的样式
widthstring400px组件的宽度
heightstring400px组件的高度
gapstring0px数据块之间的间距
isDeletebooleanfalse是否显示删除按钮
事件

@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-modelbooleanfalse控制显示隐藏
stylestring‘’自定义样式
titlestring‘标题’标题文字
widthstring‘400px’宽度
heightstring’200px’高度
modalbooleantrue是否显示遮罩层
closeModalbooleantrue是否点击遮罩层关闭
closeEscapebooleanfalse是否按esc关闭
openDelaynumber100默认100ms 打开延迟
closeDelaynumbernumber默认100ms 关闭延迟
isclosebooleantrue是否显示闭按钮
isDragbooleantrue是否可以拖拽 默认true
插槽
插槽名说明
header对话框标题的内容；会替换标题部分。
defaultDialog 的内容
close关闭按钮
footerDialog 按钮操作区的内容
事件
事件名说明Type
openDialog 打开的回调（）=> void
closeDialog 关闭的回调（）=> void

c-cropper组件

这个组件是封装于GitHub上 vue-cropper开源的组件

在这里插入图片描述

局部导入
import { cCropper } from 'clx-components'
基本使用
 
   <c-cropper  v-model="show"   :fixedNumber="[1,1]" action="/api/testUpload" @success="success"   />
参数
参数名类型默认值说明
modelValuebooleanfalse是否显示
actionstring‘’图片上传地址(你自己配置跨域代理)
backgroundstring‘#fff’弹出框的背景色
fixedNumber[number,number][1,1]裁剪框比例
closeModalbooleanfalse是否可以通过点击遮罩层关闭弹窗
titlestring‘图片裁剪’弹窗标题
btnBgColorstring‘#409eff’按钮背景色
outputTypestring‘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>
参数
参数名类型默认值说明
modelValuebooleanfalse是否显示
themestring'auto ’‘light’ | ‘dark’ | ‘auto’
displayRecentbooleanfalse是否显示最近使用表情
disableSkinTonesbooleantrue是否禁用肤色选择
draggablestringtrue是否可拖动 默认 true
stylestring'‘表情选择器样式
事件
事件名类型说明
@success(data:string)=> voiddata是表情包内容

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>
参数
参数名类型默认值说明
modelValueArray[string|object][]
channelsnumber3轨道数量条数
autoplaybooleantrue是否自动播放
useSlotbooleanfalse是否使用插槽
loopbooleanfalse是否循环播放
stylestring'height:100px;width:300px弹幕轨道样式
debouncenumber100弹幕刷新频率(ms)
speedsnumber200弹幕速度
randomChannelbooleanfalse是否随机轨道
isSuspendbooleanfalse是否开启弹幕悬浮暂停
topnumber4弹幕轨道顶部距离
rightnumber0弹幕轨道右侧距离
内置方法
  <!-- <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>
参数
参数名类型默认值说明
modelValuebooleanfalse是否勾选
sizestringdefault‘default’|'small 'large ’ 控制大小
disabledbooleanfalse是否禁用
borderbooleanfalse是否有边框
labelstringcheckbox显示的文字
valuestring | 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'

在这里插入图片描述

基本使用
 <c-checkbox-group-inline v-model="arr" @change="change1" :max="3" :min="1" style="" />
参数
参数名类型默认值说明
modelValue[{done:boolean,value:string|number,label:string}][]渲染的个数，label显示的文字，value标识，done是否显示
maxnumberInfinity最多勾选值
minnumber0最少勾选值
stylestring‘’默认样式 可以修改布局
事件
事件名类型说明
@change([])=> void[{done:boolean,value:string] 已经勾选的数组

c-calendar组件

日期和农历 组件在这里插入图片描述

局部导入
import {cCalendar} from "clx-components";
基本使用

<template>
	<c-calendar v-model="date" />
</template>
参数
参数名类型默认值说明
v-modelDatenew Date()当前的时间
directionstring‘vertical’日期选择器方向 默认垂直 vertical 水平 horizontal
showDatebooleantrue是否显示日期选择器
showTodaybooleantrue是否显示今天按钮
showLunarbooleantrue是否显示农历
dateColorstring#fff日期背景颜色
calendarColorstring#fff农历背景颜色
selectColorstring#409eff选择日期背景颜色
事件
事件名类型说明
@change(val)=> void点击切换后的数据 类型看下方

val类型

selectDay 选中的日期Date

动物 ：animal

九野：Kuchino

神兽：mythical

凶吉：avoid

星座：constellation

月相：Phase

六耀星：hexasterism

七曜: sevenLuminaries

北斗九星:sevenLuminaries

建除十二值神:twelve

农历年:yaerHeavenly

农历月:monthHeavenly

农历日:dayHeavenly

宜: goodGods[]

*忌:badGods[]

吉神: lucky[]

凶神:fierce[]

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>
参数
参数名类型默认值说明
typesstringsuccess‘success’|‘warning’ |‘info’ |‘error’
messagestring|number‘’提示内容，
durationnumber3000消失的毫秒
标签
#前端 #vue #npm
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值