JS
1
冷子夜
渭城朝雨浥轻尘,客舍青青柳色新
展开
-
Vue计时器和倒计时组件
Vue计时器组件和倒计时组件,二合一。原创 2022-07-26 16:26:23 · 1052 阅读 · 2 评论 -
好用,常用的Vue插件集合
vue-cli常用插件集合element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动原创 2020-12-14 14:12:00 · 1618 阅读 · 0 评论 -
Vue利用visibilitychange监听页面显示和隐藏
mounted() { document.addEventListener('visibilitychange', _this.handleVisiable) }, destroyed() { document.removeEventListener('visibilitychange', _this.handleVisiable) }, methods: { handleVisiable(e) { if (e.target.visibilityState原创 2020-12-04 15:55:34 · 8317 阅读 · 0 评论 -
前端tab界面数据缓存和预加载思路
效果点击第5周。缓存第5周数据,并预加载第4、6周数据。继续点击第6周,读取第6周缓存数据,第5周数据已缓存,所以只预加载第7周数据。点击第1周。缓存第1周,预加载第2周,第0周不加载。代码<script>export default { data() { return { dataInit: false } }, methods: { /** * 加载数据 * @param String week 加载指定周.原创 2020-12-01 18:01:36 · 685 阅读 · 0 评论 -
vue项目中滚动到某元素位置,使用scrollIntoView()
1.使用a标签+#号<a href="#box1">我跳到box1</a>上面这一种的缺点是,url会发生改变,会在url最后面加上片段识别符#box2,这样就改变了URL的路径,这是我们不想看到的。因为再次刷新的时候回出现问题。当使用 vue-router回退时,发现需要回退很多次。2.scrollTop滚动到某位置document.documentElement.scrollTop=380;//不需要加单位直接这句就可以实现滚动到某位置3.scrollIntoVi原创 2020-10-30 11:22:39 · 3105 阅读 · 0 评论 -
Vue-元素曝光(判断元素是否在可视区域内)(一)
IntersectionObserver介绍intersection-observer npm包实际运用原创 2020-07-24 20:19:53 · 4462 阅读 · 0 评论 -
Vue-元素曝光(判断元素是否在可视区域内)(二)
IntersectionObserver介绍intersection-observer npm包实际运用原创 2020-07-24 20:18:37 · 4601 阅读 · 4 评论 -
Access-Control-Allow-Origin‘ header in the response must not be the wildcard ‘*‘ when the request‘s
报错Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.原因:后台不能使用通配符 ‘*’,否则前端报错;请求的origin和后台设置的origin不一致。解决方案:(1)前端代码不用动。后台 为‘Access-Control-Allow-Origin’设置动态的ori原创 2020-07-23 17:57:18 · 6154 阅读 · 2 评论 -
JS替换自定义表情图片代码
我们经常在前端需要处理这种含有表情符号的文本‘[微笑][mulu讨厌]美女[色]你好[害羞][色]在吗[haha讨厌][sasa1231]?’一般情况,我都是放在后端做映射。今天,有个需求需要在前端做。大概理了下。在前端做个映射表配置。这个配置内容我在后端下发。配置文件想了两种形式。输出结果如下// 只处理了字母和汉字CCCCDDD美女BBB你好AAAABBB在吗DDD[sasa1231]?第一种,需要两次循环 var json = '[{"title":"微笑","src":1原创 2020-06-12 11:54:34 · 727 阅读 · 0 评论 -
微信小程序只刷新data数组结构里的某一项数据
比如下面有这样一个数组数据data: { category_list:[ { id: 1, name: '阅读', show: false, loading: true, news_list: [] }, { id: 2, name: '重复', show: false, loading: true, news_list: [] }, { id: 3,...原创 2020-04-24 09:52:09 · 1484 阅读 · 2 评论 -
js列表每隔n个插入一个广告(循环展示广告数组中的广告)
适用于小程序wxs和jsindex 本条数据索引ad 广告数组field 所要返回的广告字段const isDisplayAd = function(index, ad, field = '') { var perShow = 4 // 每隔n个显示广告 var adLength = ad.length if (adLength > 0){ if ((in...原创 2020-04-11 15:27:35 · 1583 阅读 · 2 评论 -
vue2.0的计算属性computed和watch有什么区别?说说各自使用场景
一个属性由多个属性计算而来时,使用计算属性;如订单总价一个属性值变化影响多个属性、方法,使用属性监听;如关键词搜索1 computed:通过属性计算而得来的属性1 computed内部的函数在调用时不加()2、computed是依赖vm中data的属性变化而变化的,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。3、comput...原创 2019-12-31 09:36:18 · 964 阅读 · 0 评论 -
webpack用法
package.json "devDependencies": { "webpack": "^4.41.3", "webpack-cli": "^3.3.10" }webpack.config.jsconst path = require('path')module.exports = { // 源文件 entry: './src/index.js', ...原创 2019-12-18 10:46:14 · 82 阅读 · 0 评论 -
发布npm包
1(新创建的包)初始化包参考文章 创建自己的私有npm包并发布进入底层目录,执行npminit命令此命令会在当前模块内创建一个package.json文件,目的是可以设置自己的模块名称,版本,作者等一系列信息要上传还必须得有自己的npm账号,可以去npm官网注册注册完后,继续回到模块目录执行npm adduser,登录登录成功后,执行npm publish即可发布3 ...原创 2019-12-18 10:37:11 · 119 阅读 · 0 评论 -
利用async、await关键字设置函数同步异步
vue async/await同步 案例1. async/await场景这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。2. 名词解释asyncasync的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个pro...转载 2019-12-05 17:17:29 · 1224 阅读 · 0 评论 -
小程序onPageScroll滚动监听优化:函数防抖和节流
```handlebarsasdsadas```## 标题saasdasd## 标题aasdasdsa转载 2019-12-03 16:19:59 · 5156 阅读 · 0 评论 -
js 常用正则表达式
日常更新测试地址1、逢单字符替换,逢双字符不替换比如"abcaabbcc",要把a替换成X,但是aa保留不替换let str='abcaabbccfadwdwdaaadwdwa';str=str.replace(/(?<=[^a]|^)a(?=[^a]|$)/g,'x');2、过滤& 等字符/&[a-z]{3,5};/g,...原创 2019-11-08 13:37:33 · 176 阅读 · 0 评论 -
web进行QQ、QQ空间、微博的分享
参考文章jsp-web端进行QQ和微信的分享 <style type="text/css"> #content-share-list { font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */ width...原创 2019-09-22 17:56:34 · 953 阅读 · 0 评论 -
Vue 中父级给子级传参加冒号和不加冒号的区别
原创 2019-04-11 15:33:31 · 1997 阅读 · 0 评论 -
用JS 将文字copy到粘贴板
// 将文字copy到粘贴板上 copyToClipboard:function(txt){ let tmp_el = document.createElement("input"); tmp_el.setAttribute("readonly", "readonly"); tmp_el.setAttribute("value", txt);...原创 2019-04-11 17:02:10 · 311 阅读 · 0 评论 -
Vue Router 路由跳转传参知识 总结
一、跳转方式1、router-link 标签 to里的值可以是一个字符串路径,或者一个描述地址的对象。例如: 默认 to 不加:号<router-link to="/order/check_order_list" replace></router-link> 1.1 方法一 ( 按字符串路径) 路径:htt...原创 2019-04-16 16:45:42 · 603 阅读 · 0 评论 -
vue组件里setInterval定时器销毁问题
解决方法1:首先我在data函数里面进行定义定时器名称:data() { return { timer: null // 定时器名称 } },然后这样使用定时器:this.timer = (() => { // 某些操作 }, 1000)最后在beforeDestroy()生命周期内清除定时器:beforeDestroy() { clearInterva...转载 2019-04-18 08:55:07 · 3808 阅读 · 0 评论 -
vue.js 动态文字向上滚动广播中奖信息代码
????????????个人博客:Harvey的个人博客 ????????????效果如图<template> <div class="roll-msg"> <div class="popup"> <div class="box"> <ul class="lb" :class="{marquee_top:anim...原创 2019-04-18 09:03:19 · 2562 阅读 · 0 评论 -
微信JSSDK接口 {"errMsg":"translateXXX:fail, the permission value is offline verifying"}
最近在做用微信js sdk 调取扫一扫时,突然遇到这个错误,后来发现是因为在jsApiList 配置中忘了声明config的jsApiList []缺少了scanQRCode这个参数添加上就好了 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端...原创 2019-04-24 10:21:16 · 27680 阅读 · 5 评论 -
Vue ajax图片上传及后端处理
前端????????????个人博客:Harvey的个人博客 ???????????? <div class="upload"> <div> <icon name="caozuo-shangchuan-upload"></icon> <input name="file" @ch...原创 2019-05-30 14:03:07 · 4189 阅读 · 2 评论 -
JS实现简单的倒计时
1、第一种<!DOCTYPE html><html><head><meta charset="utf-8"><title>www.jb51.net JS倒计时</title></head><body><div id="div"></div>...转载 2019-06-13 00:30:32 · 52729 阅读 · 5 评论 -
H5微信开发iOS真机上input调起软键盘后不回弹的解决方案
原创 2019-06-10 10:35:01 · 614 阅读 · 0 评论 -
JS实现浏览器打印、打印预览
window.print()window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,下面是从网上摘到的一个局部打印的例子,该例子的不足是打印会修改页面的内容。<!DOCTYPE html><html><head><meta http-equiv="Content-Type...原创 2019-06-15 23:22:37 · 2260 阅读 · 0 评论 -
ES6推荐规范总结
个人学习笔记,具体参考:http://es6.ruanyifeng.com/#docs/style1.块级作用域(1)let 取代 var(2)全局常量和线程安全,推荐const2.字符串(1)静态使用单引号const a = ‘foobar’;(2)动态使用反引号const b = foo${a}bar;3.解构赋值优先解构赋值的有:(1)使用数组成员...原创 2019-07-24 15:37:42 · 121 阅读 · 0 评论 -
js中!和!!的区别及用法
1、!可将变量转换成boolean类型,null、undefined和空字符串取反都为false,其余都为true。2、!!常常用来做类型判断,在第一步!(变量)之后再做逻辑取反运算,在js中新手常常会写这样臃肿的代码:判断变量a为非空,未定义或者非空串才能执行方法体的内容var a;if(a!=null&&typeof(a)!=undefined&&...原创 2019-07-30 13:20:56 · 663 阅读 · 0 评论 -
微信小程序使用actionSheet组件实现转发分享功能
wxml文件<button bindtap='listenerActionSheet'>显示</button><action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" wx:for-index="idx"> <action-sheet-item...原创 2019-08-13 16:28:51 · 878 阅读 · 0 评论 -
让canvas中生成的文字能够居中显
ctx:canvasstr:文本注意:measureText方法兼容context.fillText(str, (ctx.width - ctx.measureText(str).width) / 2, 0)原创 2019-08-12 16:56:15 · 1967 阅读 · 0 评论 -
ES6中export及export default的区别
ES6中export及export default的区别在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import可以有多个,export default仅有一个...原创 2019-09-10 09:53:11 · 663 阅读 · 0 评论 -
Vue 中 import from @ 是什么意思?怎么配置?
**????个人博客????:[Harvey的个人博客](http://xhliu.top)**原创 2019-04-11 14:57:23 · 19366 阅读 · 0 评论