- 博客(36)
- 收藏
- 关注
原创 vue实现获取当前时间并实时显示
以下代码可以实现获取当前时间并实时显示,朋友们直接copy使用即可,希望可以帮助到有需要的朋友们!// 在Vue实例销毁前,清除时间定时器。// 格式化需要展示的时间格式。// 将月份和日期补零。// 格式化日期时间。
2024-10-08 11:23:49
1237
原创 JavaScript实现数字千分位的方法
如何利用 JavaScript 将普通数字转换为带有千分位分隔符的格式。我们将介绍多种方法,包括使用内置的 toLocaleString()方法、Intl.NumberFormat对象以及自定义函数来实现数字格式化。无论你是初学者还是有一定经验的开发者,本文都将为你揭示数字格式化的各种技巧和灵活性,让你在数据展示方面游刃有余。让我们一起探索如何美化数字,让数据更加清晰和吸引人!千分位分割指的是在数字中插入逗号或其他分隔符,以提高数字的可读性。
2024-10-08 09:40:35
1005
原创 vue项目中解决el-table数据过多导致页面卡顿问题
要用到umy-ui库,umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。u-table增加三个属性(必须): use-virtual,row-height,height,表示启用虚拟列表。把el-table-column改成u-table-column。把el-table改成u-table。
2024-08-29 15:33:01
1628
原创 vue项目1分钟实现自定义右键菜单,懒人的福音
高效实现需求,避免重复造轮子。今天给大家分享的是,如何在最短的时候内实现右键菜单。方法也很简单,一个插件就可以搞定,话不多说,上效果图:
2024-07-17 16:03:57
1071
原创 vue使用audio 音频实现播放与关闭(可用于收到消息给提示音效)
这次项目中因为对接了即时通讯 IM,有个需求就是收到消息需要有个提示音效,所以这里就想到了用HTML5 提供的Audio 标签,用起来也是很方便,首先让产品给你个提示音效,然后你放在项目中,使用Audio 标签,然后引入这段提示音效即可,后续的操作也是我下面的代码,直接复制即可。// 如果你也想在收到消息的时候播放提示音效,在收到消息回调的方法里面执行这个方法(playNotionAudio)即可。// pause()方法只是暂停,这里还需要重新load,然后需要再次play,音乐就可重头播放。
2024-07-17 15:34:34
1759
原创 vue项目中封装文本组件
为什么会选择封装这个文本组件呢,原因就是因为在项目中的表格里,会出现文字比较多的情况,比如备注、描述等,文字多的话会占很多行,也很不美观,用css也可以实现,只不过你每个地方都要写固定的css代码,没必要也很麻烦,所以封装成全局的就很方便了,哪里使用直接复制就行了。
2024-06-25 15:08:55
297
原创 vue项目中封装element分页组件
我们都知道封装组件是为了方便在项目中使用,全局封装之后哪个模块使用直接复制就行了,分页在后台项目中用到的地方也是很多的,所以我们就全局封装一下分页组件,以后也方便在项目中使用,接下来封装的这个分页也是element-ui里最全的分页功能。
2024-06-25 14:51:49
861
原创 web3.0时代!
例如,区块链可以提供更安全、透明和无需信任的网络体验,智能合约可以自动执行协议,从而改变交易和合作的方式。特点: Web 2.0时代大约从2000年末开始至今。Web时代的演进不仅仅是技术和平台的改变,它还反映了社会和文化的变迁,推动了信息的自由流动和全球化交流。每个阶段都带来了新的商业模式、社交互动方式以及对个人和组织的影响,未来的Web 3.0将继续塑造我们的数字世界,并可能引发新的经济和社会结构。Web 3.0倡导开放的数据和协议标准,支持不同系统和平台之间的互操作性,促进生态系统的发展和创新。
2024-06-14 11:12:43
378
原创 el-table合计行单元格合并、合并行金额四舍五入保留两位小数、合计行样式修改
最近在写项目的时候用到了合计行,本篇文章提供了el-table使用合计行的方案。
2024-01-11 15:54:07
2264
1
原创 ElementUI el-table树形表格懒加载手动刷新 解决Element Table组件树形展示懒加载数据更新的问题
最近在使用Element的el-table表格组件时,发现一个问题,我的业务场景需要使用树形表格,并且使用懒加载的模式加载子级数据,但是使用Element自带的树形表格和懒加载功能,懒加载仅会在第一次展开时加载,后续会使用第一次缓存的数据,而不会重新加载,本篇文章提供了解决方案。首先,先看一下Element的el-table组件的相关代码:
2023-12-19 16:01:37
5924
11
原创 CSS -webkit-box-orient: vertical 属性编译或打包后丢失问题
最近在写项目的时候遇到一个问题,需求是表格中的备注字段只显示2行,超出显示…,鼠标悬浮显示完整。;
2023-12-19 14:32:35
582
原创 记录一次 element-ui Cascader 级联选择器报错问题
调试了源码找到真正的问题,watch队列中,options的监听事件比 value的监听事件快,watch的队列表示为[“options”, “value”],当修改级联的value为" "并修改options为[ ],此时监听事件的执行顺序为,先执行options的监听事件,后执行value的监听事件。
2023-10-24 16:14:18
324
原创 fetch跨域携带cookie
fetch方法默认是不携带cookie的,如果需要携带cookie,加上以下字段即可,跨域申请中需要带有cookie时,可在fetch方法的第二个参数对象中增加credentials属性,并将值设置为”include”。fetch能够设置不同的模式使得申请无效.,模式可在fetch方法的第二个参数对象中定义。
2023-09-15 11:33:33
3881
4
原创 vue3项目封装form表单
我们都知道表单组件应该是后台管理系统中用得最多的组件,我们不可能每个业务都写一次表单,然后每一次修改都去各自业务中大幅修改,这样就可能导致代码重复率太高了,工作效率频频降低,所以我们需要封装起来,这样我们就可以复用,大大减少项目体积,方便项目的后期维护,提高前端娃的工作效率。由于我们使用表单都是直接使用UI组件库的组件,所以我们需要做二次封装,那么问题来了,二次封装表单组件我们需要考虑什么?话不多说,直接展示代码,以下代码可以直接使用:接下来我来告诉大家怎么使用:
2023-09-12 15:39:05
1585
5
原创 vue3项目中使用tinymce富文本编辑器
最近在项目中使用一款非常实用,功能齐全的富文本编辑器----Tinymce Editor首先献出文档 – 英文文档 中文文档 编辑器效果如图首先安装其次根据项目的vue版本选择tinymce-vue版本,如果你使用的Vue3.0可直接使用Vue2.x的项目则需安装较低的版本,我在项目采用的版本是 "3.2.6"的版本,则安装我这里直接把富文本封装成全局组件了,因为我的项目里有很多地方都会用的到,所以封装成全局组件会比较方便使用。首先引用依赖:tinymce组件:然后再配置一些常用的插件及拓展插件,如
2023-09-12 14:54:01
3112
3
原创 vue子组件调用父组件中的方法、值的几种方式
有时候,我们会把方法定义在父组件中,然后在多个子组件中调用父组件的方法,这是很常见的场景。那么,在子组件中调用父组件的方法有哪几种方式呢?
2023-08-12 09:49:22
9264
1
原创 element-image el-table el-table-column 组件中 使用插槽 加载 el-image 组件预览图片层级过低问题
可以发现 .image-viewer_wrapper 类名的元素是预览图片的盒子 有设置z-index:2006 但是还是被其余表格列表元素遮挡 说明el-image 的父元素的层级不够高 可以遮挡前面列表的元素 但是后面列表的元素无法遮挡。废话不多说,直接上代码。
2023-08-09 09:33:22
895
原创 vue侦听器详解
侦听器允许开发者对数据进行监视,并指定数据发生变化时需要执行的操作。侦听器可以定义为一个函数或一个对象。其函数名或对象名必须是data中的数据。
2023-07-27 11:07:44
115
1
原创 vue计算属性详解
写在computed对象中的属性,本质上是一个方法,不过使用时依旧当属性来使用data() {return {firstName : "熊" , lastName : "大" , };get() {exportdata() {return {firstName : "熊" , lastName : "大" , };get() {defaultdata() {return {firstName : "熊" , lastName : "大" , };get() {
2023-07-27 10:24:45
277
1
原创 日常工作中常用的几个git指令
对于程序员来说,Git大家并不陌生,无论是使用GitHub或GitLab还是一些其他的代码管理工具时,都会使用到Git命令,Git是一个免费的开源分布式版本控制系统,可以快速高效地处理从小型到大型项目的所有内容,这篇文章先不讲原理,让我们先来看看它有哪些命令吧。
2023-07-25 11:44:04
80
原创 vue项目之使用md5加密密码
MD5全称为信息-摘要算法(哈希算法),是计算机安全领域的散列函数,用于确保消息的完整性。另外摘要算法还有SHA1,具体请度娘。MD5是一种单向加密,它的加密不可逆,它将任意长度的字符串,经过算法计算后生成固定长度的数据,一般为16位表示。这种加密方式最简单同时也最直接。一般在向后端传递密码的时候需要用MD5加密一下,后端的话也是用MD5解密,我这里直接是在全局定义了MD5,因为本次这个项目有很多接口需要传递密码,所以定义全局比较方便,上面我已经把局部和全局的两种方式都已经列出来了。
2023-07-24 10:46:41
4006
原创 vue+element-ui效验两次输入的密码是否一致
data() {callback(new Error("请输入密码"));callback(new Error("请输入含数字和字母的8-16位密码"));callback(new Error("请再次输入密码"));callback(new Error("两次输入密码不一致!"));} };return {//表单数据 ruleForm : {
2023-07-24 10:12:04
3087
原创 Node 版本管理器 nvm(nvm-windows)
nvm全名node.js version management,是 nodejs 的版本管理工具,可以在一个环境中同时安装多个 nodejs 版本(和配套的 npm 版本),并随时切换。好处是,开发调试不同 nodejs 应用变得更省心,随时切换所需要的版本。注:安装之前需要先把自己电脑上边的node给卸载了!
2023-07-15 16:20:35
985
1
原创 vue清空动态路由(路由历史)
网上流传了很多清空路由记录的方法,都不彻底,甚至绝大部分都无法实现清空的功能!这个回答是唯一能解决你的问题的回答。分享我最近做的一个后台项目,里面的侧边栏用动态路由生成的,但是会遇到路由重复添加这样的问题,想要解决这个问题的话其实很简单,就是再添加动态路由之前先清空路由,话不多说上代码。在需要清空的路由的地方执行以下代码就可以了。
2023-07-15 15:26:29
5876
1
原创 一篇搞定Vue Router 路由守卫(导航守卫)
官方提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
2023-06-12 11:59:16
1089
2
原创 如何使用Vue实现自定义双向数据绑定?
在Vue中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便的操作数据,在本文中我们将介绍如何用Vue实现数据的双向绑定,实现方法主要有以下两种:
2023-06-06 10:23:14
2880
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人