2021年07月_叶浩成520

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 01月

原创 js实现图片放大镜效果——简单方法

之前写过一篇关于电商项目商品详情页面的图片放大镜效果：电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501当时是在vue项目中使用的，其实跟在js中原理也是一样的。实现图片放大镜效果的重点就是下面的这张图了：上面的方法中，右侧图片，为了实现放大，使用的是background背景图片的设置原理，给background-size设置大于1的参数，就

2021-07-31 14:00:40 7547 1

原创 vue——实现飞入购物车效果(重点在于获取元素的位置)

昨天项目负责人问我能否在电商项目中加入购物车时，加一个飞入购物车的功效。这个效果其实是比较常见的，之前我也有遇到这种需求，因为不太熟，直接拒绝。现在还是想办法实现一下吧。效果图如下：当点击购物车动画按钮时，在商品图部分出现一个图片，这个图片会沿一定的轨迹，飞到购物车中，此时会调取加入购物车接口，购物车中的数值会加1。基本功能就是这样：飞入购物车最重要的就是获取元素的位置其实对于动画，我们已知的就是：animation和transition，都可以实现动画，现在的重点就是如何获取元素的位置。1

2021-07-30 16:00:12 5483 16

原创 vue+elementUi实现滚动轮播同屏与不同屏(功能实现)

我不得不吐槽一下，我的js水平，真的是烂。哎，学吧。前几天写了一个关于竖向轮播的功能，链接如下：实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)效果如下：代码如下：<el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay"> <el-carousel-item v-for="(items, indexs) in carouselL

2021-07-30 15:15:46 1789

原创 vue 根据链接生成二维码(功能实现)

今天同事问我一个问题，在vue项目中想要根据一个链接显示对应的二维码该怎么实现。我前一段时间，有用apicloud项目生成二维码的功能，但是vue版本的没有处理过。百度后找到一个可行的方案：大神实现vue项目中显示二维码功能的参考链接：https://www.cnblogs.com/hss-blog/articles/9188101.html文章中提到了两个好用的二维码插件，vue-qart与qrcode，由于第一种需要进行配置，而我对webpack之类的并不熟悉，保险起见，我采用了第二种方法：

2021-07-30 14:44:26 4204

原创 vue——PC段富文本编辑器的使用(tinymce)

最近在看别人的代码时，发现用的富文本编辑器并不是非常的好用，在上家公司时，也有用到富文本编辑器，在此记录一下。1.tinymce编辑器tinymce编辑器中文官网地址：http://tinymce.ax-z.cn/2.vue项目安装tinymcevue安装tinymce的指令集和:https://packy-tang.gitee.io/vue-tinymce/#/3.具体使用方法(本地引入的方式)在下面的代码中，并没有使用npm的方式进行安装，而是通过本地引入的方式，是将配置文件全部本地配置

2021-07-29 10:54:37 2019

原创公告——实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)

最近在做电商前台页面，需要实现的功能是：两组数据同屏竖向滚动轮播：很早之前，我是有用过js或者jq写轮播图的，但是现在有了vue+elementUi之后，则想当然的想用elementUi中的走马灯组件。elementUi官网中提供的都是一屏一个元素的滚动，此时要实现的效果是一屏两个元素的滚动html部分代码<el-carousel direction="vertical" v-if="carouselArr.length"> <el-carousel-item v-fo

2021-07-28 18:23:34 2662

原创 vue——router更改路由地址，但是页面不能跳转

在做电商项目时，筛选标签时，需要路由发生变化，但是当前的页面商品列表还需要局部刷新。如果更改路由后，页面跳转，则是全局刷新，局部刷新才能够满足用户需求。则此时要做的就是：更改路由地址，但是页面不能跳转。this.$router.push或者this.$router.replace就是实现路由改变页面跳转的方法：this.$router.push({ path:'index.html', query:{ id:3, tag:18 }})如果仅仅是为了让路由发生变化的话，可以将上面中

2021-07-28 18:11:34 8380

原创 flex布局——最后一行左对齐的实现方式(css功能实现)

在学习了css3之后，经常会用到的布局就是flex布局了。比如要实现下图的这种布局：给父级设置display:flex;实现一行中内容靠边对齐，则需要设置justify-content:space-between;这样的话，最后一行不填满的情况下，就会出现下面的问题：此时则需要对最后一行单独设置了：下面我分几种情况进行分析：对应的html部分代码统一如下：<h2 style="text-align: center">flex布局</h2><div cl

2021-07-28 18:04:30 5089

原创 vscode——html小技巧(技能积累)

在使用vscode时，编写html结构有非常简单的简化写法。非常的简单方便：比如现在要写一个ul>li的结构，li中的内容为累加的数字，简化写法就是：ul.clear>li*28{$}，然后回车，就会出现下面的结构了：生成的结构如下：...

2021-07-27 09:20:21 420

原创 canvas——实现图片验证码(功能实现)

canvas实现图片验证码——效果图如下：1.html部分代码<div class="wrapper"> <div class="inputBox"> <input type="text" class="inp" /> <span class="icon"></span> </div> <p class="errorText">验证码错误，请重新输入</p> <div class="b

2021-07-26 18:00:17 814 1

原创 vue——封装axios请求函数(功能实现)

最近在其他项目组又接触到了vue-cli搭建的项目，感觉自己都忘记怎么使用了。很多东西就是这样，用的多了，温故知新，用的少了，会遗忘的越来越多。现在把项目中的axios请求函数的封装记录如下：import axios from "axios";import router from "@/router";import store from "@/store";import "../../public/static/config";//此处是禁止编译的js文件直接放在了public文件夹下面impo

2021-07-26 14:57:38 574 4

原创 vue——模块化的store文件(基础积累)

最近在其他项目组又接触到了vue-cli搭建的项目，感觉自己都忘记怎么使用了。今天将store中的分模块的处理方式书写如下：从目录结构中，可以看到vuex中的state action getters mutations都作为单独的文件存在。最后统一集合在index.js文件中。1.index.js文件内容import Vue from "vue";import Vuex from "vuex";import actions from "./actions.js";import getters

2021-07-26 14:17:06 1451

原创 vue——Nprogress进度条功能实现

下图中的这种顶部进度条是非常常见的，在vue项目中有对应的插件。NprogressNprogress进度条的使用方法如下：1.安装nprogress插件npm install --save nprogress注意此处的--save等同于-s,就是将插件的名称及版本号保存到package.json文件中的dependencies中，这样其他人克隆项目后，可以通过npm install就可以下载下来所有的插件到node_modules中了。2.nprogress插件的使用此处进度条主要用于页面路由

2021-07-26 11:46:05 1552

原创 vue实现图片滑动验证功能——功能实现

图片滑动验证，是目前比较常见的验证方式，主要目的是防止用户利用机器人自动注册、登录、灌水。目前vue技术日趋成熟，已经有专门针对图片滑动验证功能的插件了。具体使用方式如下：1.安装插件——npm install --save vue-monoplasty-slide-verify注意此处的--save也就是简化版的-s，是为了将下载的插件保存到package.json中的depencedies中，这样其他人在下载你的项目后，依然可以通过npm install将插件安装到node_modules.2

2021-07-26 10:38:05 6394 2

原创前端实现——html2pdf功能(完成)

电商项目中，经常会遇到导出为PDF的功能，最最简单的方式就是：window.print()，可以自动展示出当前页面的打印预览效果。如果使用：window.print()实现打印，我们可以通过在浏览器控制台测试一下效果：效果如下所示：这种情况window.print()适用于全屏页面的，而非弹窗的形式，如果要只打印弹窗部分，则需要用其他的方式：html2pdf实现导出html页面为pdf1.npm install html2canvas jspdf --save——安装插件到package.j

2021-07-26 10:12:25 18483 7

原创时间格式化的公用方法——util.js封装公用方法

之前做时间格式处理的功能，我基本都是引入moment.js,然后使用其中的方法：使用也是比较简单的。其实也可以自己封装一个时间处理方法，然后挂载到vue上进行使用。1.在src文件夹下面添加utils文件夹，里面添加一个util.js文件function timeFormat(date,fmt="YYYY-mm-dd HH:MM:SS"){ if(date){ date = new Date(date); let ret; const opt = { "Y+":date.get

2021-07-26 09:32:35 590

原创 vue项目——商品详情页面图片放大镜效果实现(完成)

昨天在做商品详情页面时，遇到一个需求，就是图片放大镜效果。在图片上鼠标划过时，右侧出现一个大图，用于展示鼠标移过的区域，也就是图片放大镜效果。效果图基本类似如下：我之前有篇文章js实现图片放大镜效果：https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501当时是用js实现的效果，因此现在要把代码嫁接到vue创建的项目中。html部分代码：<div class="big-img

2021-07-22 17:25:14 6100 10

原创 vue+echarts实现折线图——部分配置参数记录(多做记录，防止忘记)

昨天在做折线图时，发现自己对echarts很不熟悉，遇到需求，全靠百度。哎，平时懒，关键时刻坑自己。现在就对我遇到的属性做一个记录。效果图如下所示：现在对这个折线图进行分析：配置上面所说的内容，需要用到option中的属性：1.标题部分——title标题字段名：title文本字段名：text字体样式：textStyle，fontSize指定文本的字号title: { text: "中国精铜价格(元/每吨)", textStyle: { fontSize: 14, },

2021-07-22 16:36:47 708

原创 vue+elementUi——实现竖向公告滚动效果(功能实现)

最近在做电商前台页面，首屏右下角有个公告，需要实现竖向滚动效果。也就是个竖向的轮播。elementUi中是有轮播效果组件的。代码如下：<el-carousel class="lunbo" height="35" direction="vertical"> <el-carousel-item v-for="(item, index) in currentTabList" :key="index"> <a :href="'/resource?id=' + it

2021-07-22 16:07:24 6505

原创 vue——静态配置文件不进行编译的处理方法(在public中引入js)

前几天同事提了一个要求，他想在vue引入静态配置文件，但是此文件不要进行编译。静态配置文件中的参数还需要在其他的.vue文件中使用配置文件中的参数。我一开始的想法就是：要在src同级目录下，添加几个.env.xxx的配置文件，然后在文件中配置NODE_ENV``NODE_BASE_URL等参数，然后在其他页面就可以通过env.process.xxx的方式来使用了。但是同时要求不能进行编译，虽然我也不太清楚，编译和不编译对参数有什么影响。最终方案如下：1.在public文件中添加同级的static文件

2021-07-22 15:55:44 3699

原创 vue——同一个路由传参不同跳转，页面不刷新问题解决

好久都没有写vue-cli创建的项目了，现在一写，发现了好多坑。今天遇到一个路由跳转的问题：这个是非常常见的一个场景：在当前商品详情页面跳转到另一个商品的详情页面，此时，路由相同，参数id不同Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/productDetail"——报错解决结果我在使用this.$router.replace({path:'/pro

2021-07-22 15:14:15 7647 8

原创 vue-cli搭建的项目中使用echarts——echarts版本问题导致的报错解决

今天遇到一个功能，就是绘制折线图，我之前是有写过的，但是之前是在引入的vue.js的项目中使用的，因此当时也是直接下载echarts.js，然后src引入后使用的。今天的项目是vue-cli搭建的项目，因此最好还是通过npm install echarts --save的方式来下载插件，并引入插件来使用。下载插件的时候，一定要注意要指定echarts的版本号，因此最新版的echarts与vue2.0有冲突，我今天就吃了这个亏。安装插件后，在main.js中挂载到vue原型上后，在页面中使用时，一直提

2021-07-21 20:23:28 5001 2

原创 vue——this.$refs.xxx获取dom的注意事项——v-if v-for渲染的dom不能直接使用

最近被借调到其他部门写代码，嘿嘿，我是一块砖，哪里需要哪里搬……今天遇到一个问题，vue项目：v-for渲染的元素，如果内容超过一行，则右侧展示一个"更多"按钮，点击“更多”按钮后，再展示全部的数据。在上家公司的时候，我也遇到过类似的要求，但是当时水平菜的底气硬，直接一个不会，愣是把需求改为了全部展示，今天遇到了这个问题，想着还是要解决一下，困难就是成长。我的思路是：一行的内容高度是50px,我只需要判断渲染完成后，内容区的高度是否超过50px即可。于是：html部分代码：<div cla

2021-07-21 20:05:00 3000 6

原创 35个常用的EXCEL函数说明——技能提升

最近看到秋叶公众号在搞一个活动，专门讲常用的EXCEL函数的，总共有35个函数，介于自己一直想学习EXCEL，但是又懒的不行，所以就报名了，报名费1块钱，时间为3天，一天1.5小时。直播课，无回放。现在提前做一下记录：SUM函数——对指定的数据进行求和，并返回计算结果用法：SUM(number1,number2,...)SUMIF函数——对数据区域中，符合指定条件的值进行求和用法：SUMIF(range,criteria,sum_range)参数说明：range:要判断的条件区域crite

2021-07-19 11:07:32 2646

原创联想小新笔记本充不上电——客服提供的处理办法(已解决)

上周的时候，我的电脑出现了一点小问题。充不上电了。电脑的购买时间是2019年下半年，距今不到两年的时间。充不上电之前，出现过电脑卡死的情况。所以我去问了联想客服。客服提供的解决办法：去掉所有的外围设备：包括但不仅限于鼠标、键盘、U盘、电源适配器等关机然后长按电源键20s，如果能开机，再接上电源就可以了我尝试了一下，确实可以了。这次充不上电是系统故障，如果执行完上面的第三步，还是充不上电，就可能需要按照客服提供的其他方法再次判断是否是硬件问题了。我的问题解决了！在此记录一下。...

2021-07-19 08:51:41 36837 18

原创 jq实现轮播图(景深效果)——功能实现

最近工作不是很忙，正好可以多多练习一下jq，毕竟这块我实在是基础薄弱，在工作中经常会遇到各种各样的问题，导致效率很低。今天的案例是一个自动轮播图：上面的轮播图跟以往的轮播有点区别，常见的轮播图是只展示一张图片，其他图片是隐藏的。常见轮播图的实现方式是所有图片一行排列，依次改变图片的margin-left值，如果要实现无缝轮播，则需要复制一份第一张放在图片集合的最后。此处要实现的效果，图片有前有后，则需要用到景深。注意：添加景深效果时需要给父级添加然后给每张图片设置position:absolut

2021-07-14 10:11:37 745 1

原创 page-break-after:always；解决window.print打印断页问题——已解决

今天用户提出一个关于window.print()打印的问题：如下图所示：在打印断页的部分，会出现数据打印不全的情况。打印预览与实际打印的情况还有有所区别。注意一点：如果想要实现window.print()打印当前的页面，则想要保证打印页面的body的height必须为auto，否则只会打印第一页。还要注意一下权重问题。@media print{ body { height: auto !important; }}html部分，之前用的是table，后面由于断页打印不全

2021-07-13 17:45:55 16312 14

原创 canvas实现画板功能——选择颜色、线条粗细、橡皮擦、撤销等功能

最近在看canvas画板的部分，正好看到一个案例是关于canvas画板的，在此做下记录。此案例是采用面向对象的编程思想，具体表现形式就是：js部分是一个对象，对象里面是一些变量和方法。html部分代码如下：canvas画板部分，需要指定画板的宽高。ul部分是按钮集合。input组件中当type为color时，是一个颜色选择器，可以进行颜色的选取，可以通过监听change事件来获取选择的颜色值。input组件中当type为range时，是一个进度条选择器，可以进行设置线条的粗细，min和max可以

2021-07-13 14:24:30 3104 1

原创更改element-ui中的分页器样式——功能实现

在工作过程中，经常会用到table表格用于数据的展示，对应的数据过多时，则需要用到分页器。elementUi中已经有了很多分页器的样式，完全可以满足正常的使用需求。如果想要实现下方的分页器的样式，则需要改动样式及部分功能：首先可以看到想要的效果图中，跟elementUi中红框标注的样式很类似。区别在于：页码的背景颜色及边框上页下页将图标改为文字添加首页尾页html部分代码如下：<div class="page"> <div class="homePag

2021-07-12 16:19:19 5772 1

原创 web页面上联系QQ客服功能实现——一行代码搞定

今天遇到一个功能，就是联系在线客服，要求是点击联系客服时，打开qq，到指定qq号的聊天框中。我参考了之前同事写的代码，发现可以通过一行代码实现此功能。<a href="tencent://message/?uin=234234234324&Site=在线QQ&Menu=yes" style="color:#999"><img src="/Content/img/sample/kefu.png" /></a>此处的a标签通过点击可以打开新的链接，当h

2021-07-12 15:39:51 27563 9

原创 antd-design 中的 Descriptions组件修改label的默认样式——插槽的使用

最近我的很多同事都在用antd design，我这边还是倾向于用目前熟悉的 elementUi。同事那边遇到一个需求，需要改变antd design中的description组件中部分label的样式。比如下方中红线标注的客户地址的样式。我一开始以为这个是table表格写的。后来一问才知道是antd design中的description组件。同事用下面的方法动态绑定class，发现并没有什么用……antd design与elementUI在很多方面都是类似的。我想到elementUi中的ta

2021-07-09 09:54:38 12809

原创 js基础——实现数组打乱顺序（js基础薄弱的需要加强）

昨天工作过程中，遇到了一个数组排序的问题。需求：判断数组中是否有符合某个条件的对象，如果有则将其放在数组的最后。就是这麽简单的需求，花了我好久的时间才完成。我的js真的是够薄弱。。。实现这个效果我刚开始是这样写的：for (var i = 0; i < oldArr.length; i++) { if (oldArr[i].FinishCount >= oldArr[i].NeedCount) {//这个就是符合要求的条件 //先保存一份当前的对象 var o

2021-07-08 14:20:31 514

原创不同浏览器音频播放——Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause

之前遇到过一次关于音频播放的功能要求，文章链接如下：音频播报功能链接地址当时在本地谷歌浏览器下运行是没有问题。后面音频播报功能上线后，发现用户使用的是360急速模式，导致音频播报过程中报错，报错信息如下：Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().本文章是在上面链接的基础上进行的改进百度一下后，发现报这个错的原因是因为浏览器禁止音频直接播放导致的。现在记录一

2021-07-08 13:53:47 2207

原创 html页面前端展示数学公式+vue项目前端展示数学公式——亲测可行

最近有同事在弄前端展示数学公式的功能，我也是头一次接触这个需求。所以也找了一些资料来找找答案。网上提供的展示数学公式：都是用到MathJax这个html页面展示数学公式——MathJax.js最终效果如下：使用方法如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content

2021-07-07 12:53:02 8693 6

原创 vue的SEO优化——预渲染后路由+点击事件失效问题解决

vue是单页面框架且前后端分离，不利于seo优化。针对这一点，还是有解决办法的。什么是SEO优化？体现到代码上就是：(最重要的一个就是meta标签的展示)meta标签中的name:可以使用keywords和description来添加搜索引擎的关键字和描述信息。这个就是爬虫会提取的部分。以下部分是同事提供的，我暂时没有用到，在此做下记录，希望后续有帮助：prerender-spa-plugin——轻量级的seo解决方案prerender-spa-plugin:轻量级的seo解决方案，对于大

2021-07-03 10:08:34 2757 8

原创 webpack实现热更新

昨天看到公司有前端同事在研究webpack，今天有空正好找下资料也look look我最早接触webpack是2019年6月-7月之间，当时对前端还是很模糊的，很多东西都是听过课程，但是由于没有实践经验，所以很多东西都没有深入研究。现在一看，果然啥也不会了……哭死查询了资料，找到一个可行的，现在记录如下：1.目录结构在文件夹中创建3个文件夹，分别是：src dist config在src文件夹中创建一个main.js在dist文件夹中创建一个index.html在config文件夹中创建一个

2021-07-01 15:04:19 701

原创 vue环境变量配置——process.env（详细）

在用vue框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。平时开发是用生产环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。下面开始：配置环境的实现原理实现原理就是采用node.js顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境具体实例1. 安装依赖npm install process

2021-07-01 11:31:13 41455 26

原创 axios 拦截器——基本用法及拦截器代码

之前在开发后台管理系统时，都是跟其他同事一起开发，说实在点，就是在别人开发的基础上写页面。。。现在想把之前没有关注的点拾起来。。今天看下axios拦截器的用法用vue写代码在做ajax请求时，可以用到axios，具体就相当于请求前进行校验(拦截)和响应前进行校验(拦截).什么是axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有以下特征：.从浏览器中创建 XMLHttpRequest从 node.js 发出

2021-07-01 11:07:20 6306 1

手写chatGPT前端代码

手写chatGPT 前端代码 fetch 解析 text/event-stream 格式的文件 text/event-stream chatGPT

2024-08-05

谷歌+火狐浏览器-实现生成二维码并实现拖动-js技能提升

谷歌+火狐浏览器——实现生成二维码并实现拖动——js技能提升实现生成二维码实现生成二维码并实现拖动 js技能提升

2024-07-08

vue+ant-design+formBuiler表单构建器-技能提升-form design-亲测有效

vue+ant-design+formBuiler表单构建器——技能提升——form design——亲测有效 vue+ant-design+formBuiler表单构建器 form design 亲测有效表单构建器 formBuilder插件的使用 vue:表单构建器自定义拖拽表单实现自定义拖拽表单的效果，自定义

2024-05-08