- 博客(155)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 vue-waterfall2 实现瀑布流，及总结的问题
1. 本人下载vue-waterfall2 @1.9.0版本，插件设定了高度，导致插件内容可以滚动，如果在插件上面加入banner或者其他内容，不会随着屏幕的滚动而滚动,1.安装 npm install [email protected] --save （提示：一定要安装1.8.20，最新版会有一部分问题）body，head 高度100%，会导致页面滑动到最后的时候监听不到滚动底部的事件，一定要保证页面css样式不能冲突。注意：引入需要在主界面引入，直接在组件中引用会有问题。
2023-11-21 13:41:01
524
原创 移动端适配-(postcss-pxtorem)
基于vue+vant的移动端适配(rem)1.下载lib-flexible --savenpm i lib-flexible --save2.在main.js中引入lib-flexiblemain.jsimport 'lib-flexible/flexible'3.设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-s
2023-11-21 13:39:06
200
原创 记录项目中遇到的vue-quill-editor在编辑时， 无法赋默认值问题
使用文档： https://www.awesomes.cn/repo/surmon-china/vue-quill-editor。this.content = this.value // 在ready方法中手动赋值。记录项目中遇到的vue-quill-editor在编辑时， 无法赋默认值问题。this.content = val // 未生效。
2023-06-28 13:54:41
339
原创 npm install时,报错 install: `node install.js`安装失败
应该在命令后加参数 --ignore-scripts。在执行 npm install时，出现如下错误。
2023-04-17 10:29:44
615
原创 element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情
element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情
2022-08-02 18:13:27
2812
2
原创 js 获取本周 周一-周日的日期，周一周日问题特殊处理
需求获取本周周一-周日的日期 var now = new Date(); var nowTime = now.getTime() ; var day = now.getDay(); var oneDayTime = 24*60*60*1000 ; var MondayTime = nowTime - (day-1)*oneDayTime ;//显示周一 var SundayTime = nowTime +.
2021-08-09 14:45:55
2207
原创 移动端兼容性问题解决方案
原文地址：http://www.cnblogs.com/wangpenghui522/p/5398137.html 1. IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你...
2021-04-26 13:51:40
761
原创 Do not access Object.prototype method ‘hasOwnProperty‘ from target object
Do not access Object.prototype method 'hasOwnProperty' from target object编写代码的时候，使用了eslint：let obj = {};obj.hasOwnProperty('xxx');此时会显示标题错误。大概的意思的：不要使用对象原型上的方法。因为原型的方法可能会重写。解决方法object.property.hasOwnProperty.call(obj,'属性')ECMAScript 5.1.
2021-03-04 13:20:29
371
2
原创 移动端 vue 3d轮播使用
安装npm install -S vue-carousel-3d调用1、全局注册，main.jsimport Vue from 'vue'import Carousel3d from 'vue-carousel-3d'Vue.use(Carousel3d2、在组件中局部注册import { Carousel3d, Slide } from "vue-carousel-3d";export default { components: { Carousel3
2021-03-01 14:14:09
625
转载 判断浏览器到底是关闭还是刷新？准确性超高
判断浏览器到底是关闭还是刷新？准确性超高进入专区参与更多专题讨论 最近纠结在一个问题上，研究浏览器的关闭事件，百度了一大堆，发现没有关闭事件。相关文章如下所讲：http://bbs.csdn.net/topics/330239056http://www.cnit618.com/html/qdkf/js/1338.htmhttp://zhidao.baidu.com/link?url=ULiLZsVjyB43Tz1p0Lkc6BP9ZTQwoMKrfq-OkZ69i32oXJjWbD40e
2021-02-24 13:54:50
983
2
原创 iframe 子页面传值给父页面
子页面<body> 子级：B页面<br/> <button id="b_button">B页面发送A页面数据</button><br/> <script> document.getElementById("b_button").onclick = function(){ var param = {'name':'admin'}; window.parent.p
2021-02-24 13:21:21
3280
原创 vue 前端页面无操作时，执行某些操作
需求：用户长时间不再操作电脑的时候，应该给用户自动退出系统，这样可以防止有别人使用电脑操作上一个用户的数据。或用户长时间不操作，隐藏鼠标等。思路监听鼠标移动以及键盘操作。 设置timer，timer到达指定值后进行跳转并提示。 开启timer并且关闭timer实现设定一个计数值，利用js原生的事件，对鼠标，键盘进行监听，如果一有触发的鼠标，键盘的话，就将计数值清零，否则，计数值一直累加，当累加到一个目标值，即那个无操作退出系统的时间就可以触发退出系统函数。data () {..
2021-02-24 10:07:09
1377
原创 yarn 环境安装依赖报错解决方法（info [email protected]: The platform “win32“ is incompatible with this module.）
⚙ Installing CLI plugins. This might take a while…yarn install v1.13.0info No lockfile found.[1/4] Resolving packages…[2/4] Fetching packages…info [email protected]: The platform “win32” is incompatible with this module.info “[email protected]” is an optio
2021-02-22 13:39:53
1224
原创 前端RSA加密，加密字符串过长，提示“Message too long for RSA”问题
/***长文本加密*@param{string}string待加密长文本*@returns{string}加密后的base64编码*/RSAKey.prototype.encryptLong=function(text){var_this=this;varmaxLength=((this.n.bitLength()+7)>>3)-11;...
2021-01-29 15:27:53
3461
原创 js 对象合并assign
方法：Object.assign() varo1 = { a: 1 }; varo2 = { b: 2 }; varo3 = { c: 3 }; 这样做当前目标对象会被污染 varobj = Object.assign(o1, o2, o3); console.log(obj);// { a: 1, b: 2, c: 3 } console.log(o1);// { a: 1, b: 2, c: 3 }, 注意目标对象自身也会...
2021-01-27 11:14:45
148
原创 apply concat 数组合并
两个数组合并concat()方法JavaScript的Array对象中提供了一个concat()方法，作用是连接两个或更多的数组，并返回一个新的数组。var arr3 = arr1.concat(arr2);console.log(arr3); // [1,2,3,4,5,6]要注意的是，concat()方法不会改变原数组，而是返回一个新的数组。这样，当我们需要进行多次数组合并的时候，就会造成内存浪费。apply()方法函数的apply方法有一个特性，那就是func.apply
2021-01-27 11:07:51
207
原创 Popover 弹出框,为 popper 添加类名踩过得坑
当Popover 设置最大宽度不起作用且::v-deep .el-popover{max-width:330px } 不起作用时方法1（缺点全局）<style>.el-popover{max-width:330px!important;}</style>方法2一般来说一个vue文件里面都会写一个CSS样式对吧，但是这个就不一样的，我们要给这个属性，开个小灶，单独给它写一个CSS样式。就像下面这样 <el-popover ...
2021-01-26 18:11:17
1057
原创 JS document.execCommand实现复制功能（带你出坑）
最近项目中需要实现功能：点击button，复制input框的值；我使用的是document.execCommand('copy')的方法；但是很郁闷的是，始终实现不了功能；代码如下HTML代码（v-model是vue框架中的双向数据绑定，不懂的请移步vue文档）<input id='input_url' v-model='product_url' disabled type="text">JS代码var input = $('#input_url');inpu.
2021-01-26 15:49:09
228
原创 当路由从hash改history时，出现奇怪的问题，没办法正常使用路由
问题：当路由从hash改history时，出现奇怪的问题，没办法正常使用路由总结：代理设置入图scrm不要和路由配置相同
2021-01-21 19:46:29
284
原创 H5 下拉加载更多(模拟微信聊天记录）
前言前段时间用H5实现一个实时聊天的功能。发现很难实现像微信聊天记录一样下拉加载更多记录。市面上大部分的 Web 项目实现的效果都是上拉加载，下拉刷新。下拉加载更多很少见，下拉在加载数据方面与上拉是一样的，但是如何做到像微信聊天记录一样，下拉之后还是保留在原有的位置就需要思考一下了。下拉与上拉区别下拉与上拉在加载数据上面基本一致，但是因为方向不同，所以也存在以下不同之处。上拉是将数据加载到原数据后面，所以用的是数组拼接 concat 方法。而下拉是将数据添加到原数据前面，所以需要使用 uns
2021-01-15 13:25:48
1955
1
原创 IOS下图片不能显示问题的解决办法
有人提供给我一个解决办法，给img标签加一个父级元素，给父级元素设置宽高，然后给img标签设置宽高100%，如下:html: <div class="img-container"> <img src="xxx.png" /> //假定图片路径正常 </div> css: .img-container{ width:100px; height:100px; } ...
2021-01-12 11:29:12
929
原创 vant中van-picker选项插入图片
先上效果图：<template> <div class="hello"> <van-button type="primary" @click="filePicker = true">打开选择器</van-button> <van-popup v-model="filePicker" position="bottom"> <van-picker show-toolbar :columns="columns" @conf
2021-01-04 11:07:36
852
1
原创 移动端debug vconsole 打印
当你现在移动端进行debug时可以用vconsole如下在html引入即可打印的及 network 都可以看到<scriptsrc='https://cdn.bootcss.com/vConsole/3.3.2/vconsole.min.js'></script><scripttype="text/javascript">window.vConsole=newwindow.VConsole();<...
2020-12-23 17:39:37
153
原创 box-shadow实现四周阴影
box-shadow实现四周阴影div{ width:250px; height:250px; background:greenyellow; box-shadow:black 0px 0px 10px;//将h-shadow,v-shadow设为0px,实现四周阴影}效果图
2020-12-23 09:47:16
4925
原创 Android webview “location.replace” 不起作用
js解决方法：function locationReplace(url){ if(history.replaceState){ history.replaceState(null, document.title, url); history.go(0);//当你想返回对应的层级界面 这里的0 可以调整 如 -1 }else{ location.replace(url); }}出处是stackoverflow，其他方法还有就是原生客户端的解决方法，地址：h
2020-12-21 11:29:56
1183
原创 在vue.js中实现a标签href tel的打电话功能
在vue.js中实现a标签href tel的打电话功能 div v-for="p in persons"> <p> name: {{ p.name }} </p> <p> //正确做法，拼接字符串 tel: <a :href="'tel:' + p.phone">call me</a> </p> </div> ...
2020-12-18 13:46:47
825
原创 van-pull-refresh 于van-list 或者自动滚动冲突时
1 第一次遇到的问题是van-pull-refresh 于van-list 之间发生了滚动冲突 ，当滑动时直接刷新2 第一次遇到van-pull-refresh 没有使用van-list 结果还是发生了冲突总结冲突和van-list没关系然后解决方案就是讲van-pull-refresh 放在你可以滑动div如图中间可以滚动如图嵌套即可...
2020-12-17 14:04:20
1366
原创 长连接、短连接、长轮询和WebSocket
对这四个概念不太清楚，今天专门搜索了解一下，总结一下： 长连接：在HTTP 1.1，客户端发出请求，服务端接收请求，双方建立连接，在服务端没有返回之前保持连接，当客户端再发送请求时，它会使用同一个连接。这一直继续到客户端或服务器端认为会话已经结束，其中一方中断连接。 优势：减少了连接请求，降低TCP阻塞，减少了延迟，实时性较好。 劣势：可能会影响性能，因为它在文件被请求之后还保持了不必要的连接很长时间。 短连接：在HTTP1.0中，客户端发送请求，服务器接收请求，双方建立连接，服务器响应资源，请求结束。 长
2020-12-12 13:39:33
356
原创 axios ajax vue 封装axios get post put 等
import axios from 'axios';import { getCookie } from '../api/cookies'import {getQueryString} from '../api/unit' const instance = axios.create({ timeout: 5000, baseURL:'', withCredentials: true, headers: {token: getCookie('token')}});.
2020-12-02 13:08:58
1253
7
原创 设置固定最低部 css
遇到问题如图h5 在编辑时 底部按钮弹起解决方案 flex解决该问题的最好方法是采用 flexbox——CSS3提供的一种先进布局模型，旨在建立具有适应性的布局。如果你对 flexbox 还不怎么熟悉，文章最后有一些扩展阅读链接，可以帮助你了解 flexbox。我们的演示页面应该具备 Header、主体内容区域和 Footer，下面是该页面的 HTML 12345 <body> <header>.....
2020-11-28 21:48:17
290
原创 vue-router导航守卫，不懂的来
最近有段时间没有更新文章，因为在做一个小项目，nodejs+express+vue+vue-router+vuex+element-ui...作为vue知识巩固练习，欢迎star（项目地址：zxcweb/node-express）。废话不多说，开始我们的内容：1.导航守卫是什么官方这么说：正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。好吧，看不懂，就好（当）好（废）理（话）解（吧）下。其实，导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一
2020-11-26 16:03:53
117
原创 Vue手把手教你撸一个 beforeEnter 钩子函数
为什么要自造beforeEnter钩子函数？看下问题场景：项目中有一单词列表页面，每个cell都会备注该单词是否已经掌握，点击cell进入详情页，可对该单词进行学习，并标记单词是否掌握，并且在详情页面中也可以通过点击前进 后退 按钮学习其他的单词。所以但我点击返回时，单词列表要展示所有单词用户掌握的最新情况。最终的页面关系是这样的： wordListPage ——> wordDetail （对一系列单词进行学习，退出）——> wordListPage（刷新单词列表）对于上面的场
2020-11-26 16:02:41
1108
原创 企业微信调用api 提示不是founction时
企业微信调用api 提示不是founction时wx.invoke('xxx', {}.....应该嵌套在 ready中使用wx.ready(function () {wx.invoke('xxx', {}.....』）
2020-11-23 14:50:07
282
原创 数组里的字符串数字与数字互转
1.字符串数字转数字var arr = [1, 2, 3, 4, 5];arr.map(String); // ['1', '2', '3', '4', '5']2.数字转字符串数字var arr2 = ['1', '2', '3', '4', '5']arr2.map(Number); //[1, 2, 3, 4, 5]
2020-11-19 17:59:42
2163
原创 [Vue warn]: Error in event handler for “el.form.blur“: “TypeError: callback is not a function“解决
allback的简单理解调用一次callback相当于调用一次函数，比如：function f(x) { console.log(x)} function testCallBack(callback) { //关键字callback，表示这个参数不是一个普通变量，而是一个函数 const reg = /^[1-9]*[0-9]?(\\.[0-9]*)?$/; if(value==''||value==undefined||value==null){ callback();/
2020-11-19 17:52:37
3596
原创 element表单校验的一个坑 this.$refs[xxx].validate is not a function
element表单校验的一个坑 this.$refs[xxx].validate is not a functionthis.$refs[data][0].validate((valid) => 这个[0]需要加上
2020-11-19 17:50:55
1509
1
原创 vue axios response 失败拦截
最开始认为失败没走拦截 成功走了instance.interceptors.response.use(response => { // dataAxios 是 axios 返回数据中的 data const dataAxios = response; // 这个状态码是和后端约定的 const CODE = dataAxios.data.code; // 根据 code 进行判断 if (CODE === undefined) { .
2020-08-03 18:44:35
1376
Lodop_Clodop2019-7-11.rar
2019-07-11
Lodop_Clodop2019-7-11.zip
2019-07-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人