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

快速开始

介绍

这个组件库使用 的技术栈 是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>

参数

名称	类型	默认值	说明
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