前端
关注
分享
扫一扫
厚积而薄发1528
纵化大浪中，不喜亦不惧。应尽便须尽，无复疑多虑。
展开
-
前端web在线PPT编辑器-PPTLIST
一个基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，力求还原桌面应用级体验。支持导出本地 PPTX 文件，支持移动端基础编辑和预览。您可以在此基础上搭建自己的在线幻灯片应用：原创 2024-07-07 00:08:16 · 3406 阅读 · 0 评论 -
vue3 form 报错: please transfer a valid name path to form item
最近vue3着实很火，但很多伙伴在用的时候发现很多坑，比如说上面这个报错please transfer a valid name path to form item!为什么会出现这个问题呢，我是在使用antd的动态增减表单（循环）的时候报了这个错误，搞了很久才找到根本原因。原因：你的formItem的name属性没有和数据输入（input）框关联起来，导致表单规则校验一直报错解决方法：因为出现这种场景很多，所以这里提供几个注意事项，大家可以依次检查一下。1.检查formItem的na原创 2022-03-17 16:46:31 · 7609 阅读 · 17 评论 -
iframe中多tab页使用echarts组件报错NS_ERROR_FAILURE问题
在使用iframe中多个tab页面使用echarts组件在火狐浏览器中会报NS_ERROR_FAILURE错误，主要引起原因是因为tab组件的原理是通过display属性来显示隐藏tab页面，因为iframe加载是整体一起加载的，所以当display为none的时候echarts照常加载就会提示找不到tab页的dom，所以就抛出错误NS_ERROR_FAILURE；这里提供两种解决方案：1、修改tab切换逻辑，将display:none,替换为visibility: hidden;这里有个地方要原创 2021-08-24 11:13:30 · 1401 阅读 · 1 评论 -
微信小程序使用validator自定义rules校验规则
在使用微信小程序表单组件中经常会有自定义rule的需求，官方文档上不是很详细阐述，这里自己记录一下。划重点：主要是利用rules的validator属性来自定义校验规则，用法如下// 自定义校验规则const checkPasssword = function (rule, value) { const reg = /^[a-z].*[0-9]|[0-9].*[a-z]/; if (!reg.test(value)) { return rule.message; }}Pa原创 2021-06-22 10:13:29 · 3293 阅读 · 0 评论 -
微信小程序map组件触发bindmarkertap事件也会触发bindtap事件
在使用微信小程序使用map组件开发时遇到了一个问题，应该是官网的bug，就是当添加marker标签后同时给地图原创 2021-06-16 13:49:04 · 5434 阅读 · 2 评论 -
百度地图插件DrawingManager清除特定覆盖物
利用百度地图测距工具创建的形状覆盖层之后，往往想对图层半径做一些判断，这时候就会遇到问题，如果半径大于某个值时就需要取消创建覆盖层这里是取消的方法：// 绘制覆盖层this.drawingManager = new BMapGLLib.DrawingManager(this.map, { isOpen: false, enableCalculate: true, enableSorption: true, sorptiondistance: 20,原创 2020-12-09 14:59:18 · 3013 阅读 · 0 评论 -
umi引用第三方插件库(使用百度地图为例)
umi框架是一个插件化的企业级前端应用框架，是很多react开发者的首选，以下记录在使用该框架中碰到的问题。、在使用中需要引入第三方插件，使用过dva框架的同学肯定第一时间想到了index.html的heade中引用，但是在umi中好像暴露这个文件，所以详读了下api，找打了解决方法。umi几乎所有的配置项都在.umirc.js（ts为.umirc.ts）文件中，添加第三方插件也不例外，这里使用的是umi的plugins属性（https://umijs.org/zh-CN/config）然后原创 2020-11-03 11:33:48 · 5286 阅读 · 8 评论 -
百度地图绘制自定义区域
使用百度地图开发中碰到需要在地图上自定义选择某个区域，并且可以改变区域大小，然后进行某些操作。这里用到了百度地图GL版的开源工具库BMapGLLib的自定义绘制功能，详情可查看https://github.com/huiyan-fe/BMapGLLibcode:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-原创 2020-11-03 10:58:10 · 6098 阅读 · 1 评论 -
百度地图添加自定义边界值
使用百度地图过程中常常需要给某个区域添加边界，这里有两种方法：一种是使用百度地图自带的Boundary方法，通过输入区域名称可自动给地图添加边界不足：这种方法只适用于省市区级行政区域的，如果想自定义区域增加边界，则不能使用该方法code:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.原创 2020-11-03 10:07:02 · 5602 阅读 · 2 评论 -
vue实现div可拖动位置也可改变盒子大小
以下是效果图：实现了div盒子在固定区域的拖动，也可改变盒子的高度和宽度，当超出边距后无法继续改变大小这里说一下大致原理：拖动和改变大小是分开来操作的，接下来分别说一下盒子拖动这里用到了js的三个鼠标事件，分别是onmousedown(鼠标按下)、onmousemove（鼠标移动）以及onmouseup(鼠标松开)，大致流程就是鼠标按下拖动图标进行拖动时，动态获取当前div的left和top再重新赋值给当前div的top、left值，当鼠标松开再清除事件，至于固定在某个区域内拖动，在赋值的时原创 2020-09-16 09:51:54 · 7602 阅读 · 3 评论 -
echarts生成三维柱状图
这里介绍下如何生成三维的柱状图，例如，按照月份展示两个产品在2010年和2011年的统计数量，这里x轴标识月份，一根柱子代表一年的几个产品，这里是两年两个产品的示例，多个年数或产品同样的方法，不在赘述。以下是核心代码部分，主要利用了堆叠柱状图的思想，然后再通过stack属性对产品进行分类，最后再format tooltips展示option = { tooltip: { trigger: 'axis', formatter: function (param原创 2020-07-27 17:24:27 · 2899 阅读 · 0 评论 -
vue实现两个区域滚动条同步滚动
项目开发中，遇到一个比较两个form差异的需求，但当item过多就需要滚动条，这里就用到了滚动条同步的地方，其实原理和git的差异比较差不多，这里来做一下分析。原创 2020-07-14 18:03:00 · 8687 阅读 · 10 评论 -
template的作用
vue开发中经常会用到template，这里记录一下他的作用:template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上原创 2020-07-03 11:50:42 · 3406 阅读 · 0 评论 -
swiper使用笔记-禁止某个div或slide左右切换
swiper是很强的一个轮播组件，不仅兼容web端还兼容移动端，是很多开发者轮播插件首选的一个组件。这里记录使用插件中的一些笔记。1、禁止轮播组件左右切换使用场景： 当轮播页中存在子页面（弹出层以及二级页面）的时候，有时不希望在这些页面或者div上还能进行滑动操作，影响用户体验。解决思路：使用插件自带的noSwiping禁止切换的一些方法。具体方法：分以下情况禁止所有slide滑动<div class="swiper-container"> <div clas原创 2020-05-28 10:02:37 · 2456 阅读 · 0 评论 -
dva框架兼容ie浏览器常见问题
基于dva框架兼容IE浏览器常见问题收录1、打开浏览器出现空白，控制台报错“对象不支持“startsWith”属性或方法” 解决方案： a、安装babel-polyfill npm install babel-polyfill --saveb、index.js入口文件顶部引用 import 'babel-polyfill';2、IE浏览器GET请...原创 2020-02-27 11:15:46 · 828 阅读 · 0 评论 -
antd 全国省市级联框数据源
const addressData = [ { "value": "北京市", "label": "北京市", "children": [ { "value": "北京市", "label": "北京市" } ] }, { "value": "天津市", "label": "天津市...原创 2019-12-20 11:23:26 · 859 阅读 · 0 评论 -
dva框架二级路由刷新出现空白页
在用dva框架开发项目中，发现当出现二级路由时，重新刷新页面会出现空白页面；并且控制台会报错；Uncaught SyntaxError: Unexpected token <出现这种情况的原因是在你的index.html文件中，引用index.js文件使用的相对路径，当出现二级路由时，假如说是localhost:800/first/second;那么你的引用如果是相对路径，浏览器会去...原创 2019-12-19 14:11:11 · 1265 阅读 · 0 评论 -
webpack学习笔记——入门篇
webpack讲解分析1、什么是Webpack？WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文...原创 2019-11-29 12:55:57 · 351 阅读 · 0 评论 -
lodash学习笔记—— 数组对象比较函数
_.difference(array, [values])difference方法可以将两个数组进行递归比较，生成一个新的不同数据得数组：安装：npm install --save lodasheg:const array1 = [ { id: 1, plantCode: 'ShP', workshopCode: null, ...原创 2019-11-27 16:40:49 · 5080 阅读 · 0 评论 -
vue学习资源分享
一下总结了些vue学习过程中的文档、文章、项目以及视频。文档&社区 Vue.js官方网站（中文） Vue论坛 vue-router 组件库 文章 《Vue.js：轻量高效的前端组件化方案》 《Vue.js 和 Webpack》(一)(二)(三) 《尤小右采访》作者的采访有一些设计理念 腾讯全端 AlloyTea...原创 2019-10-18 15:41:30 · 360 阅读 · 0 评论 -
app制作简单秒表功能
使用react-native 开发app时制作秒表功能，可用react-native-stopwatch-timer插件效果图如下：开发步骤：1、安装依赖：npm install react-native-stopwatch-timer引用：import { Stopwatch, Timer } from 'react-native-stopwatch-timer'...原创 2019-09-26 09:30:10 · 724 阅读 · 0 评论 -
Javascript 过滤删除前后所有空格
第一种：循环检查替换//供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s){ if(s == null) { return ""; } var whitespace = new String(" \t\n\r"); va...转载 2019-08-22 16:45:55 · 631 阅读 · 0 评论 -
创建Vue项目
1、安装vue-cli打开cmd: (-global:全局安装)npm install --global vue-cli2、创建项目：cmd打开项目工作空间(test为项目名)vue init webpack test然后终端会出现一问一答模式：这里有几个需要说明一下，没说明的直接回车选择默认就好，对项目没多大影响：“Project name”：这个是项目名称，默认...原创 2019-04-08 11:21:19 · 461 阅读 · 0 评论 -
使用nvm管理多个node版本
实际项目中经常会碰到需要多个node版本之前切换，往往一个node版本不能很好的支持。所以推荐使用nvm包管理器来实现多个node版本之前的切换和使用：nvm安装：下载地址：https://github.com/coreybutler/nvm-windows/releases这里选择了1.1.7版本的安装包下载解压得到一个 exe 可执行文件，安装，这里不选择默认安装路径...原创 2019-09-22 10:14:45 · 753 阅读 · 0 评论 -
react项目通过iframe方式引入html页面
项目中会碰到在react项目中引入html静态页面的需求，以下是解决方法：主要实现：通过<iframe>方式引入，以下是核心代码部分：import data from './data.html'; // 引入需要引用的html文件class Data extends Component { render() { return ( <ifra...原创 2019-09-09 17:13:50 · 27350 阅读 · 17 评论 -
onresizes事件多个页面调用报错
react项目中当多个页面使用window.onresizes事件来实现自适应时会出现以下错误，原因是因为window.onresizes是个全局事件，多个使用会产生页面间相互影响，进而出错。PathProxy.js?9a80:733 Uncaught DOMException: Failed to execute 'arc' on 'CanvasRenderingContext2D': Th...原创 2019-07-08 11:34:22 · 1804 阅读 · 0 评论 -
js常用正则表达式记录
1、js常用正则表达式：手机号/^1[3456789]\d{9}$/2、js常用正则表达式：中英文/^[\u0391-\uFFE5A-Za-z]+$/3、js常用正则表达式：邮箱/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/4、js常用正则表达式：大于0的实数/^(0...原创 2019-06-15 09:52:10 · 454 阅读 · 0 评论 -
vue 自定义验证规则rule只能为数字
vue中自定义rule进行校验input框只能为数字vue<el-input v-model="age" maxlength="3"/>js const isNum = (rule, value, callback) => { const age= /^[0-9]*$/ if (!age.test(value)) { c...原创 2019-04-19 10:54:35 · 38911 阅读 · 3 评论 -
设置多个li居中于ul
在用到ul时经常无法让多个li居中于ul中，导致显示不好看，之前通过设置margin-lefe为负数的方式来设置，但当改变屏幕分辨率后不能很好地兼容，又要重新设置left值，因此发现这个方法；ul{ display:table; text-align:center; margin:0 auto; padding:0;}设置上述属性后，便可实现居中。...原创 2019-04-15 14:57:46 · 690 阅读 · 0 评论 -
时间戳转换为指定格式时间
前端中经常遇到时间戳转换为不同格式问题，这里封装了函数供使用；function timeChange(dateString, formdate) { // dateString: 获取的毫秒数或标准时间 // formdate: 返回的日期格式 默认 yyyy-mm-dd HH:mm // 获取年份,月份,天数,小时数,分钟数,小于10的显示01-09 if (dateStr...原创 2019-04-26 16:17:22 · 1563 阅读 · 0 评论 -
HTTP状态码整理
状态码的职责是当客户端向服务器发送请求时，描述返回的请求结果。借助状态码用户可以知道服务器端是正常处理了请求，还是出现了错误。学前端的对HTTP状态码一定要熟悉，这里特地整理出去供大家和自己查阅：状态码主要分为5类： 类别 原因短句 1** Informatuon(信息状态码) 接收的请求正在处理 2** Success（成功状态码） 请求正常...原创 2019-04-08 10:45:19 · 353 阅读 · 0 评论 -
前端：利用js动态显示当前时间
封装了一个动态显示当前时间的函数：效果：html:<div id="start" style="height: 50px; width: 100%; background: #000000; color: #fffffff; text-align: center" />js ： $(function () { var t = nu...原创 2019-01-04 16:11:06 · 7562 阅读 · 0 评论 -
java时间转换为标准时间
封装了个函数将Java时间转换为标准时间：效果图：js: function todate(inputstr) { var startTime = inputstr.split(","); inputstr = inputstr + ""; //末尾加一个空格 var date = ""; var month = new Array(); ...原创 2019-01-04 15:45:35 · 3490 阅读 · 0 评论 -
利用js防止浏览器后退操作
写了一个阻止浏览器跳转后执行后退操作的功能：效果图：跳转后： 主要js: //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, n...原创 2019-01-04 15:25:13 · 688 阅读 · 0 评论 -
gitLab本地项目上传
1、gitLab中创建项目2、设置完成后，回到本地项目，右击-- git Bash Here<1>输入git config --global user.name "你的用户名"<2>输入git config --global user.email "你的邮箱"<3>输入git init<4>输入git remote add o...原创 2019-07-06 23:29:47 · 590 阅读 · 0 评论 -
echarts增加loading加载效果
echarts设置数据加载前显示loading动画效果：划重点：利用echart自带showLoading()方法；eg:在调用setoption方法之前调用showLoadin()方法；之后再调用hideLoading()方法import echarts from 'echarts';const mycharts = echarts.init(document.getEle...原创 2019-07-23 17:03:02 · 19983 阅读 · 0 评论 -
js获取当前日期或者指定日期的昨天、上周、上月
开发中经常用到对时间进行处理，获取昨日、上周、上月的日期；一下是封装的方法：获取昨日日期：// 获取昨日日期 getLastDate = () => { const day = new Date(); const lastDay = new Date(day.setTime(day.getTime() - (24 * 60 * 60 * 1000))); ...原创 2019-09-03 10:30:59 · 1514 阅读 · 0 评论 -
echarts自定义表格样式后不能鼠标选中内容
echarts图表数据视图自定义功能后不能鼠标选择不知道大家改造echarts的dataview数据视图后有没有发现，不能进行选择复制了，这个还是比较刚需的，因此研究了一下，给出了解决方法：在optionToContent事件返回的数据最外层添加css样式：“user-select: text”属性；代码如下：dataView: { optionToContent...原创 2019-08-29 11:18:18 · 1224 阅读 · 0 评论 -
修改echarts转化生成表格的样式
echartstoolbox对数据视图（dataview）自定义操作不知道大家有没有和我一样觉得echarts自带的数据视图很难看，想自己动手改造一下，下面就介绍一下：主要是在dataView的contentToOption事件中重定义样式；直接上代码 toolbox: { show: true, itemGap: 5, top: -5, featu...原创 2019-08-29 11:06:04 · 1889 阅读 · 1 评论 -
echarts监控dataview数据视图的关闭按钮事件
项目中会碰到对dataview数据视图关闭按钮事件的处理需求，比如点击该按钮执行其他某个操作。在不改动源码的情况下，echarts其实没有该按钮的事件api，但是有一个contentToOption事件来监听刷新按钮的事件，因此方案改为：将刷新按钮替换为关闭按钮，再隐藏原来的关闭按钮。具体实现如下：代码：toolbox: { show: true, itemGap: ...原创 2019-08-29 10:44:55 · 4395 阅读 · 5 评论