前端
大前端
Pinia_0819
欲买桂花同载酒,终不是少年游.
记录平时要用到的知识,欢迎小伙伴一起探讨前端技术问题!
展开
-
商品列表无限加载
需求:例如在商品列表页鼠标向下滑动自动监听去掉接口老数据新数据拼接展示,加载完毕结束监听。核心实现逻辑:使用elementui提供的v-infinite-scroll指令。原创 2023-12-25 17:51:57 · 456 阅读 · 0 评论 -
Element-UI中,按钮点击删除后移开鼠标颜色仍然聚焦的解决方法
Element-UI中,按钮点击后移开鼠标颜色仍然聚焦的解决方法原创 2023-12-08 10:43:58 · 743 阅读 · 0 评论 -
el-timeline动态一个一个展示el-timeline-item
要实现在Vue项目中使用ElementUI的el-timeline组件动态一个一个展示el-timeline-item,可以借助Vue的数据绑定和循环遍历功能来逐个添加el-timeline-item。原创 2023-11-01 11:32:53 · 1949 阅读 · 5 评论 -
基于elementUI的封装的登录框
//账号密码输入框前面带图标 密码框自带小眼睛<template> <div class="login_bg"> <div class="login_box"> <div class="login_title">庐陵湿地安全预警评价系统</div> <div class="login_item"> <el-input placeholder="账号"原创 2022-02-21 10:16:52 · 681 阅读 · 0 评论 -
当从别的页面点击跳转至这个页面时 地址中携带了参数 可以通过这个方法获取
关于object的一些方法: <iframe name="content" id="iframePage" frameborder="0" width="100%" height="100%" style="overflow: hidden;"></iframe> //当从别的页面点击跳转至这个页面时 地址中携带了参数 可以通过这个方法获取 var params = decodeURI(window.location.href.split("=")[1]); var原创 2022-02-21 10:14:35 · 802 阅读 · 0 评论 -
常用jq属性方法:
常用jq属性方法: $('.bt_img').eq(0).find('img').attr('src', './images/yw_1.png') //第一个bt_img里面的img并给他设置属性src: ‘./images/yw_1.png’jQuery event.stopPropagation() 方法:阻止 click 事件冒泡到父元素:$("span").click(function(event){event.stopPropagation();alert("The span eleme原创 2022-02-21 10:13:52 · 358 阅读 · 0 评论 -
(其他项目)管控系统打包报错在tomcat上面运行报错(好多文件报404)
在打包的文件夹里面index.html同一级下新建一个WEP-INF文件夹, 在此文件夹下写一个web.xml可访问如下详细地址 https://www.cnblogs.com/sllzhj/p/12937129.html<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/X原创 2022-02-21 10:08:44 · 61 阅读 · 0 评论 -
打开页面的两种方式
打开页面的两种方式 window.open(`../index.html?index=${xt_index}`) // 新增页面打开 ; // 本页面打开 //使用个定时器 方法 交互效果更好 clearTimeout(timers); timers = setTimeout(function () { window.open(`../index.html?index=${xt_index}`) // 新增页面打开 }, 500);...原创 2022-02-20 15:35:04 · 977 阅读 · 0 评论 -
跳转系统(比如展示系统登录了直接跳转到后台管理系统)
跳转系统已知获取了账号密码在本地可以直接跳转到其他系统登录首先安装 npm install jsencrypt// 这里面导出的就是JSEncrypt 不需要特意加个{} 在展示系统中import JSEncrypt from "jsencrypt";在data中定义 PUBLIC_KEYPUBLIC_KEY: "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCADB+zg4Ou3fv6rY8159gw4fkJbuMPeM41ttw20leKjSK原创 2022-02-20 15:32:31 · 1603 阅读 · 0 评论 -
JS前端导出
前端导出//1导出 后台返回的文件路径,进行拼接下载 itemDown() { console.log('点击了导出按钮', AIAPI.IdentifyRecord.exportIdentificationRecordById) async () => { const loading = this.$loading.service({ target: '#IdentifyRecord', lock: true原创 2022-02-20 15:28:55 · 576 阅读 · 0 评论 -
导航栏跳转页面
一个页面有多个导航栏跳转页面一定要有这三步html 结构部分 <el-menu :default-active="path" class="el-menu-vertical-demo" :unique-opened="true" @select="listChange" > <el-menu-item index="/index/aiIdentify/achievementWall">原创 2022-02-20 15:25:44 · 17327 阅读 · 0 评论 -
elementui上传文件 ref=“upload“属性
<el-upload class="upload-demo" ref="upload" </el-upload>要绑定ref属性本地上传文件之后会把文件存在这里面 let files = this.$refs.upload.uploadFiles可以打印files查看里面的信息files.raw属性 是后端想要的信息 let formData = new FormData() files.forEach(item => {原创 2022-02-20 15:21:31 · 2587 阅读 · 0 评论 -
添加loading加载层
// 定义loading加载层starVideotLoading() { var that = this that.videoLoading = this.$loading({ lock: true, //是否锁定 text: "拼命加载中...", //显示在加载图标下方的加载文案 spinner: 'el-icon-loading',原创 2022-02-20 15:18:21 · 524 阅读 · 0 评论 -
下载图片/视频
单击一个列表item进行下载视频/下载图片//下载视频//自己定义一个下载视频的方法 videoDown(item) { this.downloadByBlob(item) } handleDownVideoFiles(item) { const that = this; if (!item) return; let url = item.recordPath;原创 2022-02-20 15:17:05 · 1152 阅读 · 0 评论 -
通过媒体查询引入相关的css文件
//1、在html中引入<link rel="stylesheet" href="./../css/historicaly.css" media="screen and (max-width:1920px) and (max-height: 1080px)" /><link rel="stylesheet" href="./../css/historicaly-1440.css" media="screen and (min-width:2048px) and (min-height:原创 2022-02-20 15:12:55 · 444 阅读 · 0 评论 -
公司项目要用到的组件
关于项目中视频组件的引用一、html部分 //使用公司的例子<span>分屏选择:</span> <ul> <li id="fenpin_1" class="fenpin-active">1X1</li> <li id="fenpin_2">2X2</li> <!-- <li id="fenpin_3">3X3</li&原创 2022-02-20 15:11:41 · 283 阅读 · 0 评论 -
el-pick-date时间选择器默认一开始显示当天零点和当前的提前n小时
let date1 = new Date().toLocaleDateString(); //返回当天的零点时间 let date2 = new Date(new Date().getTime() - 1 * 60 * 60 * 1000); //返回当前的时间提前一个小时 //date1和date2是返回当前的还没有格式好的时间 this.ruleForm.startTime = formatDateTime(date1) ...原创 2022-02-20 15:06:31 · 950 阅读 · 0 评论 -
表单页面常用的一些验证规则
日常校验的规则//1.手机号的验证phone: [ { required: true, message: "请输入手机号码", trigger: "blur" }, { validator: function(rule, value, callback) {原创 2022-02-18 14:54:46 · 816 阅读 · 0 评论 -
实现修改密码的功能(Vue+elementUI)
<!-- 修改密码界面 --> <el-dialog title="重置密码" width="30%" :visible.sync="cgpwdVisible" :close-on-click-modal="false" :modal-append-to-body='false' @close="handleCloseDialog"> <el-form :model="dataForm" label-width="100px" :rules="d原创 2022-02-18 14:43:22 · 3727 阅读 · 0 评论 -
js实现数据量换算问题
数据量换算原创 2022-02-18 14:34:47 · 329 阅读 · 0 评论 -
elementui对话框相对于页面水平垂直居中
修改对话框样式原创 2022-02-18 14:31:05 · 1048 阅读 · 0 评论 -
JS格式化时间方法
格式化时间的方法如果我们点击获取的是没有格式化后的时间,这时候我们需要将时间格式化一下,比如Fri Oct 01 2021 08:00:00 GMT+0800 (中国标准时间)这种的格式,可以转化为yyyy-mm-dd hh:mm:ss的格式formatDateTime(date) { if (date == "" || !date) { return ""; } var date = new Dat原创 2022-02-18 14:20:50 · 15275 阅读 · 1 评论