- 博客(30)
- 收藏
- 关注
RSS订阅原创 uniApp项目基于HbuilderX使用自用证书打包APK包
使用uniapp开发项目时使用hbuilderx进行项目的打包上线，选择自有证书打apk正式包，避免仿冒及版本更新不可覆盖。
2025-11-21 15:00:21
642
原创 基于vue3项目echarts按需引入及组件封装
在vue3+ts+vite项目中使用echarts，避免打包体积过大使用按需引入，并基于引入功能进行组件封装。
2025-11-19 18:11:42
839
原创 基于element-Plus的el-tooltip封装公共虚拟引用组件
vue3+vite项目中多处使用el-tooltip组件进行提示，避免重复代码过多封装公共组件，通过接收鼠标当前event位置和要展示的提示信息，在组件内部进行数据处理并展示。
2025-11-18 15:34:15
473
原创 vue3项目实战自定义utils方法
通过day.js自定义时间日期获取功能，返回年月日时分秒，可页面自由拼接。下载指令：npm install dayjs文件位置：src/utils/dateFormatter.ts// 类型声明// 获取年月日-时分秒return {// 年// 月(转换为 1-12 格式)// 日// 工作日weekday: `周${"日"// 类型声明 export type DateTimeParts = {
2025-11-18 11:36:03
864
原创 vue3中封装使用SignalR与后台实现多页面通信
在vue3+ts+vite项目中使用signalr配合后台进行通信，通过内置连接管理和分组功能完成项目多页面连接功能，主要实现全局连接，信息接收发送、重连通知等并封装全局通信组件，主要通过pageId来区分每个菜单页面。
2025-11-17 17:42:45
1346
原创 基于element-Plus时间日期选择器组件封装
在vue3项目中封装时间日期选择器功能，主要实现开始结束日期选择功能，支持限制可选日期范围最大时长不超过当前时间，便于页面功能开发。
2025-11-13 17:50:26
715
原创 vue3中封装使用WebSocket
在vue3+ts中使用websocket进行通信功能，主要实现 WebSocket 的连接、断开、重连、发送消息等功能，并且通过 eventBus 实现了消息的跨组件通信。
2024-12-16 15:51:24
2743
1
原创 element-ui的el-tree自定义连接虚线及展开行标签样式
通过css改变element ui的el-tree原有样式，并将子级与父级之间展开行添加连接线，层级之间添加斑马线效果。
2024-10-22 09:30:00
818
1
原创 vue中使用webSocket进行数据实时接收
功能描述：页面需要实时接收后台返回的最新数据并在页面展示，使用webSocket进行消息轮询和接收。
2024-07-21 20:35:23
903
原创 vue + element table单选、动态求和功能
随手记：table表格在vue中的单选、单行求和问题。html<el-table :data="tableData" border style="width: 100%">// 单选<el-table-column width="60px" align="center"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.checked" @chang.
2022-02-07 17:53:49
1549
原创 vue + element-ui 自定义table表尾合计行
随手记：table表格引用官网自定义总价功能html 主要用到 show-summary 表尾显示合并行 和 summary-method 自定义计数方法。<el-table :data="tableData" border style="width: 100%" show-summary :summary-method="getSummaries">....</el-table>js 进行自定义方法的定义methods: { getSumm.
2022-02-07 16:28:50
1895
原创 vue+element-ui+DatePicker日期限制功能
记录下自定义日期选择器，需求开始时间不超过当前日期并且不大于结束时间，结束时间不小于开始时间。存在两个日期选择器主要使用disabledDate来限制禁用状态<div class="cards"> <div class="header">账户明细</div> <div class="content"> <el-form ref="form" :model="form" label-width="120.
2021-07-27 15:54:16
951
原创 vue+vant实现全选、单选、下拉加载功能
通过 vant 的 Checkbox 来进行列表数据的选择，需求单选、多选、下拉加载、最多选中功能了解：Checkbox 可搭配 CheckboxGroup 进行选中和非选中状态切换使用到的参数 max（最大可选）、@change（当绑定值变化时触发）van-list 无限加载功能未选中按钮置灰，选中按钮可点击触发事件html<template> <div class="advance"> <div class="item-box"> .
2021-06-09 17:13:01
4680
2
原创 深入理解页面布局常用属性 css -- display
display 属性在网页布局中非常常见，是用于控制布局的最重要的 CSS 属性,每个 HTML 元素都有一个默认的 display 值,取决于元素的类型，大部分默认值为 block 或 inline。浏览器支持常用属性值display: none;常用于显示和隐藏属性，而不需要删除和重建。相对于 visibility:hidden；的隐藏属性，隐藏后移除元素不影响页面布局，不占位置。通常搭配javascript 或vue项目中三目运算进行使用display: block;可.
2021-05-13 18:17:37
2517
原创 vue+vant-ui移动端可复用组件封装
应项目需求，为避免代码重复，耦合性高，使用 vue + vant UI 来进行公共代码封装。本次封装头部标题区块。目标样式创建目录在src / components / 创建 headTips 文件封装组件html – headTips/index.vue<template> <div class="headTips"> <van-nav-bar :title="text" :left-arrow="shows"> <.
2021-04-21 16:58:39
805
原创 vue 点击tabs平滑滚动(锚点事件)
避免切换速度过快显得突兀，在不使用 a 标签以及添加 class类 进行锚点操作时，这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。定义scrollTo(xpos,ypos),包含两个必须属性xpos（指定滚动到X轴指定位置）ypos（指定滚动到X轴指定位置）使用：// 滚动到指定位置window.scrollTo(100,500)scrollTo(options)，包含三个必须属性top (y-coord) 相当于y轴指定位置left (x-coord) 相当.
2021-04-19 10:59:35
1426
2
原创 ios 弹框focus事件聚焦不弹出键盘
ios调用input的focus事件，input无反应无键盘弹出，需要用户手动点击才能触发。解决方法在ios中调用不能使用v-if或者v-show事件，css不能display:none; 要保证input一直处于页面中，可以使用z-index调整层级，opacity:0;改变div的透明度来进行，也可以使用定位方法将input定位到用户不可见的位置，触发弹框再将input定位回来显示html<div class="text-center dialog password-panel"&.
2021-04-02 14:41:20
1835
原创 vue+element-ui日历格式对账单下载功能
本次主要是使用vue+element UI来完成对账单功能的实现，需求是当前时间及之前一天不可点击，大于当前日期置灰不可点击。模板简陋敬请谅解 …先上效果图vue页面布局方便数据渲染<template> <div class="download-box"> <div class="block"> <el-date-picker value-format="yyyy-M" v-model="val.
2021-03-25 14:36:28
421
1
原创 css hover遮罩层效果
运用css方法达到鼠标移入文字消失，图片占满，遮罩层展示。用到了transition （过渡）、 position（定位）、opacity（透明度）等效果图html<div class="hot-product3"> <a href="javascript:;" target="_blank" class="item"> <div class="img"> <img src="../images/bg.p.
2021-03-15 16:08:15
1509
原创 mui picker选择器的使用
本次需求是使用mui选择器完成银行卡切换选择参考地址：https://dev.dcloud.net.cn/mui/ui/#picker参考官网数据html//首先肯定是引用mui的js、css依赖文件<link rel="stylesheet" type="text/css" href="static/public/css/mui.picker.min.css"><script type="text/javascript" src="static/public/js/mu.
2021-03-15 14:05:12
941
原创 mui中input失去焦点后页面回弹至顶部
在mui中，当前页面出现滚动条，如果点击input输入后失去焦点，页面直接拉至顶部，经验证后发现是由于mui框架会监听input失焦事件造成的原因。这种现象是在ios测试机中出现的，经测试发现解决方法有效。网上的解决方法还有很多，只展示当前使用的一种。解决方法//只需要在input的失焦事件中添加当前代码就可以了 $("input").blur(function () { $("body").removeClass("mui-focusin"); });...
2021-03-12 13:52:47
997
2
原创 css loading动画实现
使用css来实现loading动画是非常方便的，只需要用到css的动画属性就可以。animationanimation: name duration timing-function delay iteration-count direction;// name: 需要绑定到选择器的 keyframe 名称// duration: 完成动画所花费的时间// timing-function: 动画的速度曲线// delay: 动画开始之前的延迟// iteration-count: 动画应该播.
2021-03-12 13:33:21
499
原创 css滚动条样式修改
css滚动条样式修改很常见，首先需要了解滚动条的一些属性滚动条的组成：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动::-webkit-scrollbar-track 滚动条的轨道::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-.
2021-03-12 10:21:53
304
原创 金额保留小数点后两位方法
vue金额格式化的方法封装全局js文件，并在main.js中引用//global.jsexport default { install(Vue) { Vue.prototype.$moneyFormat = (money) => { if ((/^(([1-9][0-9]*)|(([1-9]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(money))) { const moneyArr = Number(money)
2021-03-11 16:10:13
2546
原创 table表格自动滚动
大屏展示表格数据，需要进行实时滚动的效果当前没使用json数据渲染，如果渲染要把内容放在 id=“fTbody” 的表格中 <table> <tbody> <tr class="f16"> <th width="10%">时间</th> <th width="10%">品类</th> <th widt.
2021-03-11 15:45:56
6650
4
原创 移动端验证码倒计时及实时监听输入框
应产品需求，需要在输入验证码时实时监听，如果输入六位验证码则提交按钮高亮，反之则置灰。设置倒计时功能//设置60秒倒计时，并在倒计时结束修改样式function clsTimerFun() { let timerData = 60; let timerObject = $(".clstxtClick"); timerObject.css({ "color": '#333' }); timerObject.html(timerData + 's后重新获取') timerSet =.
2021-03-11 15:10:56
293
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人