- 博客(53)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3使用panolens.js实现全景，带有上一个下一个，全屏功能
项目中 /railway/modalIframe/playPanorama/player/js/panolens-ht.js 为修改后版本 可以获取在全景点击获取坐标。panoramaFilesList为后端返回的数组，包含file_path。1.加载核心js库 （文件在untils里面）panolens官方文档。5.切换到360全景方法。3，加载函数和默认值。4.上一个下一个方法。
2024-09-12 15:48:03
727
原创 el-table 表格序号列前端实现递增，切换分页不从头开始
el-table-column type="index" width="55" label="序号" :index="hIndex">// 当前页数 - 1 * 每页数据条数 + index + 1 （ index 是索引值，从0开始）其实正常后端也可以直接返回，前台就不用做这些了。
2024-08-01 00:25:37
382
原创 Pc端vue2实现横向纵向鼠标滚动布局
类似uniaapp中的scroll-view组件，可横向可竖向，样式需要自己跳整一下。横向：（鼠标按下滑动里面的元素，可滑动，滚动条和左右都可以调整）ScrollIndex.vue文件。代码实现：主页面引入组件。
2024-07-27 01:04:19
99
原创 前端js打印某段代码执行了大概多长时间
两种方法：一个是console.time,一个是performace,但是两种方法，都只是打印了大概的时间，我认为是浏览器和js的机制的问题，只能是大概时间。
2024-07-18 22:47:00
198
原创 vue2+element ui 中的el-table 选中当前行当前行变色，单选/多选
【代码】vue2+element ui 中的el-table 选中当前行当前行变色。
2024-07-17 19:27:11
481
原创 element ui最后一行总计自定义，点击求和求出结果，并且可以两个表联动
【代码】element ui最后一行总计自定义，点击求和求出结果，并且可以两个表联动。
2024-07-16 08:50:36
110
原创 element ui中的el-tree自定义每个节点，前面加不同颜色的块
【代码】element ui中的el-tree自定义每个节点，前面加不同颜色的块。
2024-07-15 14:52:09
365
原创 Vant Ui 最新访问地址
Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.
2024-07-11 15:20:13
178
原创 Vue2/Vue3实现全局/局部添加防篡改水印的效果。删除元素无效！更改元素属性无效！支持图片、元素、视频等等。
MutationObserver 是一个强大的工具，可以用于监视并响应 DOM 中的变化，而无需使用传统的事件监听器。版权保护：水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息，以防止未经授权的复制、传播或使用。回调函数：MutationObserver 注册的回调函数在观察的节点发生变化时被调用。通过创建 MutationObserver 的实例并传入一个回调函数，可以开始监视指定节点或节点集合的变化。内容跟踪：通过在内容中添加水印，可以跟踪内容的传播和使用情况。实时监视动态加载的内容变化。
2024-07-11 11:00:37
735
原创 vue2实现复制,粘贴功能
一、需求说明在项目中 点击按钮 复制 某行文本是很常见的 应用场景，在 Vue 项目中实现 复制功能 需要借助 vue-clipboard2 插件。二、代码实现1、安装 vue-clipboard2 依赖（ 出现错误的话，可以试试切换成淘宝镜像源2、在 main.js 文件中全局引入插件示例代码如下：new Vue({在组件中有两种方法可以实现复制功能。使用提供的 指令直接将变量内容复制至剪切板，暂时没有找到处理数据后再复制的方式
2024-07-06 23:51:02
1534
原创 el-table封装popver組件，点击列筛选行数据功能，支持筛选，搜索，排序功能
el-input v-model="keyword" prefix-icon="el-input__icon el-icon-search" type="text" placeholder="搜索"全选确认
2024-07-05 22:32:43
955
原创 两个el-table共用一个横向滚动条
el-table-column prop="address" label="地址" width="250px"><el-table-column prop="address" label="地址" width="250px"><el-table-column prop="name" label="姓名" width="180"><el-table-column prop="name" label="姓名" width="180">address: '上海市普陀区金沙江路 1519 弄'
2024-07-05 22:01:45
834
原创 输入框输入值之后，检索表格中是否存在输入框中的值，存在就让当前文字为红色
span v-html="createKeywordHtml_content(scope.row.date)">日期this.searchValue为输入框的值。
2024-07-05 21:53:30
457
原创 File文件转Blob文件，临时路径浏览器可查看
/{ type: file.type } 预览blob发现乱码可能是type不对 要获取file文件的type。//blobURL 就是需要的blob预览路径。
2024-06-24 22:25:01
505
原创 Git 常用命令，一文全搞懂
先切换为dev分支，将代码提交到远程dev分支下，然后切换master分支,然后执行该命令git merge origin/dev;注意，每次合并的时候，都需要先在本地提交到远程，然后切到要合并的分支上，再去合并。合并代码：git merge origin/dev 如果是master合并dev分支。git checkout -b dev 创建dev分支并切换到dev分支。git branch -a 列出所有本地分支和远程分支。取消合并：git reset --hard +版本号。
2024-06-24 15:19:21
346
原创 nvm的安装使用，以及安装node，nvm常用命令
安装nvm之前必须清理本机安装的node，清理干净nvm官网往下滑 找到此处 nvm下载找到此文件下载解压缩安装包，并把安装包安装在D盘，然后 win+x选择 windows powershell出现该界面命令行输入npm -v 出现版本号 例如：出现该样式，则说明安装成功，由于本机没有node需要安装node,在node官网选择对应版本，此处以10.16.0为例，输入nvm install 10.16.0。
2024-04-30 11:35:52
378
原创 vue项目前端埋点，获取用户信息及记录页面菜单停留时间
"停留时间(s)": parseInt((currentTime - startTime) / 1000),// "停留时间(ms)": currentTime - startTime,// 第二步：计算 currentTime - startTime 的 差值。// 第一步：页面跳转后记录一下当前的时间 currentTime。// 第三步：每次都要初始化一下 startTime。当前页菜单名: from.name,结束时间: currentTime,当前页路由: from.name,
2024-04-29 09:13:26
353
原创 前端埋点，浏览器新开标签页，记录新开标签页的浏览时间（秒）
console.log('停留时间：', timeSpent, '秒');只有新开标签页失活状态下 才会记录，同样的页面open两次，会记录两次 ，符合逻辑。
2024-04-29 09:05:13
344
1
原创 Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘
npm -v 报错 Error: Cannot find module ‘node:path'安装相对应的版本 node版本10.16.0对应npm版本6.9.0。npm install npm@6.14.17 -g执行该命令即可。node -v 是否显示node。是因为node版本和npm版本不匹配。
2024-04-27 09:05:12
8816
2
原创 el-tree组件只有一级节点显示图片，并默认是一张图片，展开时是另外一张图片
'el-icon-user-solid': data.type === 2 // data.type是后端配合提供的识别字段，最后一级。'el-icon-folder-opened': node.expanded, // 节点展开时的图标。label: "二级节点 1-1"label: "二级节点 1-2"label: "二级节点 2-1"label: "二级节点 2-1"label: "二级节点 2-1"label: "一级节点 1",label: "一级节点 2",
2024-04-10 11:40:48
690
原创 实现节流防止连点方法以及调用方式
title: `点击次数过高，请${Math.ceil((delay - (nowTime - latestTime)) / 1000)}秒后再次尝试！此方法是处理接口或者逻辑等等。import {throttle} from "路径"1、新建throttle.js文件，复制该代码。
2024-03-22 16:04:14
294
原创 uniapp开发app，开发AI机器人对话功能，包含停止回答，文字一个字一个字蹦出来，每次滚动到最底部，查看历史等功能
<text class="text">对话历史</text>发送
2024-03-22 15:55:48
828
原创 uniapp实现长列表滚动分页功能
Empty v-if="itemsList.length==0" :title="'暂无数据 ...'" />console.log("触底了")
2024-03-11 10:35:48
1057
原创 uniapp回到顶部
scrollTop: 0, // 滚动到页面的目标位置 这个是滚动到顶部, 0。duration: 300 // 滚动动画的时长。
2024-03-06 10:29:25
503
原创 css渐变背景色如图
上面图片中的设置为background: linear-gradient(170deg,transparent,#fff);( 方向/角度 , 颜色1，颜色2，颜色3....);180deg:180度->to bottom。90deg: 90度->to right。270deg:270度->to left。to left :从右向左填充渐变色。to top : 从下向上填充渐变色。to right:从左向右填充渐变色。to bottom:从上向下填充渐变。0deg : 0度->to top。
2024-03-02 11:28:23
462
1
原创 css设置当字数超过限制后以省略号（...）显示
① -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。必须结合的属性 ，将对象作为弹性伸缩盒子模型显示。③ -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式。:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。2、多行文本溢出显示省略号。
2024-02-27 14:31:14
3067
原创 uniapp实现横向滚动布局并且左侧第一个元素不动
title: "为您推荐",title: "为您推荐",title: "为您推荐",title: "为您推荐",title: "为您推荐",title: "为您推荐",title: "推荐",
2024-02-27 10:04:41
549
原创 uniapp中实现两栏布局
title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",title: "路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌路野掌",/* 响应式设计，根据屏幕宽度调整宫格列数 *//* 假设你有2列，并且有间距 */
2024-02-27 10:00:42
1329
原创 uniapp手写提示框循环校验表单方法
/ console.log("有没填的信息", item.key)// value: 'word文件',// label: '请上传'value: '出版标题',value: '作品简介',value: '出版要求',value: '联系方式',label: '请输入'label: '请输入'label: '请输入'value: '作者',label: '请输入'label: '请输入'* 绑定：FormData，* 校验：BaseRules。
2024-02-25 23:13:57
526
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人