js
一个巨蟹座的前端
抽出时间去学习,凡事从小做起,不怕单调和重复,长期的积累坚持,想不成功,也难。
展开
-
el-select失去焦点触发表单的必填校验
【代码】el-select失去焦点触发表单的必填校验。原创 2023-05-25 13:57:48 · 520 阅读 · 0 评论 -
js数组内对象某个key值相同合并后放到一个新数组里面
js数组内对象某个key值相同合并后放到一个新数组里面原创 2022-12-02 15:54:08 · 833 阅读 · 0 评论 -
vue根据图片链接把图片写入粘贴板
复制图片到剪切板原创 2022-10-18 13:47:39 · 366 阅读 · 0 评论 -
element-ui的el-input组件实现只允许输入正整数(禁止以0开头,和输入e、+、-、.)
【代码】element-ui的el-input组件实现只允许输入正整数(禁止以0开头,和输入e、+、-、.)原创 2022-09-23 11:23:34 · 2975 阅读 · 2 评论 -
vue实现关闭浏览器退出登录功能(区别关闭和刷新)
在实现单点登录时,发现关闭浏览器后,并不会自动退出登录然后,再关闭浏览器后,就会自动调用我们的退出登录函数了。原创 2022-06-08 14:55:30 · 5674 阅读 · 7 评论 -
js数组中任意两元素交换位置并重新渲染到页面上
1.交换位置const list1 = [ { labelId: 0, name: 'xiaomin' }, { labelId: 1, name: 'xiaohong' }, ]; const list2 = [ { labelId: 0, name: 'xiaomin' }, { labelId: 1, name: 'xiaohong' }, { labelId: 3, name: 'xiaomin' }, { labelId: 4, name原创 2022-04-06 13:24:15 · 1454 阅读 · 0 评论 -
vue 上传打包后的文件到oss上
vue 上传打包后的文件到oss上第一步:安装插件npm i -D ali-oss-publish这个插件可以帮助我们把打包后的文件轮询后插入到oss指定目录下第二步:在根目录下新建ali-oss-publish.js文件const publish = require("ali-oss-publish");publish( { id: "", secret: "", region: "", bucket: "", entry: "dis原创 2022-02-28 15:47:00 · 1257 阅读 · 0 评论 -
vue自定义指令实现输入框出现后自动聚焦
小编最近做项目时,遇到了一个问题,需求是点击编辑icon后,输入框出现,输入框失焦时隐藏。项目采用的vue-antdv的技术,做的时候发现,给输入框加上autofocus属性后,只有第一次输入框出现的时候,才会自动聚焦,查阅资料后,发现可以用自定义指令实现,下面上代码: <a-input v-focus v-model="item.name" @blur="() => (item.isEdit = false)" autofocus /> directives: { /原创 2022-02-15 13:09:17 · 1759 阅读 · 0 评论 -
防抖节流的理解和防抖节流工具类的封装
首先,我们要清楚防抖和节流的区别防抖 在事件被频繁触发时,只有上一次与下一次空出足够的空闲时间,事件才会执行节流 在事件频繁触发时,规定时间内,事件只会执行一次然后我们来看封装的工具类函数//防抖:在事件被频繁触发时,只有上一次与下一次空出足够的空闲时间,事件才会执行 function debounce(fnEvent, time) { var _time = null return function () { ..原创 2022-01-11 18:13:21 · 265 阅读 · 0 评论 -
一招解决github访问过慢的问题
首先,我们查询下github的ip,查询网址如下:https://www.ipaddress.com/然后,我们在找到hosts这个文件然后通过vscode打开,修改里面的ip为刚才搜索到的ip,然后保存。如果保存失败,以管理员身份运行vscode再次保存即可。...原创 2021-12-16 15:35:43 · 313 阅读 · 0 评论 -
js获取文本的宽度高度
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-12-09 17:30:11 · 2131 阅读 · 0 评论 -
开箱即用的vue图片放大镜
今天发现了一个图片放大镜插件,故来记录一下。先来给大家看下效果:4.1.安装插件yarn add vue-piczoom2.在项目中引入(要在components里面注册的)<script>import PicZoom from 'vue-piczoom'export default { name: "index", components: { PicZoom },};3.在模板中使用<template> <d.原创 2021-12-06 16:33:07 · 922 阅读 · 0 评论 -
父元素flex:1,子元素宽度100%失效的问题
今天做项目时遇见一个问题,父元素在设置flex:1来固定宽度撑满时,子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写:.parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; }}但同时遇到了另一个问题,我发现这样设置后,即使width超过之后,横向滚动条依然不出现,经过尝试加上一句代码即可:.parent{原创 2021-12-02 10:56:19 · 3665 阅读 · 1 评论 -
开箱即用的vue返回顶部组件
1.首先我们在components里面新建一个文件,并输入以下代码<template> <div class="th-back-top" v-show="btnFlag" @click="backTop"> <img class="bg-back2top2" :src="require('@a/backTop.png')"/> </div></template><script>export default {原创 2021-11-24 09:56:38 · 358 阅读 · 0 评论 -
vue-i18n的简单使用兼容element-ui
1.首先下载vue-i18nnpm i vue-18n --save2.在项目根目录新建文件夹(自己命名)i18n.config.js,写如下代码 注意:小编在vue.config.js里面配置了路径别名,@l指向src/lang目录import Vue from 'vue'import VueI18n from 'vue-i18n'import Element from 'element-ui'const zh =require("@l/zh.js")const ...原创 2021-11-23 14:20:16 · 1155 阅读 · 0 评论 -
element-ui的返回顶部组件无效
今天在做项目中的时候,要加一个返回顶部的功能。因为项目中用到了饿了么的组件,所以就直接引用了Backtop这个组件。我们在app.vue中写如下代码即可:<template> <div id="app"> <router-view /> <el-backtop target="#app" :bottom="100" :visibility-height="300"> <i class="el-icon-car原创 2021-11-18 18:00:56 · 678 阅读 · 0 评论 -
vue-cli项目的webpack打包优化
webpack目录相关知识路由组件和其他组件异步加载Ant Design of Vue组件库等的优化gzip压缩优化loadsh图片压缩CDN配置代码压缩公共代码抽离相关知识简单的配置方式调整webpack最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象:// vue.config.jsmodule.exports = { configureWebpack: { plugins: [ ..原创 2021-11-10 15:35:33 · 1275 阅读 · 0 评论 -
vue项目运行后自动打开浏览器
很早就发现,有些项目在运行后会自动打开默认浏览器,但一直没想过这是什么原因。今天闲来无事看了一下,原来这么简单就可以实现。打开我们项目的package.json"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build" },在serve命令后面加上 --open就可以实现了,是不是很简单呢。...原创 2021-08-11 09:32:36 · 911 阅读 · 0 评论 -
vue移动端遮罩层滚动穿透问题
今天小编在做项目的时候发现了一个问题,各种查资料才得以解决。下面来简单介绍一下问题:在页面中,我们需要点击按钮展示一个遮罩层,且遮罩层里面内容可滚动,但是遮罩层盖住的区域不可滚动,这样一个问题。搜索之后发现,在遮罩层标签上添加这样一个代码@touchmove.prevent.stop @mousewheel.prevent可以实现禁止页面滚动,但是遮罩层内容也不可以滚动,所以这个方案pass,如果你们遇到不需要遮罩层内容滚动的话,可以采用这样的方法。下面来介绍下解决方法:首先我们在data里原创 2021-08-06 09:51:52 · 1491 阅读 · 0 评论 -
有趣的一键复制功能
今天产品经理提到了加一个一键复制文本到剪切板的功能,就去搜索了下相关功能是如何实现的,下面来给大家上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2021-08-02 11:08:53 · 300 阅读 · 0 评论 -
vue项目中实现返回顶部功能
我们在浏览网页的时候经常看到回到顶部这个功能,这个功能也比较简单,今天我就介绍一下这个功能如何实现。使用scrollTop实现首先,我来简单介绍一下原理 1.根据网页的滚动高度,判断是否显示回到顶部功能按钮 2.点击按钮时,触发回到顶部事件,如果要追求视觉效果的话,可以加入定时器。下面简单介绍下代码实现...原创 2021-07-29 13:39:21 · 2734 阅读 · 0 评论 -
redux的基本使用
App.js代码//引入react核心库import React from "react";// 引入ruduximport { createStore } from "redux";const reducer = function (state = { num: 0 }, action) { switch (action.type) { case "add": state.num++; break; case "del": state原创 2021-06-28 11:45:39 · 49 阅读 · 0 评论 -
js数组常用的几种遍历方法是如何使用的
js数组常用的几种遍历方法是如何使用的//filter遍历方法 过滤,满足条件返回一个新数组,不满足条件返回一个空数组 let arr1 = [1, 2, 3, 4, 5, 6]; let res = arr1.filter((item) => { return item == 0 }) if(res.length){ console.log(true); }else{原创 2020-12-04 17:15:29 · 161 阅读 · 0 评论 -
js实现简单的递归小实例
递归是什么程序调用自身的编程技巧称为递归( recursion)。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说,递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时,递归前进;当边界条件满足时,递归返回。我自己理原创 2020-12-03 10:37:07 · 897 阅读 · 0 评论