qq_38948398的博客

【代码】Vue+Element页面生成快照截图。

可以看到组件默认显示的format格式大小写是这样的，但是momentJs中format格式转换大小写与element是不一致的，这容易导致报错，所以我这里记录一下。记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题；可以看到年与日的大小写不一致，导致转换格式赋值的时候频频报错；

使用momentJs+Vue实现日历效果

根据自定义设置色系的词云图，词云字体颜色根据你设置的色系数组顺序进行展示。

本篇以win7系统为内容介绍，附上phpstudy官网地址：phpstudy官网下载过后，本地直接安装，注意磁盘安装路径，最好本地有一个独立存放软件的磁盘，方便查找,下载后启动应该是下面这样的一键启动那里可以手动切换本地开启的服务模式，这里我采用的WNMP（windows+nginx+mysql+php），默认的应该是WAMP（windows+appach+mysql+php）采用nginx的原因是做服务代理，这里后面再讲。这里我将一个目前前端常用框架打包后的文件夹放入phpstud

搭建vue- cli3.0脚手架后，在项目根目录下，也就是与package.json文件同级目录新建vue.config.js文件,在该文件中配置const path = require('path');function resolve(dir) {return path.join(__dirname,dir);}module.exports = {chainWebp...

import Vue from 'vue'/* 声明构造函数 */function vueTouch(el, binding, type) {//触屏函数 var _ = this; _.obj = el; _.binding = binding; _.touchType = type; _.vueTouches = { x: 0, y: 0 };//...

PC端项目前端技术栈：Vue+AntVue项目UI框架选用阿里的AntVue，这里总结一下该框架下日期选择框的一些注意事项首先介绍的就是该框架组件v-model绑定的值并不是显示上的YYYY-MM-DD格式,而是moment类型数据，所以采用该组件时，一、你需另行安装momentjs依赖，进行前后端交互传参时的数据处理二、日期选择框官方事例中无年度选择框，只能采用面板切换显隐的方式替代三、年度下拉选择框面板状态不再支持一些组件固有属性，例如过滤禁用日期属性，就算你设置了该属性，面板.

效果图： 好了，开始贴代码 <el-form label-width="60px"> <el-form-item label="日期" style="text-align: left"> <el-date-picker v-model="queryForm.fromDate" type="date" placeholder="选择开始日期" ...

这里以全国城市作为示例

引言维护公司之前的一个项目，使用了vue-pdf插件，本地效果正常，打包线上之后控制台提示一个work.js资源引用404问题已解决，下面介绍埋坑的几个要点位置.vue组件内部是这样引入的tempalte模板部分：<tempalte> <pdf :src="pdfUrl" ref="pdf"></pdf></tempalte>script部分：<script>import pdf from 'vue-pdf';ex

AntdesignVue数字输入框项目中遇到反绑数据的时候，对数字输入框进行值的更改，发现数字输入框可以写值，但是写完后，数值会跳回原来的值，无法进行双向绑定进行数据的更改，看了半天没找到问题所在，后来我将赋值操作进行了修改就解决了，使用Vue官方指定的方式this.$set进行新字段赋值并且回显，这样就不会造成对数字输入框操作后无法进行修改，而我原来的操作是接口获取到数据后，对接口数据进行处理，然后对前端声明变量对象进行复制，类似于Info.num = res.data.data;

使用Vue-cli脚手架搭建项目Vue的话(这里说明一下，我用的是脚手架2.x)，看这里1.使用路由懒加载原理，让文件按需加载，使用的时候再加载出来在路由文件导出的对象加入下面这种格式export default new VueRouter({routes:[ { path: '/', redirect:'./wx_login' },...

Vue数据持久化这里介绍的是Vue项目开发时，因为业务以及交互关系的原因，我们对程序需要做一些状态以及数据的存储，以此避免组件的重复渲染、数据重新请求以及状态丢失，所以这里我记录的是如何在vue项目中持久化数据以及状态Vue项目中我们一般把数据存储到Vuex的公用仓库中，而vuex有一个痛点就是页面刷新的时候，vuex中的数据会回归，看过一个论坛的网友回复，vuex 是什么时候挂在到vue...

因为Vue文本框修饰符.number无法输入小数，所以结合函数写了函数

插件介绍不说明如何安装，只提供插件源码地址链接，链接页面中有作者提供的安装教程1.Vue-Grid-Layout功能介绍：可拖拽布局自动排版组件效果图:前往插件源码地址2.vue-amap功能介绍：以高德地图为基础封装的地图组件前往官方文档地址3.vue-awesome-swiper功能介绍：轮播图（走马灯）组件前往插件源码地址功能示例api地址4.vue-skeleton-webpack-plugin功能介绍：骨架屏插件前往插件源码地址...

使用Ant Design的Table表格遇到的问题table表格同时使用fixed和ellipsis会造成固定列的内容溢出宽度时，会直接撑开设定的宽度，ellipsis不生效且每一列的ellipsis设置都将不起作用，固定列撑开的宽度会覆盖没有设置固定列的表头，因为时间不多，就不将造成的示例敲出来贴出来贴图了，我这里就讲下解决方法antdesign表格中有提供自定义表格内容的api，根据api插槽自定义内容标签，然后给标签添加类名，类名样式宽度，按照你设定好的表格列宽度进行即可，内容溢出

项目场景：element+vue    后台管理系统今天使用elementUI的表单添加数据出现，点击回车键，页面自动刷新，并且在原路由里面加了一个？，解决办法如下：&lt;el-form  :inline="true" @submit.native.prevent&gt;&lt;/el-form&gt;el-from 加上 @submit.native.prevent具体是参考e...

目录工具介绍：weinre安装开启开始调试前言：前面一篇主要讲的是视图层面上的同步预览效果，这一篇的内容涉及就是像PC端一样调试css和js以及捕捉接口请求工具介绍：weinre百度搜索关键词weinre，就可以看到如下信息可以看到第一页的内容都是关于这个工具的介绍，所以从此可见这个工具的调试方案还是比较OK的。因为从百度检索中可以看到关于这个工具介绍的最新一篇博客都是18年的，距今对于我们开发人员也算是就远了，所以这里我对使用这个依赖工具过程从头到尾梳理了一下安

项目中我们各种日期选择都会用到，这里介绍项目中使用Antdesign-vue框架的日期选择框遇到的问题官方示例控件中没有年度选择的示例，这里总结了网上的网友提到的一些api，做出来的效果，发下效果图官方文档提供了一个mode属性控制时间类型，但是mode设置为YYYY后，你会发现面板无法操作，官方对此也做了介绍原因这里也说明了，然后说说我的实现过程<a-form-item label="年度:" :label-col="{ span: 8 }" :wrapper-col="{

import axios from 'axios';//返回一个Promise(发送post请求)export function fetchPost(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response...

varfix=document.querySelector(".el-table__fixed");varwb;if(fix){wb=XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix),{raw:true}...

热力图绘制方案echarts + canvas高德地图kriging + canvas代码分享讲讲项目背景，大屏专题图要绘制一个地区区域环境扩散效果，初步一开始感觉是一个热力图，后面经过描述确认不是，而是一个根据点位进行区域绘制的等值面我以为的:最后实际上的第一张图是ui效果图，第二张图是确定功能需求后绘制的，说实话，看到ui效果图时我第一反应是热力图，因为这个扩散效果太像了，当时自己想的是这个图有河道，那就说明是地图，是地图那就说明可能需要缩放和拖拽，一开始项目中因为是大屏数据可视化，已经

Vue项目中created生命周期重复执行，未缓存下来，原因是什么呢？

搜索关键字：scrollbehavior资源博客:https://blog.youkuaiyun.com/wandoumm/article/details/80270865https://blog.youkuaiyun.com/q3254421/article/details/84777614https://www.cnblogs.com/sophie_wang/p/7880261.html...

记录vuecli3.x打包时遇到的迷之问题创建了一个自主测试插件的项目，准备打包放到服务上的时候，用着脚手架打包的万能指令npm run build运行后，发现报错 Invalid configuration object. Webpack has been initialised using a configuration object that does not match ...

先贴效果图主要使用官方api提供的配置项 customRender: (value, row) => { const obj = { children: value, attrs: {}, }; obj.attrs.rowSpan = row.rowSpan; ret

/** * @description 判读是否为外链 * @param path * @returns {boolean} */export function isExternal(path) { const reg = /^(https?:|mailto:|tel:)/; return reg.test(path);}/** * @description 判读是否为图片 * @param path * @returns {boolean} */export functi.

前言：Vue-router4.x动态添加路由报错vue-router4.x之前的版本动态添加路由，都是声明两个数组存放路由：一个是静态路由(用于放置无需登录访问权限的页面路由，也就是游客页面)const defaultRutes = [...];一个是动态路由(用于放置登录请求接口后获取的当前用户可访问权限路由数组)const asyncRoutes = [...];本来按照之前的方式使用this.$router.addRoutes(asyncRoutes); //

// 全局安装cnpm install rimraf -g// 删除node_modules文件夹rimraf node_modules// 删除成功vuecli3.x单页面应用vue.config.js文件基础配置const goods = require('./data/goods.json');const path = require('path');// ...

开发中有些业务场景组件数据是不用刷新的，我将这些常用数据比作我们开发语言中的常量，一般情况下是不做改变的，也不用重新做接口请求，这里就是记载Vue中我们如何缓存组件数据以及它的生命周期首先我们前端都知道SPA应用——单页面应用程序，是有一个入口文件的，在Vue中的页面模板入口是一个App.vue文件，这个文件是相当于我们传统布局最外层的DIV。<template> &...

每个项目在负责交接的时候，都会遗留大部分的问题，而好的注释和详细的文档是我们快速接手的必要前提，所以这里记录一下在vue脚手架3.x中集成Jsdoc的方式，首先使用shell命令安装插件在全局安装jsdocnpm install -g jsdoc在项目中安装jsdocnpm install --save-dev jsdoc解析js文件生成文档命令jsdoc yourJ...

效果图:框架：Vue+AntdesignVue业务中使用下拉框时，遇到多选但是换行造成整体表单布局不美观，所以这时候需要前端对下拉框做些修整以及改观不多说废话，直接贴代码:view层:<a-form-item label="站点：" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"> <a-select class="sitemore

目录1、NVM安装2、NodeJs安装NPM介绍3、CNPM安装4、YARN安装5、VUE全局安装目前市面上前端开发都不可避免的依赖node进行开发，但是不同项目运用的node开发版本不同，协同开发上会遇到许多不兼容的问题，所以这里介绍一下前端开发环境的部署流程。1、NVM安装nvm是一个node版本控制工具，可以安装不同版本的nodejs开发，而不影响到另一个项目的开发环境，有点类似于git开发的分支管理，安装地址：https://github.com/coreyb

这里记录一下遇到的一个比较奇葩的问题项目是vue+element+axios ，本地接口调试正常，但是项目部署到正式服务，二次请求接口，状态一直pending，导致页面崩溃卡死，最后排查了好久，发现是element的选项卡组件导致的，官网中element选项卡的内容书写方式是这样的<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first"&

目录luckysheet1.插件引入2.声明excel在线预览编辑组件3.excelJs分解Dom为excel文件流luckysheet文档地址exceljs文档地址前言介绍：原先平台没有要求在线编辑excel功能，excel文件是表单新增记录展现表格信息的一条记录信息，用于展示excel文件名称，支持下载功能，后续可能是客户嫌弃文件下载网速过慢，所以要求支持在线预览和编辑功能。项目周会讨论时提到这个需求，我当时的第一反应是这个功能前端来做的话，从18年开...