- 博客(50)
- 收藏
- 关注
原创 VUE二级路由刷新时报错
比如访问:http://10.82.26.124:8097/正常,从这个页面跳转到:http://10.82.26.124:8097/prf-assessment-objectlist/self 时也正常,但是在这个 http://10.82.26.124:8097/prf-assessment-objectlist/self 页面刷新时就不正常了。config.js 中 publicPath: ‘/’,,将其设置为绝对路径,然后需要重新启动项目。
2023-03-15 15:05:00
555
1
原创 Element-ui input输入框限制输入数字后,当输入非数字后v-model失效
Element-ui input输入框限制输入数字后,当输入非数字后v-model失效
2022-11-15 14:59:06
1238
原创 vue必会知识点
目录1. vue-router路由懒加载2. vue父子组件生命周期执行顺序3. css预处理器4. js数据类型判断5. DNS解析url的过程6. 重绘和重排7. vue指令8. 导航守卫9. 甘特图 Fullcalendar10. provide/inject11. em rem px12. H5新特性13. css3新特性14. bfc15. promise和 async/await16. 箭头函数17. vuex数据持久化18. break和continue的区别和作用19. href和src2
2022-08-11 20:50:38
2088
原创 css圆弧动画
<!doctype html><html><head><meta charset="utf-8"> <style>.body{ background-color: aqua; height: 700px; width: 1000px; } @keyframes bimg1 { 0% {top: 400px;} 50% {top:0px;transform:scale(1);opaci
2022-05-26 11:47:36
580
原创 JavaScript技巧汇总
字符串技巧1、比较时间const time1 = "2022-03-02 09:00:00";const time2 = "2022-03-02 09:00:01";const overtime = time1 < time2;// overtime => true2、格式化moneyconst ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");const money = T
2022-05-23 22:40:08
76
原创 JS一些数字计算
数字转换带有千分位分隔符的数据方法MoneyFormat(money) { if (money && money != null) { money = String(money); var left = money.split('.')[0] ,right = money.split('.')[1]; right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + r
2022-04-15 11:30:46
348
原创 vue在初始化时设置滚动条位置
在在created或者mounted生命周期中 始终无法改变滚动条的位置但是使用updated钩子函数就可以updated () { this.$nextTick(() => { this.$refs.container.scrollTop = 500 }) }$nextTick 方法是在下次DOM更新循环结束之后执行延迟回调。...
2022-04-12 09:20:25
2965
2
原创 Element-ui Popconfirm气泡确认框的确认及取消事件不生效
给组件绑定@confirm="confirm"时,发现点击确定按钮时,并不能触发confirm事件。实际应该绑定的是onConfirm事件和onCancel事件
2022-04-11 14:39:21
1997
2
原创 Flex弹性布局
Flex 布局语法教程-详情:https://www.runoob.com/w3cnote/flex-grammar.html一、将父元素设置为Flex容器 dispaly:flex;二、父容器属性 1.flex-direction #定义排序方向 { row #从左到右排序 row-reverse #从右到左排序 column #从上到下排序 column-reverse
2022-03-15 10:10:35
412
原创 elementUI中的popover嵌套popover弹窗不能自动关闭
组件中有个弹窗el-popover,这个弹窗里面又引入弹窗el-popover,这样相当于是popover嵌套,导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭,就是这样解决方法:popover内部嵌套popover的方法,在外层popover的内容上添加click事件(注意是否需要.native),用this.$refs.XXX.doClose()方法关闭,同时触发内部popover的reference,需要添加click事件阻止事件冒泡,两者缺一不可(不阻止事件冒泡,就会造
2022-03-08 10:11:10
4799
原创 input框focus,让外层的div产生样式变化:div的focus伪类
:focus-within当点击里面的input框的时候input得到焦点,外层div就会有相当于拥有了input:focus的伪类选择一样, <div class="status-item" v-for="(item,index) of statuslist" :key="index"> <div class="status-picker-color-input-wrapper" > <div class="m
2022-03-07 14:35:29
1948
原创 vue自定义指令 弹窗拖拽
import Vue from "vue";//v-dialogDrag:弹窗拖拽Vue.directive('dialogDrag',{ bind(el,binding,vnode,oldVnode){ const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dialogHeaderEl.
2022-03-01 10:28:01
455
原创 vue自定义指令 输入框自动聚焦
在main.js中引用封装的js文件import Vue from 'vue'//v-focus:输入框聚焦Vue.directive('focus',{ inserted:function(el){ el.querySelector('input').focus() }})
2022-02-28 14:43:42
869
原创 queryselectorAll与getElementByClassName
因为classname拿到的不是nodelist他是HTMLcollection 他没有forEach方法
2022-02-28 14:36:36
246
原创 element中切换时间日期选择器时下拉框偏移到左上角的问题
第一次点击都是正常的,但是第二次直接偏移到左上角。解决方案:在el-date-picker里面加上 key=“XXXX”即可
2022-01-21 10:39:54
1998
1
原创 css文字颜色渐变
给文字添加渐变//上下渐变 p { font-size: 48px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } //左右渐变 p{ width: 200px;//一定要给个宽度不然字少体现不出来 font-size: 48px; backgr
2021-12-22 11:12:45
497
1
原创 Vue-element中表单自定义校验的this.$refs[formname].validate不生效
今天遇到的问题在做表单提交的时候,会出现this.$refs[formname].validate方法不生效,通过debug,原来是校验那里出了问题。在表单规则制定那里我需要自定义校验,用到了validator属性,使用这个的时候要注意一个地方,就是必须要返回一个回调函数。使用valiator校验规则时,切记一定要返回一个回调函数,使用了if,即使没有else的需求,也要写一个else返回回调函数。否则表单的validate是不会生效的model : 绑定整个表单model值rules : 整个表
2021-12-20 12:05:08
12661
9
原创 CSS3实现旋转相册
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;} li{list-style:none;} html,body{height:100%;} .box{ height:100%; width:
2021-12-17 15:30:13
720
2
原创 JavaScript -深拷贝函数封装
深拷贝与浅拷贝区别浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存; 改变一个对象,另一个会随之改变;深拷贝:复制并创建一个一模一样的对象,不共享内存,修改新对象,旧对象保持不变。浅拷贝实现var arr = [1, 2, 3, 4];var arr2 = arr;arr2[0] = "okokok"; console.log(arr); // ["okokok", 2, 3, 4]console.log(arr2); // ["okokok", 2, 3, 4]
2021-11-26 10:16:54
779
原创 h5 Canvas实现签名写字
Canvas元素是HTML5比较受欢迎的功能,这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态在这个区域绘制图形。canvas 宽高不能使用样式设置,这个画布的宽高,必须使用html标签来设置<canvas width="800" height="600"></canvas>canvas{ background-color: oldlace; }获取canvas var canvas=document.query
2021-10-25 11:03:58
964
1
原创 Element+sorttable实现表格拖拽排序
Sortable.js是一款优秀的js拖拽库官方Demo:http://rubaxa.github.io/Sortable/sortable.js中文文档https://www.itxst.com/sortablejs/neuinffi.html安装步骤:npm install sortablejs --save 在.vue中的需要用到sorttable的vue文件中引入,也可以 在main.js中引入注册到Vue的根实例中import Sortable from 'sortablejs'
2021-10-22 13:26:26
1618
1
原创 Element+draggable实现拖拽排序
vue.draggable一款基于vue的拖拽插件更多的vue.draggable知识 vue.draggable中文文档安装方式yarn add vuedraggablenpm i -S vuedraggable<template> <div id="app"> <div>{{drag?'拖拽中':'拖拽停止'}}</div> <draggable v-model="myArray" chosen-class="
2021-10-20 10:01:01
1078
1
原创 WebSocket实现的简易在线聊天室
<!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-15 09:57:55
220
原创 JS写的简易点名器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2021-10-12 15:35:35
133
1
原创 自定义icon图标和背景色
<template> <div class="icon box"> <el-popover width="200" pacemente="right" tige=cdicxi @hide="hide"> <!-- 选择图标图案和背景色 --> <div> <div> <el-color-p
2021-09-30 10:26:41
1971
1
原创 mousewheel的火狐浏览器兼容
mousewheel是谷歌浏览器的鼠标监听DOMMouseScroll是狐火的另外谷歌的event.wheelDelta值是120和-120;火狐上的event.detail值是-3和3 <div :style="style"> <div id="inner"> </div> </div> <script> export default{ data(){ return{ lef
2021-09-26 17:15:38
611
原创 HTML5新语义化标签
标签介绍header — 页眉main — 主体nav — 导航article — 独立的内容section — 一个区域,跟div的功能和语义是一样的aside — 辅助信息的内容footer — 页脚figure — 描述图像或视频figuretion — 描述图像或视频的标题部分hgroup — 标题组合普通的标签缺点1.不利于SEO搜索引擎对页面内容的抓取2.文档结构定义不明确于是HTML5出现,解决上述问题,专门添加页眉、页脚
2021-09-23 11:28:18
234
1
原创 Socket.io的简单连接
<!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-09-16 09:21:13
1359
原创 MongoDB的安装
1、MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的 高性能数据存储解决方案。2、MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。简单来说,它不是通过表格(关系)存数据,而是通过文档和集合来存数据。3、MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象,但是在这里它不叫 json,叫 bso
2021-09-10 10:19:00
96
原创 WebSocket的简单连接
实现socket的方式1.net2.socket.io 麻烦 兼容性最好3.websocket h5新增 低版本浏览器不兼容 使用方式简单前端后端链接1.搭建 websocket 服务器 new WebSocket.server({prot:8080},(=>{})) ws.on(‘connection’) 监听2.前端进行连接 new WebSocket(‘ws://localsocket:8080’) ws是WebSocket协议 ws.onOpen(‘ok’)
2021-09-06 15:09:29
6952
1
原创 apidoc文档生成器
1.npm install apidoc -g2.apidoc -i ./ -o ./aaaapidoc -i 后是编译哪一个文件目录 ./是当前文件 -o 后是编译到哪个目录下 aaa目录下3.在根目录下创建一个apidoc.json注意0.19.1版本的apidoc中forceLanage得设置为zh_cn 而不是zh-cn{ "name": "测试", "version": "0.0.1", "description": "API文档测试", "title
2021-09-02 22:03:29
141
原创 export与export default的区别
export与export default均可用于导出常量、函数、文件、模块等在一个文件或模块中,export、import可以有多个,export default仅有一个通过export方式导出,在导入时要加{ },export default则不需要输出单个值,使用export default 输出多个值,使用export export default与普通的export不要同时使用事例1.export//one.jsexport const data= "export测试";.
2021-09-01 15:38:42
261
原创 前端node的邮箱验证
npm install nodemailer 下载邮件的依赖包"use strict";const nodemailer = require("nodemailer"); //创建发送文件的请求对象 let transporter = nodemailer.createTransport({ host: "smtp.qq.com",//发送方邮箱 qq 通过lib/well-know/service可查 port: 465,//端口号 secure: true, /
2021-09-01 09:57:16
309
原创 Element中el-table居中问题,align=“center“无效如何解决
<template> <el-table :data="数据源" border style="width: 100%"> <el-table-column prop="date" label="日期" align="center"> </el-table-column> <el-table-column prop="name" label="姓名" align="center"> </el-
2021-08-30 16:51:20
13857
2
原创 Node.js图片上传api
cnpm install express --save 下载express依赖 很重要cnpm install body-parser --save post请求才设置不然接收的req.body为nullrouter是进行一个路由的模块化 方便以后管理const express = require('express')const bodyParser = require('body-parser') const path = require('path')const app = express
2021-08-24 23:05:46
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人