前端
DanceDonkey
这个作者很懒,什么都没留下…
展开
-
el-dialog组件隐藏时直接销毁组件
使用el-dialog组件时,不通过v-model绑定的布尔类型的变量来控制是否隐藏展示,而是在需要不展示的时候直接销毁组件。在组件上标识 v-if 可控制组件隐藏时直接销毁dialog。原创 2022-10-19 13:26:53 · 1760 阅读 · 0 评论 -
富文本编辑器wangEditor回显问题
这个问题在github也提issues了,目前靠谱的解决方法为在关闭dialog时同时销毁富文本编辑器,让dialog与富文本编辑器同时v-if绑定同一个变量即可。原创 2022-09-30 14:04:47 · 6588 阅读 · 2 评论 -
基于Vite3.0创建Vue3项目
还是要和webpack打包方式区别一下的。这里演示一下如何使用Vite3.0创建Vue3.0项目,以及生产与开发环境的环境变量配置。以 import.meta.env.xxxx 的方式来读取环境变量。原创 2022-09-29 11:33:50 · 603 阅读 · 0 评论 -
Vue使用富文本编辑器wangEditor(详细)
富文本编辑器中的图片上传,视频上传需要通过editorConfig配置项来配置后端的上传地址、参数名、token等等。wangeditor5中有一些es6语法webpack可能无法解析,需要下载解析库并配置webpack。查看官方源码,引入如下js与css,这里最好还是下载下来引入静态文件方式,方式cdn服务器挂掉。wangeditor编辑器生成的html是纯文本格式,需要自己手动写样式。样式直接引入wangeditor提供的样式即可。webpack.base.conf.js配置。引入后直接调用API。原创 2022-09-28 11:36:28 · 3500 阅读 · 0 评论 -
Cookie跨域以及Cookie共享问题
解决跨域以后,如何允许跨域请求携带cookie,例如访问B的接口,默认情况下是不允许带cookie的,此时需要设置axios的withcredentials的属性为true,告诉浏览器在访问B网站时,将B网站的cookie带上,此时光前端设置还不行,还需要后端在响应头中添加 allow-withcredentials = true,这样就可以保证跨域请求也可以携带cookie。在站点A下面访问B域名的接口,那么这是一个跨域请求,如果不做处理,此时这个请求就跨域了,浏览器在接收到响应以后会直接报错。原创 2022-09-14 15:58:45 · 5708 阅读 · 0 评论 -
ElementPlus表单校验无效
elementplus表单校验无效。原创 2022-07-23 17:15:31 · 959 阅读 · 0 评论 -
elementui单元格内容鼠标移动展示
<el-table-column prop='name' show-overflow-tooltip ></el-table-column>原创 2022-02-23 13:47:35 · 771 阅读 · 0 评论 -
top超出元素高度时被hidden
通过margin、top、left、transform等方式设置元素偏移时,如果超出了元素超出了父元素的宽高,同时父元素设置了overflow:hidden,则元素被hiddenmargin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-01-12 15:58:18 · 283 阅读 · 0 评论 -
Dom、BOM常用方法总结
Domdom查询 document.getElementById() //根据id查询,只返回查到的第一个 document.getElementsByTagName() //根据标签名查询,返回类数组 document.getElementsByClassName() //根据类名查询,返回类数组 document.querySelector() //根据css选择器查询,只返回查到的第一个 document.querySelectorAll() //根据css选择器查询,返回类原创 2021-12-30 22:47:10 · 496 阅读 · 0 评论 -
JS中Date与Math类常用操作
Date类常用方法 let date = new Date(); console.log('当前时间戳',Date.now()) console.log('当前年份',date.getFullYear()) console.log('当前月份',date.getMonth() + 1) //月份要 + 1 console.log('当前周几',date.getDay()) //周日是 0 console.log('当前日期',date.getDate()) //每个月的第几天.原创 2021-12-22 22:34:31 · 484 阅读 · 0 评论 -
JS构造函数与原型对象
构造函数根据函数的调用方式不同,分为普通函数和构造函数,当作为构造函数使用时,会执行以下几个步骤。立即创建一个新的对象(这个对象属于该构造函数类)将这个对象设置为函数中的参数 this ,在构造函数中可以引用新创建的对象。执行函数中的代码最后将创建的对象返回。...原创 2021-12-20 16:25:44 · 515 阅读 · 0 评论 -
JS变量与函数提升
在全局作用域中,声明的变量和函数都会作为window对象的属性和方法。 function f(){} a = 10 console.log(window.f) console.log(window.a)被var声明过的变量对进行提前声明 console.log(a) fun() var a = 10 var fun = function (){ console.log('fun...') }此时的代码相当于 var a = undefin原创 2021-12-19 20:58:16 · 380 阅读 · 0 评论 -
Flex实现列表元素垂直水平居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin: 0; padding: 0; list-style: none; } ul{ margin: 100px auto; wi原创 2021-12-16 22:23:18 · 378 阅读 · 0 评论 -
Flex布局详解
弹性容器display:flex或者display:inline-flex的元素此时就是一个弹性容器。而这个弹性容器的直接子元素为弹性项。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .flexCon{ displ.原创 2021-12-16 21:57:43 · 408 阅读 · 0 评论 -
元素实现在父元素中实现垂直水平居中的几种方式
方式一:使用绝对定位的方式,将绝对定位的元素top,bottom,right,left都设置为0,然后margin值设置为auto。此时margin的值浏览器就会自动计算,以使得满足定位的包含块的宽度和高度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><st.原创 2021-12-14 21:25:41 · 1121 阅读 · 0 评论 -
chrome播放音频报错 play failed because....
打开chrome浏览器设置界面,在隐私与安全设置里面找到网站设置找到声音这一项,选择允许即可。不同版本的chrome浏览器可以稍有区别,从隐私设置里面找一下就可以了。原创 2021-12-10 14:33:37 · 1961 阅读 · 0 评论 -
关于元素绝对定位时的auto问题以及绝对定位元素在父元素中水平垂直居中
首先说一下绝对定位元素的特点绝对定位的元素会脱离文档流,不再占有原来的位置绝对定位的元素会提升层级绝对定位的元素是相对于最近的开启了定位的包含块进行定位的,如果没有包含于该元素的开启定位的元素,则相对于html定位。绝对定位会改变元素的性质,宽高默认都由内容撑开。可通过left,right,top,bottom设置元素的偏移量开启了绝对定位的元素但没有设置偏移量,则元素位置不会改变。关于绝对定位的元素的auto问题绝对定位的元素在水平方向上需要满足该等式:lef原创 2021-12-06 21:21:50 · 1368 阅读 · 1 评论 -
CSS3BFC
BFC为元素的隐含属性,开启了BFC的元素有一下特点不会被浮动的元素覆盖开启BFC的元素子元素和父元素的外边距不会重叠开启BFC的元素会包含住浮动的子元素如何开启BFCfloat将元素设置为行内块元素将元素的overflow设置为非visiable...原创 2021-12-04 11:10:20 · 227 阅读 · 0 评论 -
盒模型设置margin和padding的区别
test元素是个div,宽高100,div后一个兄弟元素为span,如何让div和span上下间距10px?为div设置一个margin-bottom 10px为div设置一个padding-bottom 10px这两中方式都可以让div和span上下间距10px。那么这两种方式有什么区别?如果设置的值margin-bottom,那么相当于是给div这个盒模型外部设置的边距,那么此时盒模型内部的宽高是100*100,那么此时给div设置背景的话是只有100个像素的,margin不属于盒模型内部.原创 2021-12-03 17:26:03 · 881 阅读 · 0 评论 -
关于块元素布局时的auto问题
文档流中的块元素布局(margin-left) + (border-left) + (padding-left) + (width) + (padding-right) + (border-right) + margin-right = 父元素的内容区的宽度(父元素的width)其中,这七个值中,都可以省略不写,width省略不写为auto,其他六个值省略不写为0。示例代码<!DOCTYPE html><html lang="en"><head> .原创 2021-12-03 11:10:42 · 698 阅读 · 0 评论 -
Vue3中的路由以及钩子函数使用
Vue3路由的使用安装vue-routernpm install vue-router@4.0.0-beta.13package.json{ "name": "vue3-life", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build" }, "dependencies": { "vue": "^3.2.0-beta.7", "vue-router":原创 2021-11-23 22:10:33 · 5829 阅读 · 0 评论 -
JS事件冒泡
示例代码<!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.原创 2021-11-23 16:31:11 · 88 阅读 · 0 评论 -
基于Axios和Jquery的文件上传
Jquery上传jquery文件时,后端好像并没有经过SpringMVC处理,没有被封装成一个MultiPartFIle对象,可通过原生的Servlet API request.getInputStream()获取。至于为什么没被SpringMVC封装成MultipartFile对象目前还没有研究透彻。可能是请求内容类型没有设置成 multipart/form-data。下面是jquery上传文件的代码示例,文件名,文件大小等参数可通过拼在url后面使用request.getParameter()获取。原创 2021-11-19 20:27:28 · 670 阅读 · 0 评论 -
Elementui设置样式不起效
在使用ElementUI时,其渲染的dom元素有时是在模板外的,虽然代码写在了vue文件对用的模板内,但elementui在渲染的时候可能会渲染到和body一级。如这种弹窗,有时候想给这种el-dialog加个样式,发现是不起效的,原因是在写样式的时候加了scoped,也就是这些样式只对本组件内的dom元素有效,虽然el-dialog代码写在了本组件里,但真正弹窗渲染的时候,elementui不一定是在本组件渲染,所以此时样式就失效了。此时就需要写到全局样式里了。...原创 2021-11-14 20:10:08 · 5301 阅读 · 0 评论 -
elementui日期选择组件修改日期
<!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-11-03 11:29:19 · 541 阅读 · 0 评论 -
Vite创建vue项目
npm init vite-app 项目名cd 目录npm install原创 2021-08-27 21:11:12 · 76 阅读 · 0 评论 -
浏览器页面刷新
浏览器页面跳转刷新行为会触发窗口跳转,并向服务器发送请求。如form表单提交、a标签超链接跳转,window.location.href等行文都会触发窗口的刷新,而窗口刷新后根据服务器返回的内容类型进行解析并渲染到页面,如text/html;application/json;image/jpeg等。如果是ajax请求,则不会触发页面刷新,则浏览器窗口就不会重新刷新,从而向服务器发送请求刷新页面。...原创 2021-08-25 16:40:45 · 1098 阅读 · 0 评论 -
关于Jquery与Axios发送ajax请求时的请求体问题
jqueryjquery发送post请求时,会把data中的请求参数以查询字符串的方式封装在请求体中,如data:{name:"zs",age:18}则此时请求体中的数据为name=zs&age=18,后端通过@RequestBody String json 可以获取请求体中的数据,但是是查询字符串方式的,不是json格式的,此时也可以通过request.getParmeter(“name”)的方式获取。如何用jquery封装JSON格式的请求体后端如果想直接将请求体中的数据转为业务模原创 2021-07-30 17:27:55 · 477 阅读 · 0 评论 -
Vue3中父子组件传值以及方法调用
子组件接受父组件传的值子组件通过生命props属性来接收父组件传递的值//子组件<div>{{msg}}</div>export default { name:"child", props:{ msg:{ type:String, required:true, default:"" } }, setup(props,context){ return { msg:props.msg } }}//父组件<!--.原创 2021-07-19 15:50:12 · 6135 阅读 · 0 评论 -
axios实现同步请求
如何实现ajax请求的同步?通过jquery发送,将async属性设置为false,这样就会发送同步请求在axios中,所有的请求都是异步发送的。所以单独用axios是实现不了同步的,需要结合async与await关键字使用。var data = {}axios.get("./data1.json") .then(res => data = res.data)console.log(data)如果我们的代码是这个顺序,则data还是个空对象,是获取不到的。async 与原创 2021-07-17 10:07:07 · 40534 阅读 · 3 评论 -
mybatis动态sql问题
List<User> selectUserByIf(String age); select * from user where 1 = 1 and <if test="age == 0"> </if>mybatis的动态sql在进行if判断时如果出现 xxx == ‘0’ 或者 xxx == 0的情况,mybatis会把xxx的值转为int类型比较,就是说等号两边若出现了数字型,则mybatis就会把另一边也转为数字。所以这个age参数如果传的是一个非数字类原创 2021-07-17 09:07:50 · 184 阅读 · 0 评论 -
浅谈对Promise的使用
Promise简单上手Promise对象的出现用于解决传统的ajax请求嵌套回调的问题。Promise对象通过new 关键字创建,构造函数需要传递一个函数作为参数,并且该函数需要两个形参(resolve和reject)。如下 let p = new Promise((resolve,reject) => { })promise对象共有三种状态为成功、失败和触发。通常我们会在promise的构造函数中执行ajax查询,ajax查询成功则调用resolv.原创 2021-07-16 17:27:24 · 148 阅读 · 1 评论 -
JS日期格式化
function dateFormat(fmt, date) { let ret; const opt = { "y+": date.getFullYear().toString(), // 年 "m+": (date.getMonth() + 1).toString(), // 月...转载 2021-05-25 15:11:53 · 278 阅读 · 0 评论 -
JSON反序列化异常:out of VALUE_STRING token
前端给后端传递json数组时,后端的形参名要与前端的对应。后端形参前端形参原创 2021-03-07 12:23:30 · 5733 阅读 · 0 评论 -
vue3中的reactive函数声明数组
vue3中reacitve函数如何声明一个响应式数组,如以下案例<template> <div> <div v-for="item in arr" :key="item"> {{item}} </div> <button @click="change">change</button> </div></template><scr原创 2021-02-23 14:33:21 · 33675 阅读 · 7 评论 -
vue3数据回显与双向绑定
vue3版本中是实现数据绑定为通过新的ref与reactive函数实现<template> <div> <a-button type="primary" @click="getData"> 点击查询下一个 </a-button> <br /> <a-button type="primary" @click="print"> 打印表单数据 </a-button> <a-form-m原创 2021-02-08 10:39:40 · 2554 阅读 · 0 评论 -
webpack使用示例
一、初始化一个node项目npm init -y原创 2021-01-29 13:35:53 · 225 阅读 · 0 评论 -
CommonJS与ES6模块化规范
CommonJS规范1. 暴露单个 关键字 exports.xxx = xxxconst sum = (a,b) => { return a + b}exports.sum = sum2. 导入单个 require()const util = require("./a")console.log(util.sum(20,50))导入单个时,util对象相当于exports对象,exports.sum = sum,相当于给exports这个对象添加了一个函数,函数名为sum,当导原创 2021-01-27 15:02:33 · 108 阅读 · 0 评论 -
babel简单使用
全局安装babelnpm install -g babel-cli初始化一个node项目node init -y项目安装es2015的语法转换规则npm install --save-dev babel-preset-es2015创建babel配置文件 .babelrc{ "presets":["es2015"], "plugins":[]}转换单个文件babel 源文件目录/源文件 -o 打包目录/转换后的文件如果目录不存在要先创建打包整个目录.原创 2021-01-27 13:41:12 · 194 阅读 · 0 评论 -
axios的实例创建与应用
一、使用axios发送Ajax请求<!--引入axios,就好比引入jquery一样--><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script> //使用axios发送一个简单的http请求 axios.get(url) .then(response => { //ajax请求执原创 2021-01-12 15:25:00 · 2627 阅读 · 1 评论