VUE自定义功能组件库
个人整理封装的一些VUE常用的功能性组件
菜鸟老五
证明自己,用结果说话。
展开
-
Vue拖动元素动画优化封装
<template> <div id="apps" v-cloak> <!-- 整段视频 --> <div> <!-- 收集字/用户操作反馈动作组件 --> <LTool :pbShow="pbShow" :blessingShow="blessingShow" :KShow="KShow" :YhShow="YhShow" ...原创 2022-04-26 11:54:05 · 358 阅读 · 0 评论 -
第六章-二次封装ElementUI-Table组件
首先先说一下为甚me要二次封装,通常我们表格的话每个页面都会写很多el-table,统一集成封装成自定义组件之后,每一个需要table的页面只需要引入一小段组件标签代码就够了,然后通过传参以及事件去执行自己对应的需求业务,较少代码冗余便于维护,代码简洁干净首先封装统一的LTable组件<template> <div> <el-table :data="tableData" style="width: 100%" ref="multipleTab..原创 2021-09-03 16:36:18 · 305 阅读 · 0 评论 -
第五章-封装PC端官网卡片组件
<template> <div> <!-- 列表 --> <div class="lw-card-box"> <div class="lw-card-view"> <el-row :gutter="20"> <!-- 注意这里的if判断是指限制显示几个 --> <el-col :span="6" ...原创 2021-08-09 15:50:52 · 174 阅读 · 0 评论 -
第四章-封装PC端ElementUI-Form表单全局校验插件组件
闲来无事二次封装ElementUI-Form表单校验插件优点:减少冗余代码/提高开发效率/便于维护跟使用 缺点: 自己开发的没有缺点哈哈哈哈,各位同行使用过程中觉得哪里体验不好私信我 插件地址:https://www.npmjs.com/package/lform组件源代码、安装方式: npm i lform<template> <div style="min-width: 300px"> <!-- 编辑提示 --> &..原创 2021-07-01 14:59:44 · 308 阅读 · 0 评论 -
第三章-生成自定义海报组件
第一种方式:使用通用的html2canvas来实现安装插件 npminstallhtml2canvas-d canvas自定义插件 <template> <div> <div class="ejDocter" :style="{'opacity':show?'0':'0'}"> <div> <div id="posterHtml"> <div clas...原创 2021-06-23 17:43:14 · 221 阅读 · 0 评论 -
第二章-Tabar顶部切换自定义组件
1.封装Tabar顶部切换组件 <template lang=""> <div> <div class="tabview"> <div class="tab-lab" v-for="(item, index) in tabList" :key="index" @click="tabSwiper(item, index)" :...原创 2021-05-27 14:32:01 · 115 阅读 · 0 评论 -
第一章-上滑加载更多自定义组件
封装VUE上滑加载更多分页组件文章目录 一、loadmore上滑加载更多自定义组件 <template><!-- @Author 赵瑞峰 @DataTime 2021/5/21 @Desc 分页加载更多组件 --> <div class="loadmore-box" @touchstart="touchStart($event)" @touchend="touchEnd($event)"> <d.原创 2021-05-27 14:05:41 · 144 阅读 · 0 评论