自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 js将dom转成图片并下载(亲测有效) domtoimage替换html2canvas

之前使用html2canvas转成图片会有各种bug,如canvas被污染,导致不能下载,图片跨域等.最终还是没能解决问题. 最近找到一个新的插件domtoimage,可以完美解决之前的问题,这个只需要引入js,然后调用即可生成图片. domtoimage.toPng(doc...

2019-08-01 10:34:19 1923 2

原创 es6中promise用法详解

1.含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。 2.特点 (1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:p...

2019-01-11 17:50:31 141 0

原创 VUE-CLI 3.x的vue.config.js配置说明

module.exports = { baseUrl: "./", //1.默认为 "/":部署在一个域名的根路径上 ; 2. "./":所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径 outputDir: ...

2018-12-10 11:51:35 663 0

原创 vue中element UI可折叠式导航菜单(导航列表根据后台数据渲染-动态加载导航菜单)

版本一:可折叠式,数据前台自定义 <template> <div id="index"> <el-aside width="152px" class="asideNav...

2018-11-14 17:48:20 12954 0

原创 vue+element UI实现树形表格,带树形选择的复选框

一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ "use strict"...

2018-09-03 09:37:00 56831 51

原创 vue组件传值的详细使用教程(父到子,子到父,兄弟间,祖孙间, 全局数据管理)

父到子: father.vue中: <router-view :data="d" msg="hello"></router-view> data() { return { d: "发送给兄弟的数据...

2018-07-31 19:37:50 108 0

原创 日历日程安排表格calendar

自定义vue日历组件,可用于日程安排,人员分工 组件:引用了moment插件和iview的日期选择组件 <template> <div class="canlendar-container"> <div class="t...

2020-03-04 10:44:53 309 1

原创 vue-html5-editor插件png图片上传失败解决方法

jpg可以正常上传,png就会上传失败.这是因为开启了图片压缩,导致Content-Type:image/jepg,以及内部文件编码问题.只需要将压缩参数配置设置为null即可 以下是上传png图片时开启压缩时: compress:{ width:1600, height:1600, ...

2019-11-18 19:38:37 220 0

原创 vue-cli3移动端适配插件

1.安装2个插件: npm i lib-flexible postcss-px2rem -D 2.在vue.config.js中添加这项配置: css: { loaderOptions: { css: {}, postcss...

2019-10-17 14:39:59 157 0

原创 安卓和iOS移动端调试工具vconsole使用

有时候要在移动端调试项目通过alert很不方便,而vconsole.js就可以解决这个问题. 它相当于谷歌浏览器的devtools,只是比pc端的要简陋一些. 原生js使用: 在<header>头部引入: <script src="https://cdn....

2019-09-02 16:59:05 662 0

原创 echarts改变颜色

传送门:https://blog.csdn.net/QH_JAVA/article/details/52495675 多柱状图修改颜色方法:直接配置color:['red','blue','green'] var colorList...

2019-08-25 19:48:48 1032 0

原创 vue项目刷新当前页面最优解决方式

一般刷新页面可以用location.reload(true),history.go(0) 等方法,但是这对vue项目很不友好,会是页面重新加载,出现暂时性的空白,而且耗费性能,所以vue项目最好不用这些方法,下面介绍2种更好的方法. 方法一:带上当前页面路由跳转到一个重定向的页面,重定向页面再跳...

2019-08-19 18:06:55 1335 1

原创 elementUI添加插槽(对话框插槽)

<el-dialog :visible.sync="dialog" width="400px" center> <template slot="title"> ...

2019-07-10 18:56:55 824 0

原创 vue之slot插槽

1. 新建compA.vue组件,内容为: <template> <div> <div class="head"> <slot name="head">具名插槽-头</slot> ...

2019-05-30 14:10:15 46 0

原创 vue之watch(watch的高级用法)

watch主要是监听data或props中的值的变化,但是如果这个值是一个对象,对象内的某个属性发生了改变,有可能会监听不到变化,此时的解决办法是:将代码一改写为代码二 代码一:(普通写法) watch: { obj(newValue, oldValue) { //do somet...

2019-05-30 11:38:40 551 0

原创 vue组件传值之bus(多用于兄弟组件)

1.在main.js中,new一个空的vue挂在到vue原型上: Vue.prototype.$bus = new Vue(); 2.在demo.vue中使用bus发送数据(可以通过点击事件触发) this.$bus.$emit("sendData",{data:&q...

2019-05-30 10:56:40 1030 0

原创 vue项目中不使用mock也可以模拟数据

一般使用mock模拟数据更好,但是还有一个方法临时模拟一下数据,使用webpack-dev-server去模拟服务器(原理是node的express中的中间件设置路由),具体操作如下: 先在根目录中的vue.config.js中书写如下代码: module.exports = { p...

2019-05-30 10:35:15 484 0

原创 vue项目中使用粒子插件

效果如下: 1.安装依赖: npm install vue-particles --save-dev 2.main.js引入 import VueParticles from 'vue-particles' Vue.use(VueParticles) 3.项目...

2019-01-23 16:27:01 207 0

原创 node中,npm、nvm、nrm、npx、cnpm区别和用法

  Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 npm: 介绍: npm 的全称是 Node Package Manager 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享...

2019-01-23 11:44:04 2307 0

原创 深入理解package.json中dependencies和devDependencies 的区别

现在很多前端框架项目中都需要使用到依赖,但是安装依赖的时候到底应该使用  --save或-S(简写)   还是  --save-dev或-D(简写) 呢,所以需要对dependencies和devDependencies 有清楚的认识。 dependencies:生产和开发都会用到的依赖,最...

2019-01-21 17:21:53 565 0

原创 vue滚动监听插件 vue-waypoint

1.安装依赖: npm install vue-waypoint --save-dev 2.使用: 在main.js中: import Vue from 'vue' import VueWaypoint from 'vue-waypoint' ...

2019-01-11 16:02:14 865 1

原创 非常好用无bug的 vue拖拽插件vuedraggable 可拖放排序

1  安装依赖: npm i -S vuedraggable 2. 使用组件: html: &lt;draggable v-model="myArray" class="drag"&gt; &lt;tr...

2019-01-10 17:31:31 4115 0

原创 css background用法详解

语法:  background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment ;            背景:背景色 背景图 背景图定位/背景图大小 背景图重复 背景图定位位置 绘制...

2018-12-24 16:47:37 141 0

转载 vue项目中,将信息生成二维码图片保存为png格式并下载

生成二维码: https://blog.csdn.net/weixin_37861326/article/details/80362591 保存为png格式并下载: https://blog.csdn.net/weixin_37861326/article/details/80453660

2018-12-19 10:53:12 3051 0

原创 使用vue-cli 3.x 搭建一个vue项目

一. 全局安装vue-cli: (mac要加sudo) npm install -g @vue/cli # 或者 yarn global add @vue/cli 二. 开始创建新项目:有命令方式和ui方式,推荐使用ui方式,下面介绍ui方式具体步骤: 1.命令行输入: vue ui ...

2018-12-10 17:00:16 115 0

原创 vue中elementUI表格数据导出下载为xlsx格式的excel文件

1.安装依赖: npm i file-saver --save npm i xlsx --save 2.在需要的地方引入这两个插件: import FileSaver from "file-saver"; import XLSX from "xlsx&quo...

2018-11-29 17:43:03 4555 1

原创 推荐2个比较好的富文本编辑器

tinymce 支持图片在线处理,插件多,功能强 编辑能力优秀,界面好看。文档为英文,可用谷歌翻译 https://www.tiny.cloud/docs/   wangEditor js和css实现,轻量简洁,开源且中文文档齐全。 设计的UI漂亮,插件基本能满足需求 http:/...

2018-11-08 11:53:56 10866 0

原创 vue路由跳转传递参数,query和params方式传递

vue路由跳转( router-link的to属性,或者this.$router.push()方法 ) 传递参数有两种方式:query和params。 一、query传参: 1.可以传递多个参数:  域名/list?name=aaa&amp;pass=bbb 2.不需要另外配置路由 ...

2018-11-08 10:58:09 1047 0

原创 vue根据表格分页,前端实现方法

html: &lt;el-table :data="tableData.slice((curPage-1)*pagesize,curPage*pagesize)" border style="wi...

2018-11-01 18:40:00 2828 0

原创 vue富文本编辑器Tinymce,功能齐全,对图片等媒体资源操控性好,非常推荐!

使用步骤: 1.在index.html中引入js文件: &lt;body&gt; &lt;script src="./static/tinymce4.7.5/tinymce.min.js"&gt;&lt;/script&...

2018-09-12 18:07:35 3989 3

原创 git冲突解决详细教程

假设有a和b同时在develop分支开发,两人同时修改了logs.js文件。 原logs.js文件: a和b都是采用: 仓库=》git-flow =》建立新的功能。          a修改完logs.js后,先 add .   =》commit  =》    仓库 =》git-flo...

2018-09-11 10:28:25 371 4

原创 vue项目中使用高的地图vue-map,带标注、点击选址和搜索功能

第一步:安装依赖 npm install vue-amap --save 第二步:在main.js中 import AMap from "vue-amap"; Vue.use(AMap); AMap.initAMapApiLoader({ key: "开...

2018-09-07 16:47:57 4939 0

原创 element UI树形控件,若子选中 父也要选中

树形控件html: &lt;el-tree :data="trees" show-checkbox :default-expand-all="exp...

2018-09-06 18:10:49 6658 2

原创 vue 省市区三级联动选择 pc端项目插件element-china-area-data(非常推荐)

使用步骤: 1. npm install element-china-area-data -S 2. import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText,...

2018-08-30 14:39:59 10918 3

原创 vscode前端常用插件:

VUE版: Auto Close Tag Auto Import Auto Rename Tag Beautify Better Comments Bookmarks Bracket Pair Colorizer Chinese (Simplified) Language Pack for V...

2018-08-30 10:45:38 761 0

原创 vue导航守卫

vue导航守卫分两大类,一类是全局使用的,一类是局部使用的。 全局守卫: 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。 const router = new VueRouter({ ... }) 一.全局...

2018-08-24 17:25:59 335 0

原创 vue导航栏通过接口数据遍历动态生成

要做权限管理,导航栏需要根据不同身份来动态生成,实例如下: &lt;el-menu :default-active="defaultActive" class="el-menu-verti...

2018-08-22 11:22:11 5202 6

原创 vue 图片下载到本地,图片保存到本地

必须同源(访问的网站域名与服务器域名一致)才能下载 downs() { var alink = document.createElement("a"); alink.href = this.shop.shoppic_url; alink.download = &...

2018-08-13 16:04:07 26013 15

原创 element UI修改组件的默认样式

element UI修改组件的默认样式,方法有两种: 1.新建global.css,并在main.js中引入import "./assets/style/global.css"; 2.在单个xx.vue文件最后多写一对&lt;style&gt;......&...

2018-08-13 14:45:03 15478 3

原创 elementUI中图片上传upload组件,上传图片数据到后台

结构: &lt;el-upload :action="api.base+api.uploadotherpic" list-type="picture-card" :fil...

2018-08-08 15:10:53 27323 2

提示
确定要删除当前文章?
取消 删除