前端
前端小li
一壶茶,一包烟,一个Bug改一天。
展开
-
Element-ui input输入框限制输入数字后,当输入非数字后v-model失效
Element-ui input输入框限制输入数字后,当输入非数字后v-model失效原创 2022-11-15 14:59:06 · 1275 阅读 · 0 评论 -
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 · 2205 阅读 · 0 评论 -
html实现简单的目标树
目标树原创 2022-06-24 11:02:10 · 247 阅读 · 0 评论 -
JS获取DOM节点的几种方式
js获取dom节点原创 2022-06-06 10:26:11 · 961 阅读 · 0 评论 -
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 · 91 阅读 · 0 评论 -
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 · 361 阅读 · 0 评论 -
vue在初始化时设置滚动条位置
在在created或者mounted生命周期中 始终无法改变滚动条的位置但是使用updated钩子函数就可以updated () { this.$nextTick(() => { this.$refs.container.scrollTop = 500 }) }$nextTick 方法是在下次DOM更新循环结束之后执行延迟回调。...原创 2022-04-12 09:20:25 · 2999 阅读 · 2 评论 -
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 · 5106 阅读 · 0 评论 -
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 · 516 阅读 · 0 评论 -
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 · 882 阅读 · 0 评论 -
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 · 517 阅读 · 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 · 12796 阅读 · 9 评论 -
HTML导出pdf的方式
导出网页为PDF的方法原创 2021-12-07 10:42:53 · 1023 阅读 · 1 评论 -
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 · 792 阅读 · 0 评论 -
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 · 977 阅读 · 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 · 1651 阅读 · 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 · 1097 阅读 · 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 · 227 阅读 · 0 评论 -
自定义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 · 1997 阅读 · 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 · 628 阅读 · 0 评论 -
HTML5新语义化标签
标签介绍header — 页眉main — 主体nav — 导航article — 独立的内容section — 一个区域,跟div的功能和语义是一样的aside — 辅助信息的内容footer — 页脚figure — 描述图像或视频figuretion — 描述图像或视频的标题部分hgroup — 标题组合普通的标签缺点1.不利于SEO搜索引擎对页面内容的抓取2.文档结构定义不明确于是HTML5出现,解决上述问题,专门添加页眉、页脚原创 2021-09-23 11:28:18 · 241 阅读 · 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 · 1375 阅读 · 0 评论 -
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 · 6986 阅读 · 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 · 155 阅读 · 0 评论 -
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 · 271 阅读 · 0 评论 -
前端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 · 355 阅读 · 0 评论 -
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 · 14146 阅读 · 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 · 107 阅读 · 0 评论 -
Node.js跨域处理 服务器代理
前端解决跨域问题协议 域名 端口号一致corsjsonp代理 服务器请求没有跨域问题服务器代理,就是自己给自己的服务器发送请求,自己的服务器在给对方的服务器发送请求,因为服务器之间的请求是没有跨域的。获取数据的一个请求方法function doUpload(){ $.get('http://localhost:3000/getdata',{},(data)=>{ console.log(data) //发起一个服务区请求 请求跨域的服务器 //re原创 2021-08-22 19:59:06 · 258 阅读 · 0 评论 -
vue中导出excel
//导出Excel //请求 export function excelcash(data) { return request({ url: '地址', method: '请求', data: 数据, responseType: 'blob' }) } //方法 handleExportExcel(){ //console.l原创 2021-07-13 15:40:45 · 167 阅读 · 0 评论 -
vue中 this.$set的用法
Vue.set( target , key , value)的使用target: 要更改的数据源(可以是一个对象或者数组)key 要更改的具体数据 (索引)value 重新赋的值当点击change按钮的时候,调用this.$set方法,成功显示第三个属性,不然视图没有更新<template> <div id="app"> <div v-for="item in list" :key="item.id">{{item.name}}</div>原创 2021-07-07 14:47:41 · 397 阅读 · 0 评论 -
Vue判断输入框中的数据是不是正则
<template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="你的答案"> <el-input v-model="form.name" placeholder="请输入你的答案"></el-input> </el-form-item> <el-fo原创 2021-07-06 10:31:29 · 641 阅读 · 0 评论