前端
蹦豆蹦
这个作者很懒,什么都没留下…
展开
-
页面元素自动添加了el-message,导致使用this.$message 方法时弹窗不能出现
项目开发过程中,发现一个问题,this.$message方法调用后不报错,但是就是在页面上不能显示,一开始考虑this指向的问题,但是修改了this,发现还是不能正常显示。检查控制台,发现页面elements里面,这个el-message是一直存在,但不显示的,参考了其他正常页面的el-message元素,发现未调用之前,页面中是没有这个el-message元素的,使用后也会在一段时间内消失,所以后续开始找是哪个地方导致了这个 el-message一直展示的。在main.js中查看了message引用,.原创 2022-02-10 17:26:09 · 3310 阅读 · 0 评论 -
H5实现弹框展示
H5实现弹框展示HTML<!-- 打开弹窗按钮 --><button id="myBtn">打开弹窗</button><!-- 弹窗 --><div id="myModal" class="modal"> <!-- 弹窗内容 --> <div class="modal-content"> <div class="modal-header"> <span class="cl原创 2020-12-17 14:50:52 · 7965 阅读 · 2 评论 -
微信公众号内置浏览器缓存清理
微信公众号的H5页面访问后,会缓存js、css等数据,如果更新了脚本文件,前端一段时间内容反复刷新都无法生效。使用过程中,更新代码但是H5不能及时更新,推荐以下几种方式:方法一:微信->“我”->“设置”->“通用”->“微信存储空间”->“管理微信存储空间”,进入到这个页面后即可退出。此方法不会每次都管用,需要多试几次才可能生效。我碰到的情况前几次清缓存都可以正常更新,后来就不管用了,开始寻找另一种方法。方法二:在任意微信聊天中输入“debugx5.qq.com”原创 2020-10-26 14:25:59 · 2967 阅读 · 0 评论 -
button 鼠标滑过button产生霓虹灯效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>霓虹灯效果</title> <style> body { display: flex; flex-direction: column; justify-content: cen原创 2020-08-18 17:59:44 · 257 阅读 · 0 评论 -
仿select下拉选择框
ul,li { list-style: none}.select_contain { font-size: 14px; color: #333; line-height: 38px;}.select_item { position: relative;}.select_tit { margin-right: 20px;}.select_result { width: 70px; line-height: 38px; border: 1px solid #ccc;原创 2020-08-14 16:17:47 · 263 阅读 · 0 评论 -
将url转file类型
function getImageFileFromUrl(url, imageName,callback) { // imageName一定要带上后缀 var blob = null; var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.setRequestHeader('Accept', 'image/jpeg'); xhr.responseType = "blob"; xhr.onloa原创 2020-08-12 17:26:35 · 931 阅读 · 0 评论 -
移动端 关于mui框架中input输入框失焦滚到页面顶部问题
解决方法://input输入框失去焦点 $("input").on("blur", function () { $("body").removeClass("mui-focusin")})原创 2020-08-12 09:46:14 · 843 阅读 · 0 评论 -
file 文件与 base64 互相转化
base64转blobconst base64ToBlob = function(base64Data) { let arr = base64Data.split(','), fileType = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), l = bstr.length, u8Arr = new Uint8Array(l); while (l--) { u8Arr[l] = bstr.charCodeAt(l); }原创 2020-08-12 08:36:26 · 2242 阅读 · 1 评论 -
判断数据为空
// String类型if(a == "" || a == null || typeof a === "undefined"){ // "",null,undefined console.log("为空");} // Array类型if(a.length == 0 || !a.length){ // "",[] console.log("为空");}// Object {}类型if($.isEmptyObject(a)){ // 普通对象使用 for...in 判断,有 key 即为原创 2020-07-30 14:12:14 · 415 阅读 · 0 评论 -
获取url参数 对中文参数进行编码和解码
function getQueryString(key){ var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)"); var result = window.location.search.substr(1).match(reg); return result?decodeURIComponent(result[2]):null;}//使用方式var pstr = encodeURIComponent(JS原创 2020-07-30 14:07:52 · 613 阅读 · 0 评论 -
移动端实现拍照、相册选择功能
移动端实现拍照、相册选择功能<form enctype="multipart/form-data" method="POST" style="display: flex; width: 100%;"> <div style="width: 50%; align-items: center; justify-content: center; display: flex;" onclick="jjimgUpload()" > <div> <input id原创 2020-07-30 10:51:40 · 417 阅读 · 0 评论 -
对日期数据的相关操作
将日期格式(2020-01-01)格式进行大小比较var zyzzrq = '2020-01-01';var zyqsrq = '2021-01-01'var d1 = new Date(zyzzrq.replace(/\-/g, "\/"));var d2 = new Date(zyqsrq.replace(/\-/g, "\/"));if(zyzzrq != "" && zyqsrq != "" && d1 > d2){ //数据查询操作} els原创 2020-07-30 10:49:48 · 186 阅读 · 0 评论 -
CSS 样式
div内容不分行,超出部分隐藏.contentName { white-space:nowrap; overflow:hidden; }原创 2020-03-18 19:50:39 · 64 阅读 · 0 评论 -
清除浮动的方法
清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。当父元素不设置高度时,内部元素不浮动时会撑开父元素,设置浮动时,父元素会变成一条线。清除浮动的方法:1.添加额外标签给谁清除浮动就在其后面添加一个空白标签,标签属性引用clear: both;属性<div class="small"></div> <div class="clear">...原创 2020-01-06 13:47:12 · 100 阅读 · 0 评论 -
session cookie 的区别
session cookie 路径跳转 from_url?aaa=&bbapplication中 LocalStorage 和 SessionStorage 查看缓存信息用法let params = sessionStorage.getItem('projectInfo');params.project_id = row.id;params.project_name = ro...原创 2019-12-30 20:09:56 · 95 阅读 · 0 评论 -
VUE 表格中实现序号的两种方式
表格中实现序号的两种方式方式一<el-table-column type="index" label="序号" align="center" width="50"> <template slot-scope="scope"> <span>{{scope.$index + (page)*size + 1}}</span> </tem...原创 2020-12-17 10:20:32 · 4512 阅读 · 1 评论 -
VUE记录
v-bind: 绑定属性 指令可以简写为 :v-bind:中可以写合法的js表达式v-on: 绑定事件机制 指令可以简写为@vue中可以使用methods定义方法 : methods属性定义了当前vue实力所有可用的方法click、mouseover、等事件都可以被定义跑马灯效果 html分析: 给开始按钮帮i当一个点击事件 @在按钮的事件处理函数中,写相关的代码逻辑: 拿...原创 2019-11-15 17:44:08 · 118 阅读 · 0 评论 -
JS验证
//判断输入内容是否为空 function IsNull(){ var str = document.getElementById('str').value.trim(); if(str.length==0){ alert('对不起,文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称! } ...原创 2019-11-11 18:59:19 · 129 阅读 · 0 评论 -
前端基础知识 -- 04
@什么是web开发?项目开发分为哪几种模式?项目开发分为bs和cs模式,各有什么异同点?JSP+JAVABEAN开发模式特点:该模式将业务逻辑与页面进行分离,在一定程度上增加了程序的可调试性和维护性。缺点:页面将控制与显示集于一身JSP+Servlet+JavaBean开发模式:特点:JSP作为视图,来表现页面,Servlet作为控制器,控制程序的流程并调用业务进行处理,JavaBean...原创 2019-09-04 13:26:52 · 188 阅读 · 0 评论 -
前端基础知识 -- 03
支持面向对象语言@什么是BOM ? 什么是DOM?他们之间有什么关系?DOM:Document Object Model(文档对象模型),用来获取或设置文档中标签的属性,例如获取或设置input表单的value值。就是把文档当做一个对象来看待。BOM:Browser Object Model(浏览器对象模型),用来获取或设置浏览器的属性、行为。例如新建窗口、获取屏幕分辨率、浏览器版本号等。即...原创 2019-09-04 11:39:46 · 105 阅读 · 0 评论 -
前端基础知识--01
HTML:超文本传输协议 标记语言 参考:w3cschoolhead标签body标签标签的类别:display显示属性标签的分类:单标签和双标签标签的属性:Head中常用的标签:title、meta、style、script、link、body中常用标签:a、font标签:@什么叫做块域标签?什么叫做行内标签?有什么区别和特性?标签分为两种等级:行内标签和块级标签块级标签...原创 2019-09-02 08:53:17 · 182 阅读 · 0 评论 -
JavaScript学习--02
@JavaScript和java的关系?以及版本更迭?JavaScript、ES6、typescript、ECMAScriptJavaScript与java 没有关系。JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,他往往被称为Jav...原创 2019-09-02 08:50:37 · 136 阅读 · 0 评论