个人vue组件合集

1.二维码组件

• 基于qrcode和element-ui开发的二维码组件，qrcode负责渲染，element-ui负责弹窗预览展示
• 代码已上传gitee, 地址
• 基本使用

<el-qrcode value='123456'></el-qrcode>

• 参数

参数	类型	说明
value	String	二维码的值
size	Number	二维码默认展示的尺寸，默认200
preview	Boolean	可否点击弹窗预览，默认false
previewSize	Number	预览后弹窗展示的尺寸，默认400

2.文本行轮播组件

• 以行为单位，轮播展示文本信息，支持自定义样式和插槽
• 封装思路：只渲染2条数据（当前数据和下一条数据），每次滚动一行，就重置滚动位置（利用css3过渡的特性，滚动时开启过渡，重置时关闭过渡）
• 代码已上传gitee, 地址
• 数据格式

var msgList = [
    "日检：完成比例：0% / 未完成比例：100% / 点检异常比例：0%",
    "周检：完成比例：1.2% / 未完成比例：98.8% / 点检异常比例：0%"
]

• 基本使用

<el-textRow-carousel :data="msgList"></el-textRow-carousel>

• 效果
  

• 参数

参数	类型	说明
data	Array	要展示的信息列表，由文本行组成的一维数组
interval	Number	轮播间隔（毫秒），默认3000
rowStyle	Object	行自定义样式，可以自定义字体大小，颜色，边距等

3.文本交替滚动指令

• 以指令的形式，让溢出的文本进行左右交替滚动展示
• 封装思路：通过计算容器和文本所需的宽度差值，来确定滚动距离，配合定时器进行来回交替滚动
• 代码已上传gitee，地址
• 引入插件，注册全局指令

import vTextScroll from '@/plugins/v-text-scroll.js'
Vue.use(vTextScroll)

• 基本使用：v-text-scroll

<div class="flex-box">
    <div class="label-text">Vue.js：</div>
    <div class="value-text" v-text-scroll="msg"></div>
</div>

• 效果
  

4.表格轮播组件

• 需求：制作大屏看板时，经常要展示表格数据，通常一页是放不下的，表格需要自动滚动，轮播展示数据，并维持表头固定（自行使用粘性定位完成）
• 封装思路：表格内容使用插槽自行渲染，使用原生滚动条进行滚动，通过比对容器高度和内容高度来进行滚动运算
• 代码已上传gitee，地址
• 基本使用

<el-table-carousel @scrollToEnd="scrollToEnd" @noScroll="noScroll" :data="tableData">
    <table><table>
</el-table-carousel>

• 效果
  

• 参数

参数	类型	说明
data	Array	必填，表格数据，用于检测数据更新
interval	Number	轮播间隔（毫秒），默认30
delay	Number	滚动延迟（毫秒）,默认1000
hoverStop	Boolean	鼠标移入是否停止滚动，默认true
@scrollToEnd	Function	滚动到底事件
@noScroll	Function	内容没有溢出，导致无法产生滚动事件

5.季度选择组件

• 基于element-ui开发的季度选择组件，输入框使用el-input，弹窗使用el-popover组件渲染
• 代码已上传gitee，地址
• 基本使用

<el-quarter-picker v-model="nowQuarter" @change="onChange"></el-quarter-picker>

• 效果
  

• 参数

参数	类型	说明
value	String	当前季度的值，例如 2024-Q2
size	Number	控件大小
@change	Function	选择季度事件