- 博客(246)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 如何搭建一个vue2组件库(king-ui-pro)
webpack.config.js 添加每个组件的打包。选择依赖，基本啥都不用安装。每个组件都需要一个注入方法。为仓库生成一个快捷方式。
2024-04-22 15:18:22
218
原创 vue中如何控制一个全局接口的调用频率
在app.vue，created中调用了一个同步用户信息的接口，但不希望每个页面刷新都会调用，并限制在页面的调用频率。
2024-04-22 14:54:03
204
原创 vue switch组件
示例功能描述自定义两种状态下的颜色对比el-switch新增了v-model 的值自动和配置的两个状态值保持一致使用 <kl-switch :default="switchRule" v-model="isOk"></kl-switch> data() { return { isOk: '1', switchRule: ['1', '2'], } },实现<te
2021-12-31 22:35:41
2351
原创 步骤条制作 -- 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
623
原创 模糊搜索框 el-select的优化版
演示左侧是el-input右侧是kl-input优化问题el-input传递的配置项，只有value有用在数据量较大，频繁搜索可能会出现搜索内容与显示内容不匹配当鼠标移动到下拉框框，使用键盘上下键切换，不能正常翻页功能介绍模糊搜索上下键 翻页根据渲染的options的长度，添加不同时长的节流~~自定义滚动条 ~~使用<template> <div> <h2> {{ currentVal }} </h
2021-12-05 14:52:55
219
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
465
原创 阿里图标svg 的使用方式
第一步，下载到本地只要iconfont.js这个文件，再main.js终导入即可import '@/assets/svg/iconfont.js';页面使用注意这儿的user1 就是图标的名字 <svg aria-hidden="true" width="20" height="20"> <use xlink:href="#icon-user1"></use> </svg>...
2021-11-30 20:19:42
2409
原创 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
1156
原创 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
687
原创 两端等高布局
示例实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &
2021-11-26 22:52:03
108
原创 vue excel文件上传预览和修改组件封装
前言本组件的封装使用了部分elemenu-ui的组件，使用时，需要注意导入上传的组件使用了我自己制作的kl-upload ，大家也可以直接使用elementui的上传，并不影响功能，这儿也附上这个组件的制作地址 kl-upload组件功能描述提供单个或多个excel,csv文件的上传(简单的行列容易对应的表格)前端解析文件，生成表格(el-table)两份，一份的table1，一份冻结的table2，都支持下载为excel和收集为json数据上传表格分页展示支持在线修改和删除使用方式
2021-11-25 20:19:40
811
原创 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
977
原创 2021/11/4 学习文档记录 vue3 && jquery
文章目录vue3 相关watch 和computedvue2computed:watch：//侦听器vue3computed计算属性watch 监听vuex 使用差异vue2vue3 使用stategettersmutationsactions注册全局的差异vue2 插件方式注册示例vue3 插件方式注册示例vue3.2 新增语法setup 语法糖ref 可直接作用于cssjquery 相关jquery的链式调用怎么实现实现节点的拖拽vue3 相关watch 和computedvue2compute
2021-11-04 14:29:38
340
原创 vue如何在html页面更优雅的使用组件化开发
文章目录存在问题htmlindex.jsheaderCom.js存在问题没有实现全局组件的复用，只能在单一页面做逻辑的拆分传递array 类型数据到子组件，会出现无法解析语法的问题html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"
2021-11-03 14:05:07
986
原创 elment-ui 时间选择器 限制范围
文章目录页面处理逻辑data 新增methods新增页面<el-date-picker :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" v-model="value1" type="datetimerange" align="right" start-placeholder="开始日期"
2021-11-02 17:09:57
159
原创 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
119
原创 2021/10/26 工作总结
每日都必须提交代码(5:30左右就必须开始)写css代码要一次到位写样式必须完全按照 ui 的来，一次完成，拒绝分次完成如果晚上要上正式，下午必须点饭(晚上必然加班)
2021-10-26 22:28:33
77
原创 el - upload 的基本使用
文章目录直接上传如何拦截请求，只预览，先不发请求直接上传请参照官方文档如何拦截请求，只预览，先不发请求html<el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" > <img v-if="imageUrl" :
2021-10-23 20:15:28
707
原创 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
129
原创 css 实现文字滚动展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-10-19 21:08:43
1069
原创 2021/10/19
存在问题图片改成cdn激活页面 缺少激活已经被使用的提示 激活成功弹窗需要修改强制弹出领取逻辑是否每次进来都需要实现 — 如果已经领取了 返回的字段查看页面的 具体实现 还是 复用原来的页面暗黑模式的实现分享页面无法滚动...
2021-10-19 20:40:38
73
原创 2021/10/18 (入职第一阶段工作总结)
文章目录存在问题解决方案具体的实施存在问题不按流程工作需求不清开始工作不够细心，容易犯我以为的错误超时做项目解决方案严格遵守流程一定要在确定清除整个流程的情况下在，再开始具体的业务绝不能在不清楚上下文的情况下，去随意的修改原有代码要提高对项目的节奏把控，要在了解了全局的情况下来合理分配时间具体的实施...
2021-10-18 21:36:19
88
原创 图片加载失败 使用图片替换
<img src="14147" @error="handleError" alt=""> handleError(e){ e.target.src = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.y9aI8dDZSwdhwJMI3I1L0gHaNG?w=187&h=332&c=7&r=0&o=5&pid=1.7' }
2021-10-18 12:40:20
183
原创 mongodb 数据的批量导入和导出
文章目录导出导入导出ork_show 数据库名字C:\Users\tom\Desktop\db_data 表示输出的地址cmd (管理员)下执行mongodump -h 127.0.0.1 -d work_show -o C:\Users\tom\Desktop\db_data导入ork_show 数据库名字C:\Users\Administrator\Desktop\db_data 表示输入的地址mongodump -h 127.0.0.1 -d work_show
2021-10-17 13:51:29
769
原创 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
245
原创 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
775
原创 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
165
原创 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
72
原创 vue 添加骨架屏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>kl-ui</t
2021-10-02 10:56:21
258
原创 vue3 ts vite 配置别名 导致报 无法找到对应莫模块的错误处理方式
第一步vite.config.ts alias: { "@": resovePath("src"), },第二步tsconfig.json "compilerOptions": { ... "baseUrl": "./", "paths":{ "@": ["src"], "@/*": ["src/*"], } },解决ts 和 vue 文件的相互导入找不到模块根目录 或 src 下新建 env.d.ts 文件
2021-10-01 17:45:04
3457
原创 node框架集成 jwt
文章目录jwt 的作用express 集成 jwt安装依赖utils根目录下新建token目录token目录下新建 index.jstoken目录下新建constant.js在需要token的路由前 添加 中间件生成一个token前端携带tokenjwt 的作用JWT：Json Web Token，是基于Json的一个公开规范，这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息，他的两大使用场景是：认证和数据交换使用起来就是，由服务端根据规范生成一个令牌（token），并且发放给客户端。此
2021-09-29 15:45:47
112
原创 20219/29 工作总结
文章目录项目开发流程vscode 注释插件配置代码风格统一 eslint+prettier 配置git相关操作基本代码规范疑惑项目开发流程vscode 注释插件配置链接代码风格统一 eslint+prettier 配置链接git相关操作链接基本代码规范组件使用中划线,不适用驼峰命名类名统一使用中划线（兼容）疑惑考虑到公众号会运行在各种场景中，比如移动微信、PC微信、移动浏览器、App webview等，兼容性至关重要。...
2021-09-29 15:24:12
65
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人