自信酷-优快云博客

原创实现在页面对一个列表内节点进行拖拽排序

思路：先设定ul里面元素可以拖动需要为其设置draggable属性每一个li都可拖动，但不必为每个li绑定事件，直接使用事件委托，直接给ul来监听移动正在拖动的li了，当前li的index大于容器li时就插入在容器的前面，反之插入在容器的后面，ul元素有一个属性previousElementSibling，表示该元素前面的一个元素，在索引进行比较，然后根据结果处理元素<ul id="ondragstart"> <li class="ele" draggable="t

2021-12-29 10:51:10 972

原创给定一个数组arr，如何对数组内元素去重

方法一利用indexOf方法去重var arr = [1,1,1,2,2,2,3,2,3]var newsArr = [];for (let i = 0; i < arr.length; i++) { if(newsArr.indexOf(arr[i]) === -1){ newsArr.push(arr[i]); }}console.log(newsArr) // [1, 2, 3]方法二利用slipce方法去重var arr = [1,1,1,.

2021-12-28 13:59:22 806

原创前端代码优化汇总

if判断的优化1、最简单的方法：if 判断let commodity = { phone: '手机', computer: '电脑', television: '电视', gameBoy: '游戏机',}function price(name) { if (name === commodity.phone) { console.log(1999) } else if (name === commodity.computer) { console.log

2021-12-26 18:12:10 513

原创 js 反转字符串

方法一最开始的思路是，先把字符串截取出来，然后把从后到前拼接成一个新字符串var str = "my javasctipt";var strArr = str.split('');var result=[];for (var i = 0, l = strArr.length; i < l; i++) { result.push(strArr.pop())}var resultStr = result.join("")console.log(resultStr) //tpi

2021-12-26 16:11:16 371

原创获取当天日期，输出今日是当年的第几天，第几周，周几

var myDate = new Date();const currentYear = myDate.getFullYear().toString();// 今天减今年的第一天（xxxx年01月01日）const hasTimestamp = myDate - new Date(currentYear);// 1000毫秒 * 60秒 * 60分钟* 24小时 = 86400000 一天let hasDays = Math.ceil(hasTimestamp / 86400000);cons.

2021-12-07 21:52:38 1037

原创 vue更新数据却不渲染页面解决方案

1.Vue不能检测通过数组索引直接修改一个数组项原因：由于JavaScript的限制，Vue不能检测数组和对象的变化解决办法：this.$set(arr,index,newVal)2.选择功能选中时赋值了，但没渲染页面场景：点击这个没有显示“√”解决办法：checkClick (item) { item.check =! item.check; this.$forceUpdate() },听说循环数据更新的层级太深，导致数据不更新，从而导致视图.

2021-12-03 22:28:41 15652 2

原创 webpack开发Vue配置

在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。webpack的主要适用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载组成，它的html结构可能会非常简单，比如：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta

2021-12-03 12:21:31 4694

原创前端工作之路

首先声明: 我是一名前端工程师，又是一个听障人士。2017年我本人第一份工作职位是摄影师，工作内容主要是拍照茶艺，修图处理。期间看见同事敲代码，引起我好奇的心去问了解，得知是网页制作。于是我查阅相关资料，并在w3school上学习，还有幕课网看视频学习，同时使用html和css做了简单页面，令人兴奋。深度了解前端开发这个行业，下决心做前端。趁正好前端人手不足的机会，同事让我尝试做简单的页面。公司的这次项目完成，没什么东西可以学，并没啥收获。我辞职了，换工作。第二家公司是一个农业电商平台，刚没开工。我负责

2021-11-25 18:17:10 336

原创 html2canvas保存图片，可加文字/图片/二维码

vue-cli项目中，运用element图片上可以加文字/图片，加这些的可以使用鼠标拖拽改变大小或位置支持保存图片支持生成二维码支持手机查看安装三个插件：安装生成二维码npm installqrcodejs2 --save-dev安装拖拽缩放组件npm install vue-drag-resize --save-dev安装html2canvasnpm install html2canvas --save-devhtml2canvas...

2021-11-19 11:34:51 2391

原创 vue生命周期笔记

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程。beforeCreate( 创建前 )在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。created ( 创建后）实例已经创建完成之后被调用，在这一步，完成了data 数据的初始化，挂载阶段还没有开始, $el属性目前不可见，在crea

2021-11-17 21:45:16 126

原创记一个打包出现错误Multiple chunks emit assets to the same filename js/chunk-0.js(chunks chunk-0 and chunk-0）

我在项目上增加几个页面了，写了功能，本地没问题，打包出现错误，如下：翻译：我注释掉刚写了的代码，再打包没问题。我想了想，是不是几个组件引入header组件，都有触发header组件里面的事件，这个问题？我新建一个父组件文件，引入header组件，主体组件通过router-view切换显示，func.js和header.vue不变修改路由：重新打包，就此解决了。仅次个人记录。...

2021-11-16 22:06:36 1340

原创 js异步转为同步用await async promise

var gameArr = { codeOne:[ { code: "code1", }, ], codeTwo:[ { code: "code2", }, ],}Object.keys(gameArr).forEach(function(j,k){ for(var i = 0; i < gameArr[j].length; i++){ .

2021-11-13 11:52:03 3347 1

原创 js计算--生成几个随机自然数

总监给我一个需求文档，如下：3000以下生成一个，3000至5999生成二个，6000至8999生成三个，类推。生成2个以上含2个，每个都要随机自然数，但不超过总数生成随机数后可以手动修改，要计算差数根据输入的数字生成几个3000以下生成一个，3000~5999生成二个，6000~8999生成三个，类推代码如下：var enterNumber = "" //输入数字的值var sum = (enterNumber / 1000) / 3 + 1; // 1是因为生成的个数至少1

2021-11-10 21:45:49 1139

原创浏览器指纹

总监和我说：你看下如何拿到浏览器指纹，然后传给我就可以。我一脸懵逼了，不知道浏览器指纹是啥，抱着学习和好奇的心态就去网上查了相关资料。下面我学习过程和成果。什么是浏览器指纹拿一个相机来解释，相机可以通过它的输出来进行识别和区分，每台相机都会在图片上留下独特的噪声样式，通过观察两张照片并比较它们的噪声样式，我们可以准确地判定这是否是同一台相机所拍摄。同样的原则，浏览器具有辨识度的信息，比如硬件类型、操作系统、用户代理、系统字体、语言、屏幕尺寸、时区差等等众多信息，所选取的信息决定了浏览器指纹的准确

2021-11-09 21:11:49 670

原创 vue封装表格组件，左边固定列右边滑动，可排序可操作

如标题，效果如下图：我做的是移动端，表格太长，所以做左边固定列右边滑动，上图右边显示动态箭头是让用户知道表格可以滑动。表格的思路：写两个table一个是整体的table，外面的div保持宽度固定，内部的table宽度大于外部才能滚动；一个是左边固定列，这个固定position:absolute在左边，就是盖在大table上面；代码如下：<template> <div> <div class="product-li...

2021-11-08 23:00:06 4985 1

原创 vue2和vue3的全局弹窗组件封装

为什么要封装组件封装组件是为了能够更加便捷、快速的进行业务功能的开发。组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中，我们难免会写很多类似的、重复的代码，有些相似的功能但涉及的字段有一些不一样。这时候可以把那些相同的功能，抽出来封装成组件，通过组件引用方式就很省事了。建立一个弹窗的模板：在confirm.vue中写自己的代码，如下：<template> <div id="confirm" class="complant" v-if="isSho

2021-11-05 23:25:14 2548

原创使用SVG标签实现进度条，js计算两个条件并实现进度结果

HTML代码<template> <div> <svg class="ProgressSVG" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns-xmlnsXlink="http://www.w3.org/1999/xlink"> <defs> <clipPath id="cut-off-...

2021-11-03 21:47:44 275

原创 vue3+axios实现登录拦截配置axios封装

项目结构├── dist // 打包构建后的文件夹├── node_modules //该项目依赖的模块├── public //存放静态资源（不会变动）├── src│ ├── assets //存放css、图片与js文件│ │ ├── css│ │ ├── img│ │ └── js│ ├── components //存放可复用的小组件│ ├── http // 封装fetch、post请求及http 拦截器配置.

2021-11-02 22:07:37 4832 2

原创 vue项目的webpack打包优化

前言我第一次从搭建项目环境，到打包准备上线测试，vue对开发者来说学习成本不高，带来了很多的便利。没有经过如何优化，直接打包出来，打开页面时就看到无尽的加载中。。。啥？？？是网络不好了？？？等了半分钟时间页面终于出现了。我第一次打包，所以百度做功课，原来是vue打包出来文件体积太大，而且会影响到首屏加载。那么，如何做到优化？打包前...

2021-11-01 22:19:11 6259

原创使用Vue-cli4创建Vue项目

一、基础环境配置1、安装nodejs2、验证node --versionnpm --version二、全局安装脚手架1、安装npm install -g @vue/cli如果升级本地环境，输入npm uninstall -g vue-cli 全局卸载再安装2、验证vue -V三、搭建项目1、跳转到自己喜欢的盘指定目录下，然后创建项目的命令下面vue create <Project Name> //文件名不支持驼...

2021-10-26 21:55:08 751

qq_33235582的博客