- 博客(13)
- 收藏
- 关注
原创 封装vue组件并上传npm
最近自己对element组件进行了封装,然后想以后要用的时候通过npm进行引用,而不是每次都是把代码挪到项目里面去。主要步骤:封装自己的组件(我是引入了element的组件并进行了封装。)我的文件结构:我封装的组件都是在components文件里面将封装的组件挂载在vue中,并抛出到时候进行打包使用在src下面新建了一个index.js文件,用来写封装了一些组件并抛出。import ADatePicker from '@/components/form/datePicker/A
2021-08-03 11:26:31
453
1
原创 vscode中开启eslint和prettier,对代码进行校验和格式化
我们一个团队在开发代码的时候, 代码的格式和代码的风格要统一,这样子在开发起来也会顺心。我主要是运用了eslint和prettier进行代码的校验,我们已保存代码就会触发prettier进行代码格式化优化。我主要是写的vue框架,所以针对的也是vue。第一步:安装vscode中的插件并开启2.新建.prettierrc.js, eslintrc.js和.eslintignore文件.prettierrc.js文件:prettier的设置文件(按需添加)//文档https://prettie
2021-07-29 20:58:19
2549
原创 Vue.prototype+install全局注册方法
我这边要实现一个弹出窗,可以在项目的任意地方进行一个调用。我是利用Vue.prototype+install全局方法进行实现的引用一下官网的知识点:其实我们就是在vue的原型上挂载一个方法进行改变组件中的属性。步骤一:定义一个文件夹,包含一个vue文件(这里我是实现的弹出窗)和js文件(这里就是写install方法)js文件的说明:引入组件定义一个变量继承这个组件的信息将所传参数传给组件的data数据中挂载在节点上最后自动修改一下弹出框的参数dialogVisible,防止不起效
2021-07-12 21:01:30
657
原创 flex布局(图片自适应展示)
利用flex布局实现多张图片自适应展示实现效果实现方式实现效果实现方式我是利用flex布局来控制的.这样子写的话会有一个问题,因为space-between是两端布局,若是一行的图片没有5个的话,他中间的间距会拉大,不会一直保持这个间距自适应。最后加了一个计算的方法,来判断图片是否撑满了一行,若是没有撑满一行,则我们生成div,将图片撑满。js:/**flex布局计算一行放多少个,没放满往前挤 * PIC_WIDTH: 图片的宽度 * TOTAL: 代
2021-05-25 20:53:41
5016
原创 vue中使用echart地图
vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options总结获取湖南的地图数据https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ在这个网址上可以下载各个省份的地图json实现的效果在这个湖南省地图上面实现的效果:地图的展现地图根据数据展示不同的背景颜色地图涟漪效果的实现地图动态高亮展现数据步骤<div ref="mapEchart" class="echart"></div
2020-07-14 15:09:35
1885
原创 leaflets地图插件
leaflets官方文档里面虽然也有插件的说明,但是客户的需求总是变化无常的,对于一些官方文档上面没有的插件,必须我们自己进行开发。我先前写过leaflets全屏和leaflets的一些说明。1.输入框查询,悬浮在地图上,进行查询定位地图上的点第一步:引入 第二步:在页面上进行引用var searchboxControl=createSearchboxControl(); v...
2020-02-17 14:41:10
567
原创 redux理解
应用中所有的state都以一个对象树的形式储存在一个单一的store中。唯一改变state的方法是触发action(action是一个描述发生什么的对象),为了描述action如何改变state树,你需要编写reducers.import { createStore } from 'redux';/** * 这是一个 reducer,形式为 (state, action) => s...
2020-02-17 10:53:38
195
原创 leaflet地图的一些问题
地图全屏leaflet地图的制作全屏插件全屏的实现react添加监听事件监听键盘事件监听退出全屏事件react中 怎么在componentDidmount中使用addEventListener和componentWillUnmount中使用removeEventListener总结leaflet你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdow...
2019-09-11 10:32:16
2082
原创 Redux和Redux-saga
Redux和redux-saga前言Ant designReduxredux-saga前言我先前一直用的是ant design集成的管理后台进行开发项目,也没有好好的去理解里面的数据是怎么走的,它是通过什么语言集成的,这几天项目不是很忙,所以我进行一下总结。Ant design这个系统其实做的很完美,但是依赖包很多,这里推荐一个适合小型项目开发的管理平台,跟ant design相似,但是它...
2019-07-30 15:40:17
173
原创 Ant Design中Table表单行列合并
Ant Design中Table表单行列合并Table组件实现方法Table组件前几天,客户有个需求,就是把一个excel表做成一个页面,里面的行列都可能会合并。类似这种的:一般第一步都会先看一下ant design的文档,看看是否有相似的。最后发现是有相似的页面。像这种:但是我当时就仅仅只关注了Table组件的colSpan这个属性,这个在这个上面是写死的,当时可能是脑子秀逗了,不...
2019-07-14 21:27:24
10069
5
原创 菜鸟从头理解vue的生命周期
Vue的生命周期从头开始学习Vue的生命周期创建vue项目正题beforeCreate()createdbeforeMountMountedbeforeUpdate和UpdatebeformDestroy和distroyed从头开始学习Vue的生命周期先前为了应付面试,每次看vue的生命周期,但都是简单地进行一下了解。只是看一些博主的文章,但是等我真正面试的时候,面试官问起时,我其实回答的并不...
2019-05-09 13:49:11
458
原创 图片的压缩和裁剪
React手机端和vuePC端图片上传React手机端图片压缩在这里要介绍一下一个插件lrz,插件地址https://github.com/think2011/localResizeIMG/,这个插件确实很好用,我在vue和react框架里面都使用到了。先来说一下在ant-design-mobile中使用。**componentDidMount() {let mythis = this;...
2019-04-25 22:57:41
427
原创 COS上传图片
@TOCCOS上传图片https://blog.csdn.net/qq_41485414/article/details/89208504COS上传图片作为前端人员,先前一直都没有接触过腾讯域名,因为我一直觉得那是后台的一部分,但是这次老大突然叫我学习一下腾讯云,并且做一些操作,刚开始上传图片是到公开的存储桶里面,后来因为资料的特殊性,所以要把资料上传至私有的存储桶。主要我是一个菜鸡,不太会...
2019-04-12 15:36:10
2153
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人