一个巨蟹座的前端-优快云博客

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 1535

原创 js模拟ps吸管吸取颜色功能

使用EyeDropper API实现的该功能，下面是代码，复制后到开发工具里面可直接运行到浏览器<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=

2022-03-15 14:26:02 9189

原创 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 1375

原创 vue批量注册全局自定义指令

首先，我们在src目录下新建utils文件夹，然后建一个文件用来写我们的自定义指令const copy = { bind(el, { value }) { el.$value = value el.handler = () => { if (!el.$value) { // 值为空的时候，给出提示。可根据项目UI仔细设计 console.log('无复制内容')

2022-02-23 14:18:26 1892

原创 vue注册全局自定义指令，实现按钮的防抖

我们可以在src目录下新建utils文件夹，里面新建文件夹（随便起个名字，本文为了演示防抖，就命名为了debounce.js）上代码const debounce = { install(Vue) { Vue.directive('debounce', { inserted: function (el, binding) { let timer el.addEventListener('c

2022-02-23 13:09:39 784

原创 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 1890

原创防抖节流的理解和防抖节流工具类的封装

首先，我们要清楚防抖和节流的区别防抖在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行节流在事件频繁触发时，规定时间内，事件只会执行一次然后我们来看封装的工具类函数//防抖:在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行 function debounce(fnEvent, time) { var _time = null return function () { ..

2022-01-11 18:13:21 303

原创一招解决github访问过慢的问题

首先，我们查询下github的ip，查询网址如下：https://www.ipaddress.com/然后，我们在找到hosts这个文件然后通过vscode打开，修改里面的ip为刚才搜索到的ip，然后保存。如果保存失败，以管理员身份运行vscode再次保存即可。...

2021-12-16 15:35:43 437

原创 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 2326

原创开箱即用的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 1055

原创父元素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 4065 2

原创开箱即用的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 407

原创 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 1232

原创 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 735

原创 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 1384

原创 vue项目运行后自动打开浏览器

很早就发现，有些项目在运行后会自动打开默认浏览器，但一直没想过这是什么原因。今天闲来无事看了一下，原来这么简单就可以实现。打开我们项目的package.json"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build" },在serve命令后面加上 --open就可以实现了，是不是很简单呢。...

2021-08-11 09:32:36 943

原创 vue移动端遮罩层滚动穿透问题

今天小编在做项目的时候发现了一个问题，各种查资料才得以解决。下面来简单介绍一下问题：在页面中，我们需要点击按钮展示一个遮罩层，且遮罩层里面内容可滚动，但是遮罩层盖住的区域不可滚动，这样一个问题。搜索之后发现，在遮罩层标签上添加这样一个代码@touchmove.prevent.stop @mousewheel.prevent可以实现禁止页面滚动，但是遮罩层内容也不可以滚动，所以这个方案pass，如果你们遇到不需要遮罩层内容滚动的话，可以采用这样的方法。下面来介绍下解决方法：首先我们在data里

2021-08-06 09:51:52 1567

原创有趣的一键复制功能

今天产品经理提到了加一个一键复制文本到剪切板的功能，就去搜索了下相关功能是如何实现的，下面来给大家上代码。<!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 326

原创 vue项目中实现返回顶部功能

我们在浏览网页的时候经常看到回到顶部这个功能，这个功能也比较简单，今天我就介绍一下这个功能如何实现。使用scrollTop实现首先，我来简单介绍一下原理 1.根据网页的滚动高度，判断是否显示回到顶部功能按钮 2.点击按钮时，触发回到顶部事件，如果要追求视觉效果的话，可以加入定时器。下面简单介绍下代码实现...

2021-07-29 13:39:21 2774

TypeScript 快速上手.pdf

空空如也