前端
youngjqz
这个作者很懒,什么都没留下…
展开
-
vue项目打包之后在本地运行
live-server 是一款 npm 工具,首先需要安装yarn add live-server -S命令行常用配置表在项目中找到package.json 文件,修改 scripts 部分"live-serve": "live-server ./dist --port=8081",先执行 build 生成 dist 文件,接着运行 live-serve 即可yarn run live-serve运行成功...原创 2020-11-23 20:58:29 · 1623 阅读 · 0 评论 -
使用 rem 布局 实现H5页面自适应
第一步建立 resetSize.jsfunction setHtmlFontsize() { const htmlwidth = document.documentElement.clientWidth || document.body.clientWidth; const html = document.getElementsByTagName("html")[0]; html.style.fontSize = htmlwidth / 37.5 + 'px';}setHtmlFonts原创 2020-11-06 19:03:36 · 376 阅读 · 0 评论 -
JavaScript实现手机号码 3-4-4格式,并控制新增和删除时光标的位置
JavaScript实现手机号码 3-4-4格式手机号实现3-4-4格式相对来说还是比较简单的,监听input事件,实时的获取手机号码,然后根据手机号码的长度做截取和拼接的操作,即可实现手机格式的处理,实现格式的处理之后,我们还需要支持在指定光标进行新增和删除// An highlighted block <input ref="inputRef" class="life-input" v-model="value"原创 2020-06-01 10:29:04 · 851 阅读 · 0 评论 -
H5 实现 弹出弹层的同时阻止页面滚动
H5 实现 弹出弹层的同时阻止页面滚动通常自己写弹窗的时候,希望弹出弹窗后,弹窗下面的内容可以阻止滚动,优化体验效果;下面的代码可以实现let y;class lock{ static afterOpen() { // 弹出弹窗,设置body 的 position 为 fixed, 阻止body的滚动 Y = document.scrollingElement.scroll...原创 2020-03-11 15:39:00 · 775 阅读 · 0 评论 -
H5 监听手机返回事件
1.使用popstate监听返回事件//在mounted 里面挂载 popstate 事件mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, '#1'); window.addEventLis...原创 2019-11-26 13:55:34 · 3827 阅读 · 0 评论 -
el-input的使用之坑
el-input使用.native在使用vue+element的项目中,使用el-input实现点击enter键触发事件的代码如下 <el-input placeholder="请输入礼盒券码" prefix-icon="el-icon-search" @keyup.enter.native='getGoods(currentType)' v-model...原创 2018-11-14 16:19:05 · 25113 阅读 · 0 评论 -
使用element的时间选择器--时间格式转换
时间格式转换submit() { console.log(this.formatDate(this.form.date1[0])); //this.form.date1[0]) 为传入的时间 }, formatDate(date) { if (typeof date == "string") { return this.format...原创 2018-11-21 16:18:34 · 6125 阅读 · 0 评论 -
table 行合并
getSpanArr(data) { this.spanArr = []; if (data === null) { return; } for (var i = 0; i < data.length; i++) { if (i === 0) { this.spanArr.push(1);...原创 2019-01-30 15:28:24 · 956 阅读 · 0 评论 -
JavaScript获取指定的某一天的时间
getDay(day){ var today = new Date(); var targetday=today.getTime() + 1000*60*60*24*day; today.setTime(targetday); //关键代码 var tYear = today.getFullYear(); //获取年份 var tMonth = tod...原创 2019-02-18 12:15:27 · 2797 阅读 · 0 评论 -
常用正则
手机号验证let phone_rule=/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;原创 2019-04-09 17:28:21 · 172 阅读 · 0 评论 -
html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决
html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决注意作为背景的图片必须放在服务器,存放在本地会出现截图的时候背景图丢失的问题;背景图必须放在img里面里面,通过定位处理成和背景一样,否则会可能出现模糊的问题html <div class="img-box"> <div class="img-pic"> ...原创 2019-07-20 16:09:31 · 6550 阅读 · 1 评论 -
利用a标签下载图片
一般场景下<a href="/images/myw3schoolimage.jpg" download="w3logo">联合后端进行图片下载如果后端传过来的图片数据是base64格式的let src = `data:image/png;base64,${res.data}`; // res.data即为转成base64格式的图片数据let a = document.cr...原创 2018-11-15 15:50:22 · 4050 阅读 · 2 评论 -
一个函数实现数组的从大到小排列和从小到大排列
var arr2 = [12, 3, 4, 6, 78, 90]var arr3 = [12, 3, 4, 6, 78, 90] function sort(arr, order) { var result = []; for (var i = 0; i < arr.length + 1; i++) { // 不同的排列顺序 if (order...原创 2018-07-09 10:51:34 · 11558 阅读 · 0 评论 -
如何实现全选与反选
我们经常会看到有些网站中在需要有选项的地方会出现全选,当我们点击全选的时候,所有的都会被选中,下面我们来说一下如何实现这种效果。原创 2017-08-30 23:57:12 · 586 阅读 · 0 评论 -
DOM中的事件
事件就是文档或浏览器窗口发生的一些特定的交互瞬间,事件的三要素 分别是:事件源(触发事件的元素)、事件名称(触发事件的名称)、事件处理函数(触发事件时调用的函数)。原创 2017-08-31 00:26:32 · 243 阅读 · 0 评论 -
Tabl栏效果的实现
很多页面中会有Tab效果,Tab栏效果可以使页面展现更多的内容,而且视觉效果也很不错,那些Tab栏效果改如果实现呢?原创 2017-09-01 01:28:43 · 347 阅读 · 0 评论 -
Right-hand side of ‘instanceof’ is not an object
Right-hand side of ‘instanceof’ is not an object出现此错误的编码export default{ props: { duration: 3, }}正确的写法export default{ props: { duration: { type: Number, default: 3, }原创 2018-03-30 17:39:56 · 20249 阅读 · 0 评论 -
vue 组件状态冲突
vue 组件状态冲突在写vue组件Carousel 时,出现在同一个页面中多次使用同一个组件时的状态冲突,原因是过多的使用了JavaScript原生的DOM操作方式,修改使用vue中ref 操作DOM元素后,则此冲突消失;vue中对于ref的解释为:ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 D...原创 2018-04-16 15:36:42 · 5298 阅读 · 0 评论 -
GIT 拉取项目
当别人已经建立好项目时,并且已将你加入项目 一: 查看自己是否生成ssh密匙 命令: cd ~/.ssh 如果可以进入到.ssh文件目录下,则说明之前生成过密匙,可以直接使用, 另一种情况则是之前没有配置过,需要进行以下操作 检查下自己之前有没有配置: git config user.name git config user.email 1)如果之前没有配置过 ① 配置 gi...原创 2018-04-17 09:35:10 · 3959 阅读 · 0 评论 -
:not 否定伪类
:not 否定伪类可以用来排除某些元素不想要渲染的元素之后进行渲染 CSS否定伪类,:not(X),是以一个简单的X选择器为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。其参数不能包含另外一个否定选择器; :not伪类的优先级即为它参数选择器的优先级。:not伪类不会增加选择器的优先级。 使用方式:div:hover:not(.tr-0){ backg...原创 2018-04-04 16:55:48 · 1333 阅读 · 0 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “ty...原创 2018-04-13 15:25:50 · 2883 阅读 · 0 评论 -
React中的style样式
React中的style样式在react中使用style样式时,先创建一个对象,对象的内容时css属性以及属性值,在使用的时候,将对象绑定在相应的元素上<body><div id="app"></div></body><script type="text/babel"> const style={原创 2018-05-15 09:09:01 · 51261 阅读 · 1 评论 -
微信小程序遇坑一 ---页面路径
微信小程序遇坑一—–页面路径刚刚开始学习微信小程序,看学习视频的时候看到老师点击目录就跳转到相应的页面,自己弄了半天也没有任何效果,页面路径没有任何改变,试了老半天发现是app.json文件中的page中的路径的位置问题,在微信WEB开发者工具中,适中只显示第一个路径中的内容,一个小问题浪费了十几分钟的时间,特地分享出来,以免有像我一样的遇到这种尴尬的问题的用了好久的时间却找不到问题的症候所在...原创 2018-05-22 21:08:03 · 13644 阅读 · 1 评论 -
JavaScript中的递归函数
递归和闭包作为JavaScript中的两大难点,让很多同学望而生畏,下面就以一个简单的阶乘来说一下我对于递归的理解原创 2017-08-24 20:59:32 · 1393 阅读 · 0 评论