大前端
有梦想的程序猿
这个作者很懒,什么都没留下…
展开
-
vue js 监听获取电脑及浏览器缩放比例
//方法detectZoom() { let ratio = 0 const screen = window.screen const ua = navigator.userAgent.toLowerCase() if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio } else if (~ua.indexOf('msie')) { if (scree.原创 2021-10-28 14:55:49 · 2462 阅读 · 2 评论 -
Vue form表单对多层数据结构进行表单验证
页面上必须写prop,prop的名称需要和v-model中的数据结构最后一层相同:页面的代码:<Form :model="form.buildingIntroductionVO" :rules="ruleValidate"> <FormItem label="热点内容" prop="texts[0].name2"> <Input v-model="form.buildingIntroductionVO.texts[0].name2" place原创 2021-09-14 15:34:25 · 912 阅读 · 0 评论 -
Vue element-ui 弹框编辑中的input的验证残留清除
对话框右上角的close按钮(before-close:关闭前的回调,会暂停 Dialog 的关闭,function(done),done 用于关闭 Dialog。 location.reload:刷新整个页面)methods: { handleClosable(done){ this.$confirm('确认关闭?') .then(_ => { done(); location.reload();原创 2021-07-28 10:14:06 · 642 阅读 · 0 评论 -
h5显示富文本内容,点击图片获取图片链接
获取到图片链接可以做放大预览功能 实现如下:<div v-html="showContent" @click="showImg($event)"></div>methods方法:// 图片点击放大showImg(e) { console.log('eeee',e.target.currentSrc) if (e.target == 'img') { console.log(e.target.currentSrc) //获取到点击的富文本图片 }原创 2021-07-14 15:28:26 · 673 阅读 · 0 评论 -
上传视频通过url获取视频的宽高和时长
<elUpload class="btn-local-upload inline-box" ref="picUpload" :limit="1" list-type="picture-card" :show-file-list="false" :on-change="handleChange" :action="actionParas"> <i class="el-icon-plus"></i></elUpload>&.原创 2021-05-21 16:54:11 · 1436 阅读 · 0 评论 -
Vue页面已经渲染完图片再获取图片的宽高
<el-image :src="item.filePath" ref="imgSize" @onload="imgload"></el-image><span >{{item.imageWidth }}*{{item.imageHeight }}</span> //展示图片的宽高//js // 获取图片宽高,再把宽高值插入原来的数组 this.imgload() 这个方法在页面图片渲染完后调用imgload(){ console.log('.原创 2021-05-21 16:34:01 · 1956 阅读 · 0 评论 -
获取远程视频第一帧图片做封面
获取远程视频第一帧图片做封面# 获取远程视频第一帧图片做封面```<template> <div class="articleList"> <video :src="videoSrc" crossOrigin="anonymous" controls="controls" width="500" height="400" id="videofile"></video> <p>1</p>原创 2021-05-21 16:00:09 · 350 阅读 · 0 评论 -
vue中父组件通过props传值给子组件,子组件中获取到props里面的值
最近项目需要,从父组件传值到子组件,子组件通过props获取父组件传过来的值在父组件定义要传值的属性://父组件定义要传的属性 :title="title" <dopic :item="item" v-for="(item, index) in DopicList" :key="index" :title="title" :typeList="typeList"></Topic>//data中定义值data(){ return{ title原创 2021-03-22 16:36:24 · 5717 阅读 · 0 评论 -
JS截取URL中最后一个斜杆前(后)的内容
JS获取URL中最后一个斜杠前面的内容var url = window.location.href; //要切割的链接var index = url.lastIndexOf("\/");str = url.substring(0,index+1);console.log(str);JS获取URL中最后一个斜杠后面的内容var url = window.location.href;var index = url.lastIndexOf("\/");str = url.substri转载 2021-03-20 16:00:18 · 2641 阅读 · 0 评论 -
JS获取特殊字符前面的字符串
js获取特殊字符前面的自字符串比如获取特殊字符 “||”前面的字符串var a = "aaa551||cbbb||161541116||F78E2434442233";var b = a.split("||")[0]; //比如获取第一个||前面的字符串console.log(b)//打印的b值是aaa551...原创 2021-03-11 15:49:12 · 2061 阅读 · 0 评论 -
把值存储到浏览器上面的sessionStorage,和取sessionStorage的值
把值传到浏览器上面的sessionStorage,和取sessionStorage的值存储://拿到要存储的值appopenidvar appopenid = appopenid (后台返回拿到的)sessionStorage.setItem('appopenid', appopenid)取值://拿想要取的值let appopenid= sessionStorage.getItem('appopenid')...原创 2021-02-07 16:48:05 · 1027 阅读 · 0 评论 -
轮播试的视频,滑动暂停上一个播放视频
小程序实现轮播式的视频,滑动下一个视频,上一个视频暂停的实现,重要属性:wx.createVideoContext()//监听轮播滑动的事件<swiper bindchange="swiperChange"></swiper>// 滑动后暂时视频播放swiperChange(e) { //只有1和4有视频的 let arr= ["1","4"] //停止正在播放的视频 arr.forEach(element => { ..原创 2021-01-26 11:10:48 · 1091 阅读 · 0 评论 -
小程序判断是否有上一页
小程序判断是否有上一页做法:重点是用getCurrentPages()这个方法//返回按钮<view bindtap='navback'></view>//js方法navback(){ let pages = getCurrentPages(); if(pages[pages.length - 2]){ //如果有上一页,就返回上一页 wx.navigateBack({//返回 delta: 1 }) }e原创 2021-01-26 10:39:14 · 3049 阅读 · 0 评论 -
vue 中判断后台返回的url是否有问号,如果没有就先加问号再加参数
最近在项目中遇到后台返回的url,要在前端加参数,再跳转,但再加参数之前要先判断url是否有问号,如果没有就先加问号再加参数,做法如下所示:主要用到indexOf判断if(res.data && typeof res.data === 'string'){ var url=res.request.responseURL;//返回的url url += (res.request.responseURL.indexOf("?") == -1 ? "?" : "&")原创 2020-08-11 10:59:03 · 2139 阅读 · 0 评论 -
小程序实现动态选择类名
在做项目的时候在同一个点击时间,但要控制两个不同的类名,这就要用到动态选择类名,实现情况如下:<viewclass="tabbox"wx:if="{{tabs[0].isActive?'gobox':'gobox2'}}"></view>通过tab[0]isActive 控制显示的gobox样式和gobox2样式...原创 2020-07-24 16:48:04 · 645 阅读 · 0 评论 -
ios手机无法识别带横杆的时间格式的解决方法
问题:在做项目过程中,涉及到时间倒计时,刚开始用的时间格式是带横杆的时间格式,如2020-07-12,在安卓手机还是可以识别的,但在苹果手机识别不了这中时间格式。解决方法:把时间横杆格式的转换为斜杆格式的,如2020-07-12转换为2020/07/12,就解决了that.data.liveStartTime是后台返回的时间,是横杆格式的...原创 2020-07-24 16:33:52 · 1055 阅读 · 0 评论 -
无法加载文件 C:\Users\陈霞\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/g o.microsoft.com/fwl
在创建Vue项目时出错:无法加载文件 C:\Users\陈霞\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies,解决方法:1、切换管理员的身份,运行PowerShell;2、运行set-ExecutionPolicy RemoteSigned命令,选择Y或者A,就可以打开禁止了;...原创 2020-05-13 15:24:13 · 519 阅读 · 0 评论 -
vue项目 报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465 net::ERR_
在做vue项目时,突然就报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465 net::ERR_CONNECTION_TIMED_OUT这个错误网上找到的原因说是:sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双...原创 2020-03-23 20:38:13 · 11651 阅读 · 0 评论 -
前端获取系统当前时间,且格式为“yyyy-MM-dd hh:mm:ss”
最近在做vue项目,需要前端获取当前系统的时间然后传给后台,且格式是yyyy-MM-dd hh:mm:ss代码如下: var date = new Date(); var year = date.getFullYear(); //月份从0~11,所以加一 var dateArr = [date.getMonth() + 1,date.getDate(),...原创 2020-03-12 22:30:54 · 4862 阅读 · 0 评论 -
如何把后台返回的初始值显示在Select的选择框上
oldtableData是后台返回的数组,然后我在过程中遇到最大的问题就是类型不一致;因为我数据库定义的type是int,然后在value那里把1和0都加了引号,变成String型,所以死活也对应不上;还有最后别把option的数据写死,在百度时看到的https://ask.csdn.net/questions/687190效果:...原创 2020-03-09 00:15:02 · 1108 阅读 · 0 评论 -
'wx' is not defined no-undef
在h5页面中,因为要从h5页面跳转到小程序页面,所以就要引入微信的jssdk,前提动态引入微信的jssdk // 动态加载js脚本文件 h5跳转小程序 还需要加载一个微信的jssdk const script = document.createElement('script') script.type = 'text/javascript' s...原创 2020-02-28 00:25:13 · 12527 阅读 · 0 评论 -
vue报错---“Newline required at end of file but not found ”
在vue项目中出现报错:Newline required at end of file but not found原因是vue项目中打开了eslint代码规范,要在js 、css 的结束代码加一行空格就可以了原创 2020-02-16 22:59:22 · 602 阅读 · 0 评论 -
Vue报错——“Trailing spaces not allowed”
在vue项目中出现报错:“Trailing spaces not allowed” 如下:原因是vue项目中打开了eslint代码规范,所以出现不能多余的空格出现:把相对应的空格去掉就可以了。...原创 2020-02-16 22:55:36 · 1131 阅读 · 0 评论 -
修改Ant Design 组件库里面的Table里面的滚动条的样式
想修改Ant Design组件库里面Table里面的滚动条的样式:.userlist{ clear: both; height: 82%; width:94%; padding: 20px; overflow: hidden; overflow-y: scroll;}.userlist::-webkit-scrollbar { width: 4px; ...原创 2020-01-15 19:24:39 · 4533 阅读 · 0 评论 -
修改Ant Design组件库里面的内置样式
因为项目要用到Ant Design 组件库,但因为想修改成自己定义的样式,直接修改不行,要在修改的样式名外面添加一层:global,里面是要修改的样式名。如下所示:...原创 2020-01-15 19:12:17 · 2913 阅读 · 0 评论 -
React 在antd项目中引用阿里巴巴字符体
在antd项目中遇到要用阿里巴巴的字符体,下面是简单介绍怎么引用:scriptUrl地址是iconfont.cn项目在线生成的js地址,下面说说如何生成js地址:1、现在阿里巴巴图标官网选图标,然后加入购物车2、选添加进项目,如果没有项目就新建项目,按确定:3、然后跳到图标管理的页面,如下:4、将这些图标下载至本地:5、然后点击上传图标至项目:...原创 2019-12-24 19:30:52 · 504 阅读 · 0 评论 -
Cannot convert undefined or null to object
在React时用Object.keys的时候报错:Cannot convert undefined or null to object原因是:1、Object.keys()中传错了参数2、由于undefined和null无法转成对象,所以如果它们做为Object.assign()的参数(只有一个参数),也会报错。我的原因是在Object.keys()只有一个参数,而且后台传回来...原创 2019-12-09 15:32:47 · 77431 阅读 · 0 评论 -
H5和CSS3简单画个盒子
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>画个盒子</title> <style> #box{ width: 200px; height: 200px; background-color: d...原创 2019-04-20 10:19:30 · 842 阅读 · 0 评论 -
H5+CSS3实现动画小心心
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画小心心</title> <style> #father{ width: 200px; height: 200px; /*background: o...原创 2019-04-20 10:29:35 · 1058 阅读 · 1 评论 -
H5+CSS3实现简单的列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>列表</title> <style> ol{ border: 1px solid ; } /*包含选择器 空格*/ ol li{ borde...原创 2019-04-20 10:50:54 · 3449 阅读 · 0 评论 -
H5+CSS3实现简单的导航条
效果:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>导航条</title> <style> .btns{ /*border: black solid 1px;*/ background-color...原创 2019-04-20 10:58:03 · 8131 阅读 · 1 评论 -
CSS模拟Tab事件
效果:当鼠标悬空在不同的按钮上,显示的图片就不一样。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS模拟Tab</title> <style> ul,li{ padding: 0; margi...原创 2019-04-20 11:15:02 · 266 阅读 · 0 评论 -
H5+CSS3实现简单表情包
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>冷漠</title> <style> #box01{ width: 334px; height: 636px; background: black;...原创 2019-04-20 11:36:52 · 1985 阅读 · 0 评论 -
Sublime-text3解决There are no packages available for installation问题方案
想安装插件时出现如下问题:分析了一下发现有个文件channel_v3.json无法读取,该文件是下载插件是必须调用的一个文件,且为远程网络调用,由于某些你懂的原因,导致我们这边无法正常访问,所以导致软件报错。1、首先将channel_v3.json文件下载到本地,建议放在sublime安装目录,以防止哪天被误删了。提供下载地址:链接:https://pan.baidu.com/...原创 2019-07-01 18:55:03 · 228 阅读 · 0 评论 -
webpack模块工具的安装和使用
1、先创建一个目录(名字尽量英文),我的:web2、进入web文件然后按住shift+鼠标右键,点打开命令行3、初始化,用命令:npm init -y ,在web文件里会生成一个package.json文件 4、接下来进行安装,命令:npm install webpack --save-dev 没有报错就安装成功5、接着安装,命令:npm install ...原创 2019-06-28 19:38:57 · 282 阅读 · 0 评论 -
微信小程序-文字超出限制如何在末尾加省略号
小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...)实现代码如下: font-size: 16px; display: -webkit-box; overflow: hidden; //超出一行文字自动隐藏 text-overflow: ellipsis; //文字隐藏后添加省略号 word-wrap:b...原创 2019-08-04 20:38:34 · 905 阅读 · 0 评论 -
Vue npm run dev 运行项目时报!!vue-style-loader!css-loader?
在做vue项目时,运行npm run dev时一直报一个!!vue-style-loader!css-loader?Module build failed: TypeError: this.getResolve is not a function at Object.loader (E:\appEx\PreResearch\orchestrator\topology\node...原创 2019-10-11 19:47:52 · 1930 阅读 · 0 评论 -
前端JS框架
引言:如果你是一个前端的追求者,想要立即开始学习前端知识,那你就先来了解了解前端除了基础H5,css,js还有哪些内容 前端js框架有哪些一、前端UI框架1.bootstrap英文官方地址:http://getbootstrap.com中文地址:www.bootstrapcss.com特点:简洁、直观的前端开发框架...转载 2018-06-19 19:29:11 · 317 阅读 · 0 评论