- 博客(170)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 可视化e-charts的案例
可视化e-charts的案例可视化面板介绍 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。01-使用技术完成该项目需要具备以下知识：div + css 布局flex 布局Less原生js + jquery 使用rem适配echarts基础02- 案例适配方案设计稿是1920pxflexible.js 把屏幕分为 24 等份cssrem 插件的基准值是 8
2020-12-21 22:39:17
652
1
原创 vue项目添加图片裁剪组件
vue项目添加图片裁剪组件功能如下图所示：1，安装命令如下npm i vue-cropper --save2，调用组件，引入vue-cropperimport { VueCropper } from “vue-cropper”;3,封装组件代码如下:cropper.vue<template> <div class="cropper_model"> <el-dialog title="图片剪裁" width="800px
2020-12-16 09:46:35
2790
1
原创 vue中事件修饰符，stop,prevent,capture,self,once
1,stop修饰符，能够阻止冒泡事件，按照案例说明如下：按钮在div容器中。①，点击框中非按钮的位置，会触发div的事件②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件注意：此时还没加stop事件③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下，stop会阻止事件冒泡行为。代码如下：<templ...
2020-01-10 17:03:58
1090
原创 div+css 元素水平居中 及垂直居中的几种写法
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。 谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。一、水平居中 使用CSS控制水平居中很简单：...
2020-01-03 10:08:36
878
原创 vue项目打包出错：Unexpected token arrow «=＞», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:626,2
vue项目打包出错：Unexpected token arrow «=>», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:626,24]
2023-03-24 17:28:17
156
原创 解决uniapp中type=number下的文本框focus后获取不到键盘的keycode和鼠标光标放在文字前面的问题
处理unapp的input文本框foucus后获取不到键盘的keyCode和鼠标光标放在文字前面的问题
2022-06-14 10:44:06
1383
1
原创 vue 视频 时间进度条组件-使用npm组件
vue 视频 时间进度条组件有些视频是以视频流的形式进行渲染的，没有视频滚动条，所以就写了24h的时间组件组件已上传到npm上，npm i as-time-line下载安装即可，最少需要1.2.0版本https://www.npmjs.com/package/as-time-line1，安装npm i as-time-line -S2，引用，在vue里面的main.js中引入，添加代码如下import timeLine from "as-time-line";import "as-
2022-03-29 17:32:32
3552
5
原创 vue项目正式环境下(NODE_ENV = production)js打包成gz格式
vue项目正式环境下(NODE_ENV = production)js打包成gz格式1，如下图所示，vue项目中的js会被打包成gz格式，项目默认情况下不是gz格式，需要前端进行配置2，打成gz格式包目的：可使压缩包更小一些，首次加载就快一些。（相对于默认情况下）3，配置打成gz包方法：3.1 在vue.config.js进行配置，（没有此文件可新增）3.2 需要 安装依赖包 compression-webpack-plugin 和 speed-measure-webpack-plugin (百
2022-02-24 10:21:18
3261
原创 原生微信小程序使用class 三元运算符实现多选案例
原生微信小程序使用class 三元运算符实现多选案例如下图所示：1，在vue中开发非常容易实现，使用数组的includes方法判断即可，但是在原生小程序中不可以2，要及时的对定义的遍历进行setData，重新赋值本案例的重点js代码如下：// res是从接口返回的数据 let xueliArr = res.data.data.xueli.list if(xueliArr && xueliArr.length > 0){ xueliArr.forEach
2021-08-12 17:54:59
1694
原创 基于jQuery实现内容向上滚动
基于jQuery实现内容向上滚动，效果如下图所示1，页面需要引入jquery.liMarquee.jsjquery.liMarquee.js可下载，下载地址jquery.liMarquee.js下载地址2，在scripit标签下写如下代码 $('#liMarquees').liMarquee({ direction: 'up', drag: false, scrollamount: 20, runsho
2021-07-14 12:20:57
992
原创 基于jQuery实现首页悬浮框
基于jQuery实现首页悬浮框，如下图所示1，在页面中引入jQuery.bay-window.js，jQuery.bay-window.js的代码如下：!function($){ /** * Description: jquery飘窗插件，可自适应浏览器宽高的变化 * Author: ddqre12345 * CreateTime: 2017.5.3 * param: args={startL:default, startT:default, angle:-Math.PI/
2021-07-12 18:59:46
963
3
原创 html页面显示pdf渲染成canvas案例以及html显示pdf遇到的跨域问题的解决方案
一，html页面显示pdf渲染成canvas案例如下图所示：1，引入pdf.js<script src="../js/htmlshowPDF/build/pdf.js"></script><script src="../js/htmlshowPDF/build/pdf.worker.js"></script>2,在显示pdf的案列上添加div <div id="the-canvas"></div>3，对应的js代码如
2021-07-07 14:56:53
1946
原创 html页面读取pdf案例
html页面读取pdf案列，如下图所示下载pdf.js相关链接如下：pdf.js地址下载下载的项目目录如下：用到的最重要的两个文件夹是build与web两个文件web文件包含的如下：在使用的时候，可以通过iframe标签将viewer.html嵌入到页面,在传入src值的时候，需要添加参数file="pdf的链接路径"<iframe frameborder="0" id="myIframe" scrolling="no" src="../web/viewer.html" width
2021-07-02 15:38:01
1321
原创 html2pdf—html页面下载pdf案列，及图片不能显示问题
一，html2pdf—html页面下载pdf文件需求：html2pdf—html页面下载pdf文件使用的插件js是html2pdf.js，html2pdf官方链接地址，按照官方的说明，直接调用save方法就可以。var element = document.getElementById('element-to-print');var opt = { margin: 1, filename: 'myfile.pdf', image: { type: 'j
2021-06-28 11:44:32
3655
3
原创 如何生成微信小程序二维码（uniapp开发）
如何生成微信小程序二维码（uniapp开发）说明：可以使用微信公众平台提供的工具，生成小程序码微信公众平台地址：https://mp.weixin.qq.com/2，输入AppID或小程序名称或账号原始ID，点击下一步3，①鼠标滑到 获取更多页面路径②输入小程序项目成员的微信号4，该微信用户可打开小程序右上角菜单，点击“复制页面路径”并粘贴至左侧“小程序页面路径”中5，输入路径，点击确定6，生成小程序页面的小程序码...
2021-04-09 17:40:13
4388
2
原创 vue项目新闻消息向上滚动案例
vue项目新闻消息向上滚动案例效果如下图所示：代码组件如下：<template> <div class="message-page"> <div class="msg-tit"> <div class="msg-top"> <div class="tit-word">消息通知</div> <div class="
2021-04-01 11:41:30
1711
原创 H5项目配置px与rem适配案例
H5项目配置px与rem适配案例说明：px与rem的适配不是固定的，可调整，本案例的换算关系是1rm=50px如下图所示本案例设置如下：一、新建一个resize.js，代码如下(function (win, lib) { var _width = 750, _fontSize = 100, flexRem = lib.flexRem || (lib.flexRem = {}), tid; var docEl = document.d
2021-03-17 10:16:25
847
原创 ajax请求接口第一次失败无响应以后都成功问题，无响应码
ajax请求接口第一次失败无响应以后都成功问题案例说明：1，在谷歌浏览器上退出登录成功后 第一次调用接口会无响应，第二次调用正常。（mac电脑上会刷新列表）2，关于这个问题，找了好久没找到根本原因，使用postman调用接口正常本案例的解决方案：前端换标签，又原来的button标签换成span标签button是请求该接口的路径方法<!-- <button class="sp-st" @click="submitInvite('dialogForm')">发送</butt
2021-03-12 10:35:05
1574
1
原创 uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度
uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度一，需求：如下图所示，当滚动条滚动到一定位置时要将红色框内的内容放到最顶部并且位置固定。二，实现内容：①需要获取滚动高度②滚动条触底时可请求下一页的数据图片位置固定三，代码实现可使用uni app提供的页面生命周期方法onReachBottom和onPageScroll实现在onPageScroll 函数中，e.scrollTop可获取页面滚动高度使用onRe
2021-03-10 10:38:41
2591
原创 webStorm合并分支：将develop 分支内容合并到master分支
webStorm合并分支：将develop 分支内容合并到master分支说明：项目只有两个分支master与develop分支develop：分支用于日常开发使用，当版本开发完成后，会将代码合并到master上master：分支用于bug修改使用代码操作：①bug修改完后，将代码提交到master分支上②将master分支上的内容提交到develop分支上在webStorm合并分支：将develop 分支内容合并到master分支具体操作：1，切换到master分支上，如下：2，将d
2021-03-08 16:45:19
4888
原创 uni-app的基本使用
####uni-app的基本使用基础部分：环境搭建页面外观配置数据绑定uni-app的生命周期组件的使用uni-app中样式学习在uni-app中使用字体图标和开启scss条件注释跨端兼容uni中的事件导航跳转组件创建和通讯，及组件的生命周期uni-app中使用uni-ui库项目：黑马商城项目uni-app介绍 官方网页uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/
2021-02-01 14:20:26
953
原创 js 中 for..in 与for..of 的区别
js 中 for…in 与for…of 的区别1，for…in 可以遍历数组，对象①遍历数组时，得到的是索引值②遍历对象时，得到的是对象的key为了方便理解，如下图所示var a1 = [1,2,3];for( item in a1){console.log(item)}var a2 = [{name:'zs',age:16},{name:'ls',age:17}]for( item in a2){console.log(item)}for…in 遍历对象时2，for…of遍历
2021-01-27 16:37:21
561
原创 axios的理解与使用
1. 文档https://github.com/axios/axios2. 是什么前端最流行的ajax请求库react/vue官方都推荐使用axios发ajax请求3. axios的特点基本promise的异步ajax请求库浏览器端/node端都可以使用支持请求／响应拦截器支持请求取消请求/响应数据转换批量发送多个请求4. axios常用语法axios(config): 通用/最本质的发任意类型请求的方式axios(url[, config]): 可以只指定url发get请
2021-01-27 15:10:32
238
原创 Ajax的实现步骤，post与get方法应用案例
Ajax的实现步骤，post与get方法应用案例1，Ajax 的实现步骤代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript"> // 1.创建ajax对象 v
2021-01-18 09:14:04
116
原创 引导页-使用box-shadow作为遮罩层
引导页-使用box-shadow作为遮罩层，能让中间部分为空白height: 70px; width: 130px; padding: 20px; position: absolute; top: 25px; left: 1213.3px; z-index: 999998; box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 1px 898px; border: 1px solid red;...
2021-01-11 16:56:05
598
原创 vue项目登录页-实现字体动画案例
vue项目登录页-实现字体动画案例实现思路：1，让每个字都包含在span标签中，span标签的display:inner-block2，页面刚生成时（动画之前）设置margin宽度为80px,opacity为0.23，页面渲染完后（mounted方法）设置一个setTimeout，添加一个css样式，css样式中含有动画效果，主要代码如下所示mounted方法mounted() { setTimeout(()=>{ this.wor
2021-01-05 19:09:05
1456
原创 vue项目开发引导页-带有动画效果
vue项目开发引导页-带有动画效果，如下图所示本案例实现步骤是:1，先开发一个全局的弹框（遮罩层）全局弹框代码-遮罩层2，添加背景图-使用绝对定位实现元素定位3，开发带有动画效果的组件实现动画效果的代码如下所示，PositionGuide.vue：<template> <div class="re-guide"> <div class="re-content"> <div class="re-cbtn"
2021-01-05 16:58:19
3753
4
原创 css使用animation逐帧实现动画效果
css使用animation逐帧实现动画效果，如图所示：由上图所示,它是一帧一帧无限循环实现的代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background:#000; }
2020-12-30 19:09:35
528
原创 vue项目添加animation动画-抖动效果案例
vue项目添加animation动画效果，如下图所示主要代码如下：<div class="lo-main" :class="[sharkFlag ?'my-shark' :'']" id="myShark"></div>mounted() { setTimeout(()=>{ this.sharkFlag = true; },2000) const sharkDiv = document.getElementById("myShark");
2020-12-30 18:58:25
1970
原创 vue项目注册全局方法
vue项目注册全局方法可使用$on和$root结合使用本案例是在App.vue中注册了一个全局方法1，在App.vue中created()方法中注册一个方法this.$root.$on("appGuide",this.doGuideMethod);//注册一个全局方法在methods中定义doGuideMethod方法2，其他vue组件中可调用 this.$root.$emit("appGuide"); ...
2020-12-25 18:03:03
1649
原创 vue自定义全局组件-弹框案例
vue自定义全局组件说明：本案例是封装的一个弹框页面，因为只想要一个遮罩，内容自定义。因为ElementUI上已经提供了一个弹框组件，但觉得elementUI的组件内容有点多，所有自己就封装了全局组件。自己封装的参考了elementUI组件的源码。主要步骤如下1，创建一个文件夹my-dialog2，在my-dialog文件夹下创建MyDialog.vue和index.js3，index.js需要引入MyDiloag并封装和抛出4，在main.js中引入index.js主要代码如下1, M
2020-12-24 10:19:31
2038
原创 mysql数据库根据条件使用update处理图片路径问题
mysql数据库根据条件使用update处理图片路径问题如下图所示，这个一个图片的url路径，个别字段只存了图片名称，而不是图片全路径，为了处理这种老数据，使用sql语句去处理。sql语句如下UPDATE `b_recruiter` SET card_pic=CONCAT('https://wmxy-talents.oss-cn-han.xxxxx/',card_pic) WHERE id not in (SELECT a.id FROM (SELECT id FROM `b_recruiter
2020-12-23 14:07:59
352
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人