- 博客(246)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 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
1472
2
原创 express+vue在线im实现【四】
express+vue在线im实现【一】express+vue在线im实现【二】express+vue在线im实现【三】web端在线录制与发送音频
2024-06-20 10:32:57
742
原创 express+vue在线im实现【三】
支持各种类型的文件上传，常见文件类型图片，音频，视频等使用腾讯播放器完成视频播放,这个是本期亮点，支持自定义控件功能与样式,这儿示例了前进后退15s与设置里的配置音频使用html5标签audio播放其他类型统一为下载input chang方法// 有上传文件if (!// 图片// 发送消息})})})return// mp4if (type!this.$message.warning('请上传mp4格式的视频')return// 视频上传// 发送消息})})
2024-06-19 10:31:55
1017
原创 express+vue在线im实现【二】
本期示例本期完成了：1、心跳检测2、支持发送表情与图片3、新增了一些细节，消息固定位置，是否显示呢称，新消息来的闪烁提示等4、将整个模块独立了出来，在博客页新增了全局挂载。
2024-06-16 20:09:51
567
2
原创 express+vue在线im实现【一】
如果有道友有需要的也可以私聊我，我看到会回的。需要用邮箱注册一个账号。3、历史聊天，上拉加载。1、在线聊天(群聊)2、实时监控成员状态。需要用到下面这个插件。
2024-06-10 21:01:28
449
原创 如何搭建一个vue2组件库(king-ui-pro)
webpack.config.js 添加每个组件的打包。选择依赖，基本啥都不用安装。每个组件都需要一个注入方法。为仓库生成一个快捷方式。
2024-04-22 15:18:22
472
原创 vue中如何控制一个全局接口的调用频率
在app.vue，created中调用了一个同步用户信息的接口，但不希望每个页面刷新都会调用，并限制在页面的调用频率。
2024-04-22 14:54:03
309
原创 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
2442
原创 步骤条制作 -- 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
708
原创 模糊搜索框 el-select的优化版
演示左侧是el-input右侧是kl-input优化问题el-input传递的配置项，只有value有用在数据量较大，频繁搜索可能会出现搜索内容与显示内容不匹配当鼠标移动到下拉框框，使用键盘上下键切换，不能正常翻页功能介绍模糊搜索上下键 翻页根据渲染的options的长度，添加不同时长的节流~~自定义滚动条 ~~使用<template> <div> <h2> {{ currentVal }} </h
2021-12-05 14:52:55
281
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
581
原创 阿里图标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
2516
原创 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
1299
原创 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
756
原创 两端等高布局
示例实现<!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
180
原创 vue excel文件上传预览和修改组件封装
前言本组件的封装使用了部分elemenu-ui的组件，使用时，需要注意导入上传的组件使用了我自己制作的kl-upload ，大家也可以直接使用elementui的上传，并不影响功能，这儿也附上这个组件的制作地址 kl-upload组件功能描述提供单个或多个excel,csv文件的上传(简单的行列容易对应的表格)前端解析文件，生成表格(el-table)两份，一份的table1，一份冻结的table2，都支持下载为excel和收集为json数据上传表格分页展示支持在线修改和删除使用方式
2021-11-25 20:19:40
858
原创 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
1008
原创 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
607
原创 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
1092
原创 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
269
原创 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
168
原创 2021/10/26 工作总结
每日都必须提交代码(5:30左右就必须开始)写css代码要一次到位写样式必须完全按照 ui 的来，一次完成，拒绝分次完成如果晚上要上正式，下午必须点饭(晚上必然加班)
2021-10-26 22:28:33
100
原创 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
752
原创 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
210
原创 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
1123
原创 2021/10/19
存在问题图片改成cdn激活页面 缺少激活已经被使用的提示 激活成功弹窗需要修改强制弹出领取逻辑是否每次进来都需要实现 — 如果已经领取了 返回的字段查看页面的 具体实现 还是 复用原来的页面暗黑模式的实现分享页面无法滚动...
2021-10-19 20:40:38
89
原创 2021/10/18 (入职第一阶段工作总结)
文章目录存在问题解决方案具体的实施存在问题不按流程工作需求不清开始工作不够细心，容易犯我以为的错误超时做项目解决方案严格遵守流程一定要在确定清除整个流程的情况下在，再开始具体的业务绝不能在不清楚上下文的情况下，去随意的修改原有代码要提高对项目的节奏把控，要在了解了全局的情况下来合理分配时间具体的实施...
2021-10-18 21:36:19
108
原创 图片加载失败 使用图片替换
<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
228
原创 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
864
原创 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
266
原创 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
814
原创 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
241
原创 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
116
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人