- 博客(65)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 如何将资源前端通过 Docker 部署到远程服务器
通过以上步骤，你已经成功地将前端静态网页通过 Docker 部署到远程服务器上，并且可以通过网址访问该静态页面。如果有任何问题，请随时联系。
2024-07-07 17:27:54
776
原创 前端web在线PPT编辑器-PPTLIST
一个基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，力求还原桌面应用级体验。支持导出本地 PPTX 文件，支持移动端基础编辑和预览。您可以在此基础上搭建自己的在线幻灯片应用：
2024-07-07 00:08:16
871
原创 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
7563
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
1399
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
3278
原创 微信小程序map组件触发bindmarkertap事件也会触发bindtap事件
在使用微信小程序使用map组件开发时遇到了一个问题，应该是官网的bug，就是当添加marker标签后同时给地图
2021-06-16 13:49:04
5402
2
原创 百度地图插件DrawingManager清除特定覆盖物
利用百度地图测距工具创建的形状覆盖层之后，往往想对图层半径做一些判断，这时候就会遇到问题，如果半径大于某个值时就需要取消创建覆盖层这里是取消的方法：// 绘制覆盖层this.drawingManager = new BMapGLLib.DrawingManager(this.map, { isOpen: false, enableCalculate: true, enableSorption: true, sorptiondistance: 20,
2020-12-09 14:59:18
2988
原创 百度地图添加热力图
使用百度地图开发中需要用到热力图显示当前区域的流量情况。这里用到了百度地图api2.0版的开源工具库Heatmap的热力图插件，详情可查看http://api.map.baidu.com/library/Heatmap/2.0/docs/symbols/BMapLib.HeatmapOverlay.htmlcode:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type.
2020-11-04 14:58:54
4777
原创 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
5260
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
6090
1
原创 百度地图添加自定义边界值
使用百度地图过程中常常需要给某个区域添加边界，这里有两种方法：一种是使用百度地图自带的Boundary方法，通过输入区域名称可自动给地图添加边界不足：这种方法只适用于省市区级行政区域的，如果想自定义区域增加边界，则不能使用该方法code:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.
2020-11-03 10:07:02
5565
2
原创 vue实现div可拖动位置也可改变盒子大小
以下是效果图：实现了div盒子在固定区域的拖动，也可改变盒子的高度和宽度，当超出边距后无法继续改变大小这里说一下大致原理：拖动和改变大小是分开来操作的，接下来分别说一下盒子拖动这里用到了js的三个鼠标事件，分别是onmousedown(鼠标按下)、onmousemove（鼠标移动）以及onmouseup(鼠标松开)，大致流程就是鼠标按下拖动图标进行拖动时，动态获取当前div的left和top再重新赋值给当前div的top、left值，当鼠标松开再清除事件，至于固定在某个区域内拖动，在赋值的时
2020-09-16 09:51:54
7577
3
原创 draggable拖拽组件使用
项目开发中需要用到拖拽组件，因为前端技术框架是vue，这里就使用了vue的一款拖拽插件vue.draggable，一般基本的需求都能满足，这里使用了多个draggable嵌套，达到两级之前相互拖拽的功能。以下是类似teambition的效果图片，最外层为一个draggable，可以左右拖动，然后每个块里面还有小块，小块组成一个draggable，可以上下拖动，也可以在大的块之间拖动。这里说一下实现原理。首先，要搞清楚draggable的api，这里提供以下博主自己发现的一个vue.dra..
2020-08-27 10:20:42
33564
13
原创 echarts生成三维柱状图
这里介绍下如何生成三维的柱状图，例如，按照月份展示两个产品在2010年和2011年的统计数量，这里x轴标识月份，一根柱子代表一年的几个产品，这里是两年两个产品的示例，多个年数或产品同样的方法，不在赘述。以下是核心代码部分，主要利用了堆叠柱状图的思想，然后再通过stack属性对产品进行分类，最后再format tooltips展示option = { tooltip: { trigger: 'axis', formatter: function (param
2020-07-27 17:24:27
2894
原创 Echarts图表重新渲染时两个图表重叠有阴影
使用echarts中多个图表重新渲染或者同一个图表类型赋不同的数据，就可能会出现图表污染的问题，例如下面这种这种是因为echarts为了节省效率，默认刷新图表会直接调用上一次的数据源，但不同的数据源出现就会出现污染，这里给两种解决方案：1、在重新渲染表格之前调用一次echarts.clear()方法清除原始数据chart.clear(); // 清除图表原始数据chart.setOption(option);2、在setoption的时候多传一个notMerge的参数，使前设置为tr
2020-07-15 16:46:29
2082
1
原创 vue实现两个区域滚动条同步滚动
项目开发中，遇到一个比较两个form差异的需求，但当item过多就需要滚动条，这里就用到了滚动条同步的地方，其实原理和git的差异比较差不多，这里来做一下分析。
2020-07-14 18:03:00
8652
10
原创 template的作用
vue开发中经常会用到template，这里记录一下他的作用:template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上
2020-07-03 11:50:42
3401
原创 v-for遍历数组和对象
vue初学者在使用v-for属性时可能不能区分数组遍历和对象的遍历，这里做一个记录：v-for指令是用来遍历 数组、对象以及整数的，下面依次讲解遍历数组 v-for最常用的可能就是用来遍历数组，接受两个参数（item, index），item为遍历出的每组数据，index为每组数据的索引，可做唯一标识<div id="demo" <el-span v-for="(item, index) in array" :key="index"> {{index}...
2020-07-03 09:06:07
11564
1
原创 原生css+js实现tab切换功能
现在很多的ui框架都集成了tab功能，使用过程中只需按照他们的api套用即可，但在有时jquery项目中会觉得为了一个tab功能再单独调用一个ui库有些小题大做，所以博主这里推荐了原生tab的实现分析：通过display属性控制每一个tab的显示以下是图片示例：以下是代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=
2020-06-17 11:27:36
658
原创 slick插件在tab中不显示（和display:none 冲突）
slick是一款非常强大的轮播组件，所以很多地方都会使用到。最近项目出现了这种情况，就是在tab页中使用slick组件，因为tab是display属性控制的，当轮播slick在隐藏的tab中是不会显示的，因此就造成了，切换tab到轮播页面的时候轮播组件未正常工作，出现轮播页空白的情况。这里其实slick api有提供对应的解决方案，那就是refresh()这个方法，我们要做的就是在tab页切换的时候调用一下refresh方法，让轮播组件重新加载一遍。以下是具体方案：<style>
2020-06-17 10:32:00
1430
原创 js实现鼠标滑动到某个div禁止滚动
项目中碰到一个场景就是当鼠标滑倒某个div的时候，滑动鼠标页面不再滚动。这里主要是当鼠标滑动到该div时，监听滚轮事件并通过preventDefault()事件来阻止滚动事件，以下是例子eg:#wrap { position:absolute; top:200px; background:#000000; font-size: 40px; width:50vw; text-align: center; .
2020-06-16 09:01:15
3647
原创 swiper使用笔记-禁止某个div或slide左右切换
swiper是很强的一个轮播组件，不仅兼容web端还兼容移动端，是很多开发者轮播插件首选的一个组件。这里记录使用插件中的一些笔记。1、禁止轮播组件左右切换使用场景： 当轮播页中存在子页面（弹出层以及二级页面）的时候，有时不希望在这些页面或者div上还能进行滑动操作，影响用户体验。解决思路：使用插件自带的noSwiping禁止切换的一些方法。具体方法：分以下情况禁止所有slide滑动<div class="swiper-container"> <div clas
2020-05-28 10:02:37
2447
原创 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
826
原创 dva配置多环境变量启动
基于dva搭建的项目如何设置多环境变量打包启动，主要配置如下：1、npm安装cross-env cross-env是运行跨平台设置和使用环境变量的脚本，主要解决windows、ios、linux系统下统一配置环境变量的。npm install --save-dev cross-env install cross-env之前试过通过 set API = tes 的方式设置变...
2020-01-17 10:29:37
1040
原创 antd 全国省市级联框数据源
const addressData = [ { "value": "北京市", "label": "北京市", "children": [ { "value": "北京市", "label": "北京市" } ] }, { "value": "天津市", "label": "天津市...
2019-12-20 11:23:26
855
原创 dva框架二级路由刷新出现空白页
在用dva框架开发项目中，发现当出现二级路由时，重新刷新页面会出现空白页面；并且控制台会报错；Uncaught SyntaxError: Unexpected token <出现这种情况的原因是在你的index.html文件中，引用index.js文件使用的相对路径，当出现二级路由时，假如说是localhost:800/first/second;那么你的引用如果是相对路径，浏览器会去...
2019-12-19 14:11:11
1264
原创 lodash学习笔记—— 数组去重
数组去重除了使用js自带的set方法，还可以用lodash的uniq方法：eg:const num = [1, 2, 3, 4, 4, 3];const differNum = [...new Set(num)];console.log(differNum);// [1, 2, 3, 4];但当数组为数组对象时，set方法便不能进行去重，eg:const list =...
2019-11-30 22:35:06
31832
原创 webpack学习笔记——入门篇
webpack讲解分析1、什么是Webpack？WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文...
2019-11-29 12:55:57
350
原创 lodash学习笔记—— 数组对象比较函数
_.difference(array, [values])difference方法可以将两个数组进行递归比较，生成一个新的不同数据得数组：安装：npm install --save lodasheg:const array1 = [ { id: 1, plantCode: 'ShP', workshopCode: null, ...
2019-11-27 16:40:49
5062
原创 xshell命令总结
以下是一些xshell操作的基本命令及解释，整理汇总出来方便查看。确定要杀死进程的PID或PPID# ps -ef | grep httpd以优雅的方式结束进程# kill -l PID运行某个文件./xmr-stak &在linux 里面的清屏命令1、clear命令、这个命令将会刷新屏幕，本质上只是让终端显示页向后翻了一页，如果向上滚动屏幕还可以...
2019-10-18 15:47:43
3390
原创 vue学习资源分享
一下总结了些vue学习过程中的文档、文章、项目以及视频。文档&社区 Vue.js官方网站（中文） Vue论坛 vue-router 组件库 文章 《Vue.js：轻量高效的前端组件化方案》 《Vue.js 和 Webpack》(一)(二)(三) 《尤小右采访》作者的采访有一些设计理念 腾讯全端 AlloyTea...
2019-10-18 15:41:30
359
原创 antd select得defaultvalue属性不起作用
react项目中会碰到使用antd的表单验证中使用select的defaultvalue属性不起作用，这是因为form中经过getFieldDecorator包装的控件后不能用控件的value、defaultValue等属性来设置表单域的值，默认值可以用getFieldDecorator里的initialValueeg:<Form.Item ...
2019-10-15 14:42:58
7201
原创 react antd自定义表单验证
在使用antd开发web端时经常用到表单校验，但有时antd提供的校验规则不能满足我们的需求，这是就用到了，antd中form的自定义检验方式进行我们的校验：eg:<Form.Item key="code" label="动作代码" {...MODAL_FORM_ITEM_LAYOUT} ...
2019-10-14 13:46:55
1169
原创 gitLab或者gitHub设置ssh方式clone代码
在使用git克隆代码时使用http的方式每次都会提示输入用户名和密码，每次用起来都很麻烦。所以建议使用ssh的方式克隆代码。设置一次以后每次都直接clone代码即可：1、给自己gitLab或git的邮箱设置ssh key，命令如下：打开git bash：输入以下代码ssh-keygen -t rsa -C 'xxx@xxx.com' #-C 参数是你的邮箱地址生成后，即可...
2019-09-27 15:26:03
5172
原创 不损坏数据的情况下将其他盘的容量分给c盘
震惊，分区竟然可以这样操作！在使用系统默认的分区扩展中会碰到不是相邻的盘符不能扩展的问题，这里给大家推荐一个应用可以完美将其他盘符的多余空间分配给c盘或其他盘符，亲测有效，超级好用，使用起来很简单！第一步，官网下载：http://www.disktool.cn/index.html下载之后，根据向导安装（最好安装在c盘，具体为啥我也不知道）即可；安装好后，打开应用如下；...
2019-09-27 14:16:40
3887
7
原创 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
原创 使用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
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人