JS
Chrolly
前端开发
展开
-
记录swiper3.x版本loop为true轮播踩坑,附带解决方案
loop为true时,踩坑记录。查看 swiper官网,找到参数,设置后,发现没起作用。 观察发现,手动滑动时触发了 事件,那我们在 事件内重启就可以吧。解决方案:利用事件和事件完成重启 轮播。loop为true时,当第一次自动滚动结束时进行第二次滚动开始时,第一屏vue的click事件不生效现象:当我们轮播图的图片轮播一圈后,你会发现之前可以点击的vue的click事件失效了。原因分析解决方案:最好采用原生的事件进行书写,如下:loop为true时,页面渲染问题当swiper的每个页面都原创 2022-06-01 11:42:45 · 1175 阅读 · 0 评论 -
Vue 使用事件总线 EventBus 实现跨组件(页面)事件传输
使用方法:建立 EventBus.js 文件,暴露一个空的 Vue 实例,如下:import Vue from 'vue'export default new Vue()在需要通信的两个组件中分别 importimport EventBus from "@/utils/EventBus.js";通过 EventBus.$emit、EventBus.$on 进行通信,如下:// A 页面 触发addFolder事件, params参数EventBus.$emit("addFolder",原创 2021-12-28 17:57:27 · 1312 阅读 · 0 评论 -
前端开发常用函数【不断更新...】
随机数// 随机字符串 len表示多长的随机字符串function generateRandomAlphaNum(len) { var rdmString = ""; for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len);}MD5 函数function encodeUTF8(s) { var i, r原创 2021-10-09 11:11:39 · 126 阅读 · 0 评论 -
解决window.location.href 下载文件时,一次点击产生两次下载+页面跳转问题
解决 window.location.href 下载文件时,一次点击产生两次下载+页面跳转问题一般我们常用 window.open 打开一个新窗口的方式,来下载文件,但是新的窗口不会关闭,除了明显体验上不好以外,有时还会导致一次点击同时产生两次下载。const download = (url) => { window.open(url);}解决方案:const = download = (url) => { //获得id为downLoadListFrame的frame转载 2021-09-02 10:24:32 · 8077 阅读 · 0 评论 -
【兼容所有浏览器】js 实现复制到剪贴板功能,支持代码块
最近需要实现代码复制的功能,网上查了一了下,基本都要依赖 clipboard.js 来实现的。不想依赖任何包,能不能实现代码复制功能呢?答案肯定是可以的,自己写!!!<button onclick="copyToClip('内容')"> Copy </button>/** * 复制单行或多行代码块内容到粘贴板 * content : 需要复制的内容 * message : 复制完后的提示,不传则默认提示"复制成功" */function copyToClip(.原创 2021-08-27 16:38:04 · 123 阅读 · 0 评论 -
js深拷贝与浅拷贝
浅拷贝JavaScript 存储对象都是存地址的,所以浅拷贝会导致a 和b 指向同一块内存地址。数组的复制其实相当于复制了索引,改变其中一个变量,其他引用也会随之改变。var a = [1,2,3]; var b = a; b[0] = 4; // a 为 4 2 3 // b 为 4 2 3 var a = [1,2,3];var b = a;b[0] = 4;// a 为 4 2 3// b 为 4 2 3当传递一个对象(在javascript里数组不是简单数据原创 2021-07-28 10:47:08 · 101 阅读 · 0 评论 -
原生js实现元素动态回到页面顶部
实现方式:element.scrollIntoView({ behavior: 'smooth', //平滑滚动,爽,其他还有 instant block: 'start' //元素到页面顶部,其他还有 end, center})案例:var backtotop = document.querySelector("body");backtotop.scrollIntoView({ behavior: 'smooth', block: 'start'})转载 2021-03-31 11:51:59 · 349 阅读 · 0 评论 -
nrm 实现多个 npm 镜像地址切换
淘宝镜像地址下,安装 nrm 依赖// 切换到淘宝镜像地址npm config set registry http://registry.npm.taobao.org/// 安装 nrm 依赖npm install nrm -g --save新增镜像地址nrm add newAdrr http://x.x.x.x:xxxx/repository/npm-local/查看所有镜像地址nrm ls* 表示当前所选镜像地址,也可以通过 nrm current 命令查看当前j镜像地址原创 2021-03-23 10:05:27 · 1270 阅读 · 0 评论 -
npm依赖包私服发布流程
描述:将项目环境中开发好的 vue 组件,发布到 npm 依赖包。这里不用脚手架,因为脚手架会附带很多用不到的东西。初始化仓库:每个 npm 包都需要一个 package.json 文件,进行常规配置。进行包初始化设置,自动生成 package.json 文件。填写内容选项,包括:名称、版本号、入口文件、描述、作者、证书等。npm init在 package.json 文件中填写 npm 包需要的依赖。"devDependencies": { "babel-core":.原创 2021-03-19 13:49:22 · 2419 阅读 · 0 评论 -
[VUE] 过滤器函数
VUE 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。代码如下:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>你可以在一个组件的选项中定义本地的过滤器:filters: { capitalize: function (value) { if (!value).转载 2021-03-16 09:43:33 · 432 阅读 · 0 评论 -
[算法] 没有引入第三个中间变量就完成了两个数字的交换
常见的交换两个数字的值:var temp = arr[j + 1];arr[j + 1] = arr[j];arr[j] = temp;没有引入第三个中间变量就完成了两个数字的交换先加后减arr[j + 1] = arr[j] + arr[j + 1];arr[j] = arr[j + 1] - arr[j];arr[j + 1] = arr[j + 1] - arr[j];先减后加arr[j + 1] = arr[j] - arr[j + 1];arr[j] = arr[j] -原创 2021-03-09 11:21:25 · 99 阅读 · 0 评论 -
在 VScode 编辑器中调试 Vue 开发
一、安装 VScode 插件Debugger for ChromeDebugger for Firefox二、确定Vue CLI的版本号2.1 在项目文件package.json中查看Vue CLI的版本号2.1.1 使用的是 Vue CLI 2,设置并更新 config/index.js 内的 devtool property:devtool: 'source-map',2.1.2 使用的是 Vue CLI 3,请设置并更新 vue.config.js 内的 devtool prope转载 2021-03-04 11:07:25 · 851 阅读 · 1 评论 -
Vue:校验触发的时机,怎么选择trigger的值
参数 trigger 的值有 'blur' | 'change' | ['change', 'blur']blur 失去焦点时进行验证常用:对 input 输入框的验证change 当值发生变化时进行验证常用:下拉框select,日期选择框date-picker,复选框checkbox,单选框radio...原创 2021-02-25 10:44:06 · 11741 阅读 · 1 评论 -
滚动条滚动到页面底部
滚动条滚动到页面底部js实现代码window.scroll(0, document.querySelector('body').scrollHeight)JQuery实现代码var h = $(document).height()-$(window).height();$(document).scrollTop(h);原创 2021-01-22 09:08:31 · 570 阅读 · 0 评论 -
js以yyyy-MM-dd HH:mm格式获取当前系统日期
js日期的时间格式 yyyy-MM-dd HH:mmjs代码部分// 以'en-ZA'的格式获取当前的系统时间var currentTime = new Date().toLocaleString('en-ZA');console.log('currentTime: ', currentTime);结果:各国日期的时间格式af ==== yyyy-MM-dd HH:mmaf-ZA ==== yyyy-MM-dd HH:mmar ==== dd/MM/yy hh:mm ttar-AE转载 2021-01-08 09:14:22 · 1668 阅读 · 0 评论 -
Markdown链接采用新开窗口的方式打开
问题描述:采用markdown编辑器写出的内容很好,但相对路径的跳转方式基本都是在本窗口打开的,但又想实现相对路径的链接既能在本窗口跳转又能新开窗口跳转。网上查了很多资料,也没有找到比较好的解决方法。实现方式...转载 2020-12-31 13:49:40 · 4101 阅读 · 0 评论 -
JS阻止事件冒泡
阻止事件冒泡function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); e.preventDefault(); } else //否则,我们需要使用IE的方式来取消事件冒泡翻译 2020-12-30 10:13:35 · 63 阅读 · 0 评论 -
360浏览器: 如何以极速模式打开网址
背景介绍360浏览器有两种类型,即"360安全浏览器"和"360极速浏览器"。360极速浏览器有两种内核模式,即"极速模式"和"兼容模式"。注意:浏览器对IP默认使用IE模式,对域名默认使用极速模式极速模式 “极速模式”是以Blink(Webkit)为内核的浏览模式,Blink内核具有更高的网页浏览速度和更好网页渲染效果。但由于少部分网银、政府、税务、办公系统等网站对Blink的兼容性不佳,若打开此类网站发现异常,请手动切换到“兼容模式”下继续浏览。兼容模式 “兼...翻译 2020-11-24 11:07:03 · 1818 阅读 · 0 评论 -
原生JS代码实现tab选项卡
采用原生JS实现tab选项卡实现效果:HTML代码:<div id="cases-tabs"> // 默认展开全部 is-active <dt class="tab tab-sum all-cases is-active">全部</dt> <dt class="tab tab-0 banking">金融</dt> <dt class="tab tab-1 energy">能源</dt>原创 2020-11-22 20:02:17 · 489 阅读 · 0 评论