kl-ui
不忘初心1995
欢迎访问我的个人博客http://139.9.210.43/#/home,有更加详细的资料
展开
-
步骤条制作 -- vue
示例使用使用 <kl-steps :active="activeStep"> <kl-step title="步骤 1"> <p class="f-14">步骤 1 --补充 步骤 1 --补充步骤 1 --补充</p></kl-step > <kl-step title="步骤 2"> 步骤 2 --补充 <原创 2021-12-25 21:24:10 · 678 阅读 · 0 评论 -
模糊搜索框 el-select的优化版
演示左侧是el-input右侧是kl-input优化问题el-input传递的配置项,只有value有用在数据量较大,频繁搜索可能会出现搜索内容与显示内容不匹配当鼠标移动到下拉框框,使用键盘上下键切换,不能正常翻页功能介绍模糊搜索上下键 翻页根据渲染的options的长度,添加不同时长的节流~~自定义滚动条 ~~使用<template> <div> <h2> {{ currentVal }} </h原创 2021-12-05 14:52:55 · 256 阅读 · 1 评论 -
js 图片压缩公共方法的封装
文章目录示例使用实现存在问题示例使用<template> <div class="img-compress"> <span> 输入宽高压缩比 </span> <el-input v-model="ratio"></el-input> <input type="file" ref="fileRef" @change="fileChange" /> <div> <原创 2021-12-02 23:07:57 · 548 阅读 · 0 评论 -
vue锚点组件优化版 (kl-anchor)
文章目录示例功能使用方式实现kl-anchorkl-anchor-itemB站演示地址—有空再录制示例功能组件使用了elementui的部分组件,使用时注意导入点击tab栏,展示区切换到指定区域展示区滚动,tab栏自动切换到对应区域(我这儿的tab栏是自制,也可以使用elementui的相关组件)kl-anchor下只能套kl-anchor-itemkl-tab制作地址使用方式<template> <div class="anchor"> <原创 2021-11-28 19:12:40 · 1252 阅读 · 0 评论 -
kl - tab vue导航栏实现(底部线动画)
使用<template> <div class="demo"> <kl-tab :tabOptions="tabOptions" @change="changeCom" /> <div class="main"> <component :is="activeName"></component> </div> </div></template><原创 2021-11-27 21:54:58 · 733 阅读 · 0 评论 -
vue excel文件上传预览和修改组件封装
前言本组件的封装使用了部分elemenu-ui的组件,使用时,需要注意导入上传的组件使用了我自己制作的kl-upload ,大家也可以直接使用elementui的上传,并不影响功能,这儿也附上这个组件的制作地址 kl-upload组件功能描述提供单个或多个excel,csv文件的上传(简单的行列容易对应的表格)前端解析文件,生成表格(el-table)两份,一份的table1,一份冻结的table2,都支持下载为excel和收集为json数据上传表格分页展示支持在线修改和删除使用方式原创 2021-11-25 20:19:40 · 836 阅读 · 0 评论 -
kl-uploads 多文件上传与预览的实现
功能描述多文件的上传,图片添加预览功能,非图片只有名称列表使用<template> <div class="demo"> <klUpload ref="klUploadRef" preview @getFiles="getFiles" :limit="3" /> </div></template><script>import axios from "axios";export default { n原创 2021-11-21 16:07:22 · 992 阅读 · 0 评论 -
kl-phone-number
<template> <div class="kl-input-phone"> <div class="kl-input-phone-placeholder" v-show="isShow" @click="showInput"> {{ placeholder }} </div> <input ref="inputRef" v-show="!isShow" class="kl-i原创 2021-10-29 16:47:57 · 146 阅读 · 0 评论 -
kl-anchor(vue锚点组件)
文章目录要求使用实现要求导航栏内容块连接标记联动效果使用实现原创 2021-10-24 13:58:39 · 3864 阅读 · 0 评论 -
kl-scroll-text (文字滚动)
文章目录使用实现使用 <kl-scroll-text :height="24" :speed="50"> <span class="span1"> 我是默认的long-text,davagavddadvadva </span> </kl-scroll-text>实现<template> <div class="kl-scroll-text" :style="{ width: widt原创 2021-10-23 11:04:03 · 198 阅读 · 0 评论 -
kl-imgs (分享图片列表)
使用optionsexport const options = [ { id: 0, url: "https://tse4-mm.cn.bing.net/th/id/OIP-C.UvsWSccoKY3m8ri0neEg5QHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7", }, { id: 1, url: "https://tse3-mm.cn.bing.net/th/id/原创 2021-10-13 10:32:39 · 258 阅读 · 0 评论 -
v-lazy 图片懒加载指令的实现
文章目录使用实现使用 <ul> <li v-for="(item, index) in state.imgs" :key="index" border> <div class="item"> <img v-lazy="item.url" :src="item.url" alt="" /> <p> {{ item.content }} </p>原创 2021-10-07 22:29:07 · 795 阅读 · 0 评论 -
kl-waterfall 瀑布流
文章目录使用实现waterfall index文件kl-waterfall-item使用 <kl-waterfall @touchBottom="touchBottom" :distant="50" :cope="4" :margin="10" :sleep="200" > <kl-waterfall-item v-for="(item, index) in state.imgs" :key="index" border>原创 2021-10-07 22:23:54 · 227 阅读 · 0 评论 -
kl-scroll 记录
文章目录使用方式源码记录使用方式<template> <div class="backtop"> <kl-scroll backtop :height="height" @scrollEvent="scrollEvent" :accuracy="20" :distance="250" > <h1>kl-scroll</h1> <hr /原创 2021-10-04 18:13:59 · 92 阅读 · 0 评论 -
2021-09-23
文章目录分支管理kl-ui简介kl-button分支管理家用电脑 dev公司电脑 wxjkl-ui简介kl-buttontype 可选参数 <kl-button> default </kl-button> <kl-button type="primary"> primary </kl-button> <kl-button type="success">原创 2021-09-23 22:08:11 · 69 阅读 · 0 评论