- 博客(247)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 nuxt3开发体验这么差，如何优化呢
最近使用nuxt3写了个博客，发现开发体验极差，首页直接加载了1171个文件，用时接近1分半才打开，新开窗口，刷新，都要等半天才能加载出页面。大佬们有一样的问题吗。
2025-02-07 22:47:45
767
5
原创 express+vue 在线五子棋(一)
示例 本期难点 1、完成了五子棋的布局，判断游戏结束 2、基本的在线对战 3、游戏配套im(这个im的实现，请移步在线im) 下棋安排 1、每步的倒计时设置 2、黑白棋分配由玩家自定义 3、新增旁观者 4、悔棋 5、自行创建一盘棋局 感兴趣的，还请点个免费的收藏与关注，后续会一直跟进这个系列 前端部分五子棋布局与游戏输赢判断 <template> <div class="flex-wrap flex-justify-between"> <div cla
2024-06-23 19:36:17
1727
2
原创 express+vue在线im实现【四】
express+vue在线im实现【一】 express+vue在线im实现【二】 express+vue在线im实现【三】 web端在线录制与发送音频
2024-06-20 10:32:57
837
原创 express+vue在线im实现【三】
支持各种类型的文件上传，常见文件类型图片，音频，视频等使用腾讯播放器完成视频播放,这个是本期亮点，支持自定义控件功能与样式,这儿示例了前进后退15s与设置里的配置音频使用html5标签audio播放其他类型统一为下载input chang方法// 有上传文件if (!// 图片// 发送消息})})})return// mp4if (type!this.$message.warning('请上传mp4格式的视频')return// 视频上传// 发送消息})})
2024-06-19 10:31:55
1153
原创 express+vue在线im实现【二】
本期示例本期完成了：1、心跳检测2、支持发送表情与图片3、新增了一些细节，消息固定位置，是否显示呢称，新消息来的闪烁提示等4、将整个模块独立了出来，在博客页新增了全局挂载。
2024-06-16 20:09:51
689
2
原创 express+vue在线im实现【一】
如果有道友有需要的也可以私聊我，我看到会回的。需要用邮箱注册一个账号。3、历史聊天，上拉加载。1、在线聊天(群聊)2、实时监控成员状态。需要用到下面这个插件。
2024-06-10 21:01:28
620
原创 如何搭建一个vue2组件库(king-ui-pro)
webpack.config.js 添加每个组件的打包。选择依赖，基本啥都不用安装。每个组件都需要一个注入方法。为仓库生成一个快捷方式。
2024-04-22 15:18:22
648
原创 vue中如何控制一个全局接口的调用频率
在app.vue，created中调用了一个同步用户信息的接口，但不希望每个页面刷新都会调用，并限制在页面的调用频率。
2024-04-22 14:54:03
466
原创 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
2580
原创 步骤条制作 -- 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
843
原创 模糊搜索框 el-select的优化版
演示 左侧是el-input 右侧是kl-input 优化问题 el-input传递的配置项，只有value有用 在数据量较大，频繁搜索可能会出现搜索内容与显示内容不匹配 当鼠标移动到下拉框框，使用键盘上下键切换，不能正常翻页 功能介绍 模糊搜索 上下键 翻页 根据渲染的options的长度，添加不同时长的节流 ~~自定义滚动条 ~~ 使用 <template> <div> <h2> {{ currentVal }} </h
2021-12-05 14:52:55
476
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
666
原创 阿里图标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
2671
原创 vue锚点组件优化版 (kl-anchor)
文章目录示例功能使用方式实现kl-anchorkl-anchor-item B站演示地址—有空再录制 示例 功能 组件使用了elementui的部分组件，使用时注意导入 点击tab栏，展示区切换到指定区域 展示区滚动，tab栏自动切换到对应区域(我这儿的tab栏是自制，也可以使用elementui的相关组件) kl-anchor下只能套kl-anchor-item kl-tab制作地址 使用方式 <template> <div class="anchor"> <
2021-11-28 19:12:40
1435
原创 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
845
原创 两端等高布局
示例 实现 <!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
234
原创 vue excel文件上传预览和修改组件封装
前言 本组件的封装使用了部分elemenu-ui的组件，使用时，需要注意导入 上传的组件使用了我自己制作的kl-upload ，大家也可以直接使用elementui的上传，并不影响功能，这儿也附上这个组件的制作地址 kl-upload 组件功能描述 提供单个或多个excel,csv文件的上传(简单的行列容易对应的表格) 前端解析文件，生成表格(el-table)两份，一份的table1，一份冻结的table2，都支持下载为excel和收集为json数据上传 表格分页展示 支持在线修改和删除 使用方式
2021-11-25 20:19:40
957
原创 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
1085
原创 2021/11/4 学习文档记录 vue3 && jquery
文章目录vue3 相关watch 和computedvue2computed:watch：//侦听器vue3computed计算属性watch 监听vuex 使用差异vue2vue3 使用stategettersmutationsactions注册全局的差异vue2 插件方式注册示例vue3 插件方式注册示例vue3.2 新增语法setup 语法糖ref 可直接作用于cssjquery 相关jquery的链式调用怎么实现实现节点的拖拽 vue3 相关 watch 和computed vue2 compute
2021-11-04 14:29:38
727
原创 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
1229
原创 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
386
原创 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
209
原创 2021/10/26 工作总结
每日都必须提交代码(5:30左右就必须开始) 写css代码要一次到位 写样式必须完全按照 ui 的来，一次完成，拒绝分次完成 如果晚上要上正式，下午必须点饭(晚上必然加班)
2021-10-26 22:28:33
136
原创 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
838
原创 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
257
原创 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
1211
原创 2021/10/19
存在问题 图片改成cdn 激活页面 缺少激活已经被使用的提示 激活成功弹窗需要修改 强制弹出领取逻辑是否每次进来都需要实现 — 如果已经领取了 返回的字段 查看页面的 具体实现 还是 复用原来的页面 暗黑模式的实现 分享页面无法滚动 ...
2021-10-19 20:40:38
120
原创 2021/10/18 (入职第一阶段工作总结)
文章目录存在问题解决方案具体的实施 存在问题 不按流程工作 需求不清开始工作 不够细心，容易犯我以为的错误 超时做项目 解决方案 严格遵守流程 一定要在确定清除整个流程的情况下在，再开始具体的业务 绝不能在不清楚上下文的情况下，去随意的修改原有代码 要提高对项目的节奏把控，要在了解了全局的情况下来合理分配时间 具体的实施 ...
2021-10-18 21:36:19
133
原创 图片加载失败 使用图片替换
<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
299
原创 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
997
原创 kl-imgs (分享图片列表)
使用 options export 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
331
原创 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
915
原创 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
313
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人