- 博客(50)
- 收藏
- 关注
RSS订阅原创 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
488
1
原创 Element-ui input输入框限制输入数字后，当输入非数字后v-model失效
Element-ui input输入框限制输入数字后，当输入非数字后v-model失效
2022-11-15 14:59:06
1185
原创 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
1865
原创 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
528
原创 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
65
原创 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
327
原创 vue在初始化时设置滚动条位置
在在created或者mounted生命周期中 始终无法改变滚动条的位置但是使用updated钩子函数就可以updated () { this.$nextTick(() => { this.$refs.container.scrollTop = 500 }) }$nextTick 方法是在下次DOM更新循环结束之后执行延迟回调。...
2022-04-12 09:20:25
2907
2
原创 Element-ui Popconfirm气泡确认框的确认及取消事件不生效
给组件绑定@confirm="confirm"时，发现点击确定按钮时，并不能触发confirm事件。实际应该绑定的是onConfirm事件和onCancel事件
2022-04-11 14:39:21
1919
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
375
原创 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
4283
原创 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
1845
原创 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
343
原创 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
844
原创 queryselectorAll与getElementByClassName
因为classname拿到的不是nodelist他是HTMLcollection 他没有forEach方法
2022-02-28 14:36:36
212
原创 element中切换时间日期选择器时下拉框偏移到左上角的问题
第一次点击都是正常的，但是第二次直接偏移到左上角。解决方案：在el-date-picker里面加上 key=“XXXX”即可
2022-01-21 10:39:54
1901
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
469
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
12339
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
687
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
760
原创 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
909
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
1547
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
1023
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
209
原创 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
118
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
1917
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
576
原创 HTML5新语义化标签
标签介绍header — 页眉main — 主体nav — 导航article — 独立的内容section — 一个区域，跟div的功能和语义是一样的aside — 辅助信息的内容footer — 页脚figure — 描述图像或视频figuretion — 描述图像或视频的标题部分hgroup — 标题组合普通的标签缺点1.不利于SEO搜索引擎对页面内容的抓取2.文档结构定义不明确于是HTML5出现，解决上述问题，专门添加页眉、页脚
2021-09-23 11:28:18
216
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
1290
原创 MongoDB的安装
1、MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的 高性能数据存储解决方案。2、MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。简单来说，它不是通过表格(关系)存数据，而是通过文档和集合来存数据。3、MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象，但是在这里它不叫 json，叫 bso
2021-09-10 10:19:00
79
原创 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
6867
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
130
原创 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
240
原创 前端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
284
原创 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
12879
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
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人