![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
javascript, html, css, vue
Chrolly
这个作者很懒,什么都没留下…
展开
-
实现移动端图片预览效果,图片modal效果
移动端图片预览效果,图片modal效果原创 2022-06-02 09:58:56 · 563 阅读 · 0 评论 -
记录swiper3.x版本loop为true轮播踩坑,附带解决方案
loop为true时,踩坑记录。查看 swiper官网,找到参数,设置后,发现没起作用。 观察发现,手动滑动时触发了 事件,那我们在 事件内重启就可以吧。解决方案:利用事件和事件完成重启 轮播。loop为true时,当第一次自动滚动结束时进行第二次滚动开始时,第一屏vue的click事件不生效现象:当我们轮播图的图片轮播一圈后,你会发现之前可以点击的vue的click事件失效了。原因分析解决方案:最好采用原生的事件进行书写,如下:loop为true时,页面渲染问题当swiper的每个页面都原创 2022-06-01 11:42:45 · 1111 阅读 · 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 · 1184 阅读 · 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 · 88 阅读 · 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 · 7850 阅读 · 0 评论 -
【兼容所有浏览器】js 实现复制到剪贴板功能,支持代码块
最近需要实现代码复制的功能,网上查了一了下,基本都要依赖 clipboard.js 来实现的。不想依赖任何包,能不能实现代码复制功能呢?答案肯定是可以的,自己写!!!<button onclick="copyToClip('内容')"> Copy </button>/** * 复制单行或多行代码块内容到粘贴板 * content : 需要复制的内容 * message : 复制完后的提示,不传则默认提示"复制成功" */function copyToClip(.原创 2021-08-27 16:38:04 · 87 阅读 · 0 评论 -
【全】正则表达式语法
元字符1、基础- . 任意字符(换行除外)- \d 任意数字- \D 任意非数字- \w 任意数字字母下划线- \W 数字字母下划线以外的任意字符- \s 任意空白符- \S 任意非空白符2、空白符- \r 回车符- \n 换行符- \f 换页符- \t 制表符- \v 垂直制表符3、量词- *含义:0到多次- +含义:1到多次- ?含义:0到1次,如colou?r- {m}含义:出现m次- {m,n}含义:m到n次,- {,n} 其中m不写代表0,至多n次-原创 2021-08-19 12:55:59 · 2544 阅读 · 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 · 66 阅读 · 0 评论 -
详解: vue 项目采用 swiper 实现自动轮播
在项目文件夹下放置swiper 下载包在需要使用的 vue 组件中, 采用 import 方式引入 swiper 文件HTML 数据渲染部分JS 页面交互实现部分swiper 样式全部代码原创 2021-07-21 17:01:00 · 4311 阅读 · 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 · 307 阅读 · 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 · 1178 阅读 · 0 评论 -
npm依赖包私服发布流程
描述:将项目环境中开发好的 vue 组件,发布到 npm 依赖包。这里不用脚手架,因为脚手架会附带很多用不到的东西。初始化仓库:每个 npm 包都需要一个 package.json 文件,进行常规配置。进行包初始化设置,自动生成 package.json 文件。填写内容选项,包括:名称、版本号、入口文件、描述、作者、证书等。npm init在 package.json 文件中填写 npm 包需要的依赖。"devDependencies": { "babel-core":.原创 2021-03-19 13:49:22 · 2202 阅读 · 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 · 389 阅读 · 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 · 70 阅读 · 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 · 787 阅读 · 1 评论 -
Vue:校验触发的时机,怎么选择trigger的值
参数 trigger 的值有 'blur' | 'change' | ['change', 'blur']blur 失去焦点时进行验证常用:对 input 输入框的验证change 当值发生变化时进行验证常用:下拉框select,日期选择框date-picker,复选框checkbox,单选框radio...原创 2021-02-25 10:44:06 · 11383 阅读 · 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 · 536 阅读 · 0 评论 -
如何让 img 在没有任何标签包裹的情况下水平居中
如何让 img 图片在没有任何标签包裹的情况下居中显示?效果显示如下:解决方案如下:img { display: block; max-width: 100%; margin: auto;}原创 2021-01-19 10:31:18 · 114 阅读 · 1 评论 -
前端代码书写规范-页面结构
页面结构容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column左右中:left right center页面外围控制整体布局宽度:wrapper导航导航:nav主导航:mainnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar菜单:menu子菜单:submenu标题: t转载 2021-01-19 10:28:31 · 299 阅读 · 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 · 1608 阅读 · 0 评论 -
Markdown链接采用新开窗口的方式打开
问题描述:采用markdown编辑器写出的内容很好,但相对路径的跳转方式基本都是在本窗口打开的,但又想实现相对路径的链接既能在本窗口跳转又能新开窗口跳转。网上查了很多资料,也没有找到比较好的解决方法。实现方式...转载 2020-12-31 13:49:40 · 3757 阅读 · 0 评论 -
JS阻止事件冒泡
阻止事件冒泡function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); e.preventDefault(); } else //否则,我们需要使用IE的方式来取消事件冒泡翻译 2020-12-30 10:13:35 · 51 阅读 · 0 评论 -
采用IntersectionObserver API实现图片懒加载功能
一、背景介绍IntersectionObserver二、HTML代码块img图片中,data-src存放的是图片真实地址,src存放的是预加载图片的缩略图。说明:预加载一般采用几KB左右的svg动态图。<body> <h2>图片列表</h1> <ul class="wrapper"> <li><img class="scroll-con-img" src="./asset/loader-spinner.s原创 2020-12-24 17:22:15 · 262 阅读 · 0 评论