- 博客(27)
- 收藏
- 关注
RSS订阅
原创 Vue+博客+分享（Vue纯干货组件）
起步从2019年开始学习Vue，这个博客我想将项目中遇到的好的插件的使用方法、踩坑经历总结下来，便于在以后的项目中使用。为了更加便于使用，就内容而言，除了在github上可以看到demo的源码，还有在网页中增加了演示的部分。以后会更新更多我在项目中的踩坑经历、插件使用记录，欢迎来访~如果觉得我有更多进步的空间，还请包涵和指出喔。那就先定一个小目标吧~~ 2020年要完成20+篇的分享。...
2020-02-19 15:32:26
561
原创 Vuex数据设计和实现
Vuex是项目中数据共享的重要组成部分，本文章总结个人在项目中使用Vuex的使用方法。设置项目目录src/store在这将actions，getters，mutations，state，单独抽象成一个文件进行管理。为了使mutation看起来更加简洁明了，将mutation-types也分割出来统一管理。├── store ├── index.js # 我们组...
2020-02-14 15:34:42
178
原创 monitor
monitor可拖拽大屏演示系统，目的是为了能够方便大屏系统的快捷生成，通过拖拽的方式完成图表的搭建。不用关心设置图表的尺寸，拉伸图表即可控制大小。能够保存图表在页面上的位置信息，大小信息，下次打开时可还原上次图表状态。能够通过文字提示的方式控制图表显示的参数信息，而不需要去代码配置它。支持全屏预览效果。支持配置文件信息的下载。支持主题添加，内置了 e-charts 的一些主题，选择后可以直接在图表上应用。保存文件，编辑文件，删除文件基础图表基础图
2020-07-03 13:56:16
245
原创 输入URL到呈现网页，中间发生过程
1. DNS域名解析浏览器DNS缓存 ->操作系统DNS缓存 ->hosts缓存 ->域名服务器2. 三次握手建立TCP连接客户端：ACK=0,SYN=1服务器：ACK=1,SYN=1客户端：ACK=13. 向服务器发起Http请求查询字符串，get请求在URL中，post在http消息主体中get请求可被浏览器缓存，post不会g
2020-03-04 18:06:37
523
原创 css元素选择器（后代元素选择器、子元素选择器、伪类、伪元素、:first-child、:first-of-type区别等）
元素选择器首先需要知道元素之间的关系：父元素：直接包含子元素的元素子元素：直接被父元素包含的元素祖先元素：直接或间接包含后代元素的元素后代元素：直接或间接被祖先元素包含的元素兄弟元素：拥有相同父元素的元素后代元素选择器作用：选中指定元素的指定后代元素语法：祖先元素 后代元素 {}div span { color: red;}<div> <span&g...
2020-03-01 22:00:44
1638
转载 《CSS揭秘》-总结47个Css技巧（一）：常用的背景与边框技巧
1. 设置半透明边框无效？使用 background-clip padding-box 解决。background whitebackground-clip padding-box // 通过background-clip属性来调整，初始值是border-box，意味着背景会被元素的border box（边框的外沿框）裁切掉border 20px solid rgba(255,255,...
2020-02-27 17:56:28
700
原创 理解Vue递归组件，实现Tree树形控件实例~
思考了两天时间，准备仿照ant-design-vue实现一个基于vue的树形控件。主要用到了vue递归组件思想、input的CheckBox类型输入框的使用。需求能够将传入的Json数据生成树形目录。能够初始化选中节点。能够手动选中节点，最终可将所有选中节点打印出来。能够在初始化禁用节点。能够折叠树形目录。修改原生CheckBox样式。实例截图做好的树形控件如下所示，点击获取...
2020-02-26 22:55:11
4835
1
原创 flex实现中间文字，两边横线（1px）
学习了实现1px边框的实现方法。迫不及待的想要记录一下。顺便利用flex布局+1px边框实现一个 简单的中间文字，两边横线的组件。演示首先来看组件的需求：左右两边的横线在移动端显示为1px。中间内容部分可以随意传入文字内容。同时不论文字的多少，两边的横线会随着内容增大而减小，直到内容占据的最大宽度为40%。根据以上需求，我们来制定步骤。1px边框实现mixin.styl首先...
2020-02-24 17:54:54
977
原创 tree-cli（踩坑）生成你想要的目录树
由于写README.md时需要用到展示目录树的功能，在搜索了一番后发现tree-cli这个插件符合要求， 够美观了。遂决定使用它~但是在使用过程中，按照github上的使用说明或者npm上的使用方法都 不能忽略node_modules文件夹。最终尝试了多种格式后，终于成功~安装我安装的版本是0.6.4。npm i tree-cli选项在options中看到的命令说明如下（仅列举...
2020-02-24 14:17:42
1642
原创 2020知识点总结-更新中
split、splice、slice区别for…in语句用于遍历对象或数组的属性。遍历时会枚举原型链上的所有属性，过滤这些属性的方式是使用 hasOwnProperty函数。Object.prototype.method=function(){ console.log(this);}var myObject={ a:1, b:2, c:3}for (var key i...
2020-02-24 14:00:18
140
原创 基于Vue的Dialog对话框组件的实现
今天来实现一个基础的对话框组件~演示点击open按钮打开对话框点击取消在控制台打印出“已取消”，并关闭对话框点击确定在控制台打印出“已确定”，并关闭对话框APImask：控制是否展示遮罩info：对话框显示内容icon：对话框提示图标，有success，error，info，question可选cancelText：设置取消按钮文字okText：设置确认按钮文字事件...
2020-02-24 13:59:10
7582
原创 better-scroll实现轮播图组件
起步上一次基于better-scroll实现了移动端纵向滚动的演示。这一次继续利用它实现一个横向滚动——轮播图组件。演示如下：首先来整理一下需求：能够根据异步请求到的图片数据进行轮播图展示。能够控制它是否自动播放，是否循环播放，自动播放间隔。能够提示当前播放页。Mock数据由于是一个demo，从网上找了几张图片写成json格式，数据用于模拟接口数据。这里用到了mock.js。A...
2020-02-21 10:08:19
1171
2
原创 学习：移动端scroll组件的抽象及应用
学习了黄轶老师的课程后，想要对better-scroll的应用进行总结。better-scroll是常用的移动端解决滚动需求的插件。 今天就利用它实现一个scroll的基础组件，可以解决获取滑动的实时位置、上拉加载、下拉刷新等功能。抽象出来的scroll组件以后可以用个各个项目中，功能可以根据better-scroll继续完善下去。在src/base/scroll.vue<templ...
2020-02-19 14:46:37
265
原创 Vue中混入（mixin）的应用
随着深入vue的学习和使用，在文档中使用mixin来减少代码的复用可是非常省心的呢。混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（vue生命周期，methods，computed，watch）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项，实现了一处代码多出复用的功能。 下面来看看基本使用方...
2020-02-15 16:10:59
514
原创 Vue中使用JS类的封装及应用
在vue中使用类的封装可以创造出多个具有相同属性或方法的实例。实例们具有统一的属性和方法，能够保证数据的一致性。代码更加简洁，只需要将参数对象传入即可。例如现在有如下需求(1、2)：类A，需要包含编号id，名称name，种类type，图片url。export default class A { constructor(id, name, type, url){ this.id = ...
2020-02-14 14:21:13
4317
原创 关于原型对象的小结
原型prototype我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象。
2020-02-11 10:38:17
153
原创 Vue项目中常用的插件-个人总结
Vue项目中常用的插件resize-detectorNProgresseslint-plugin-prettiereslint-config-prettierresize-detector地址：http://npm.taobao.org/package/resize-detector用于监听元素大小改变时，页面的渲染。常用语echarts图表随窗口大小变化时而改变。NProgressNP...
2020-02-10 11:58:42
695
原创 Vue高效的构建打包发布
项目快结束啦，今天学习怎么优化打包项目，ヾ(◍°∇°◍)ﾉﾞ在命令行中输入以下命令，在dist下生成report.html，打开可以看到每部分大小~npm run build -- --report在项目中较大的有moment.js，但是里面的语言包没有用到，因此在vue.config.js中配置如下，用于忽略语言包。再次打包后少了约210k。优化moment.js：const w...
2020-01-02 15:17:22
259
原创 使用工厂方法和构造函数创建对象
1. 使用工厂方法创建对象：通过该方法可以大批量的创建对象。function createPerson(name) { // 创建一个新对象 var obj = new Object(); // 向对象中添加属性 obj.name = name obj.sayname = function() { alert(this.name); } // 返回新对象 return obj...
2019-10-27 17:30:30
534
原创 js作用域及声明提前
全局作用域在页面打开时创建，关闭时销毁。在全局作用域中有一个全局对象window，可以直接使用。由浏览器创建，可在页面中使用。在全局作用中创建的变量，都会作为window对象的属性生成。var a = 10，可用window.a调用。创建的函数都会作为window的方法生成。var a = 10;console.log(window.a) //等于console.log(a)fun...
2019-10-22 15:20:59
148
原创 ant-design-vue使用记录
向表单组件传值时（例如需要修改某一数据的值，通过表单传递给后台），报错You cannot set a form field before rendering a field associated with the value.可能的原因有两个，一是在表单还未渲染完成就向其传值，导致报错。二是利用this.setFieldsValue(value)设置值时传递了多余表单项。解决第一点：使用...
2019-10-16 19:30:44
367
原创 使用axios.defaults.headers.common["token"]无效
在请求需要token认证的接口时，配置了axios默认请求头如下。但奇怪的是第一次请求时不会添加token，之后再次点击时才会加上token。axios.defaults.headers.common["token"] = localStorage.getItem("token");将axios请求拦截器修改后可以正常使用。/* 请求拦截 */axios.interceptors.re...
2019-10-16 19:11:16
10446
原创 vue项目与ie浏览器兼容问题
项目使用了Vue、Ant Design Vue、Axios等技术。在Chrome浏览器上可以正常显示，但在IE浏览器上页面显示异常。IE浏览器上报错如下：命令行：npm install --save babel-polyfillmain.js中引用：import "babel-polyfill";之后重新运行，在ie下就能够正常显示啦~...
2019-10-15 17:07:26
998
原创 element-ui按需引入修改.babelrc问题
element-ui提示需要将 .babelrc 修改为："presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-cha...
2019-09-25 11:13:16
3659
原创 vue项目中使用axios和封装
安装axiosnpm install axios然后npm install --save axios vue-axios用到post请求时，需要安装qsimport qs from ‘qs’在main.js引入axiosimport axios from ‘axios’import VueAxios from ‘vue-axios’Vue.prototype.axios = ax...
2019-08-08 10:54:55
464
原创 axios使用post方法，后台接收不到数据
this.axios.post('url',{ userCardId: promptValue}).then(res => { }) 2. 添加headers:{‘Content-Type’:‘application/x-www-form-urlencoded’};this.axios({ method:'post', url:'http:...
2019-05-14 17:23:57
1836
原创 vue中引入icomoon彩色图标，stylus文件
在iconmoon中preferences选择Stylus。点击download，解压后有以下文件。将fonts文件夹复制到src目录下common中。并在common目录中添加stylus文件夹。将style.styl文件和variables.styl文件复制进去。（可将style.styl改为icon.styl）我的项目目录如下：更改variables.styl中icomoon-f...
2019-03-15 23:40:15
1431
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人