摸路-优快云博客

原创 vue仿甘特图开发工程施工进度表

表格使用的是elementUI，表头是动态的，根据开始日期的年月和结束时间的年月计算获取；单元格第一行绿色进度条是计划工程进度，第二行绿色是实际功能进度条，红色是实际进度的百分比。

2024-07-16 10:54:16 713 2

原创 Logicflow前端适配flowable需求的工作流开发

会报错，必须在提交xml的时候修改xml的。，这个key是判断流程是否可用，必须设置成。1、logicflow生成的xml，默认。4、节点自定义属性需要在属性前加上。，不然提交时xml会报错。

2022-12-29 10:22:01 2352 11

原创【Highchart折线图横坐标相同悬浮只显示最后加载的点信息】

highcharts折线图数据里如果有两个或以上点的横坐标相同，悬浮时只显示最后一个点的信息，折线图默认是按照x轴定位的，如果要悬浮显示不同的点信息，需要在 series里设置series: [{name: '安装，实施人员',}]

2022-09-09 17:39:07 365

原创 vue-cli3.x项目axios调用本地json数据

今天各种尝试用axios调取本地的json文件，发现都是404，明显路径不对，瞎折腾了一下午才发现vue-cli3的index.html是再public文件夹下，所以"/"对应的路径就是public文件夹，只需要把json文件放到public文件夹下就可以了axios.get("/xxxx.json")...

2021-11-12 18:15:33 697

今天碰到一个问题，就是app客户端内嵌了H5的活动页，调接口一直有问题，但是在浏览器打开没问题，客户端又没法调式，只能跟后端沟通，让查看接口日志看报错情况，后端反馈是token没传，但是在页面绑定的链接和token都显示传了，接口调用情况不能像浏览器查看，我老大给我介绍了Vconsole插件，操作很简单，只要引入cdn链接，引入实例就行。app端打开对应的界面右下角就有vConsole按钮了，可以向浏览器一样查看log和接口调用情况<script type="text/javascript" sr

2021-01-22 16:36:05 626

原创添加商品到购物车动画（fly.js）

添加商品到购物车动画1、库文件引入jquery.fly.min.js是基于jquery的库<script src="js/libs/angular-ui-router.min.js"></script><script src="js/libs/jquery.fly.min.js"></script>2、使用：需要三个目标，目标对象、fly...

2019-04-11 14:43:30 595

原创拾色器插件 Farbtastic

基本用法1、引入 farbtastic.js 和 farbtastic.css（注：基于jquery的，先把jquery引进去，css包含三张图别忘了设置正确路径，不然只能看到一个方块）<script type="text/javascript" src="farbtastic.js"></script><link rel="stylesheet" href=...

2018-12-12 15:59:22 1421

原创 ng-model在ng-if和ng-switch下绑定无效

原因：ng-if 或者 ng-switch 指令会创建一个子级作用域，因此使用 ng-model 在绑定变量时 $scope 是相对父作用域的，因此无法取到该变量。解决方案： 1. 使用 ng-show 代替 ng-if                   2. 绑定变量时使用$parent.o...

2018-11-16 16:21:01 586

原创特殊字符转义encodeURI和encodeURIComponent

       今天在改bug的时候看到测试提出了这样一个问题，创建商品时，商品名为 ~!@#$%^&*()_+{}":>?< 这个玩意的时候创建失败，自动退出。       虽然看创建这个名字很扯淡，但

2018-09-04 14:39:55 2885

原创 angularJs file ng-change无效及上传后清空选中的文件

file ng-chanage失效        Angular对应 onchange 事件的指令是 ng-chanage ，但是在input[type = file] 时 ng-change 是无效的。原因： ng-change 要与 ng-model 一起使用，但是对于file来讲， ng-model 无...

2018-08-14 14:29:30 2360

原创 angularJs HighChart插件

AngularJs调用highChart模块插件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;highchart 插件是一款非常实用而且兼容性强大的数据可视化图标插件，基本常用的图表都有实例，只需要引入模块，然后调整数据结构即可完成此功能。1、在自己的module中引入 highcharts-ng 模块angular.module(&quo

2018-07-30 14:43:04 570

原创 AngularJs可拖拽排序列表

       angular-sortable-view 是一款很好用的angularJs可拖拽列表排序插件，使用也非常简单，其内部封装了几个指令，直接注入模块，调用指令即可实现功能。使用说明：       sv-root 根据名字也能大概猜出功能，主

2018-07-25 10:45:43 3100

原创 AngularJs禁止冒泡事件

$event.stopPropagation();今天看见一个比较恶心的需求，就是点击表格的 <tr> 第一格的 <input type="checkbox"> 选中，问题来了，不知情的情况下去点击<input type="checkbox">会发现无法选中。<tr ng-repeat="item in myProductList" ng

2018-07-19 18:08:18 698

原创 angular select 用法

angular select用法1：数组 // 循环数组 $scope.books = [ {"id": 1, "name": "Chinese", "number": "2"}, {"id": 2, "name&q

2018-06-28 17:55:25 637

原创 angularJs回车事件

       AngularJS 回车事件是借助指令 ng-keyup 完成，ng-keyup 指令用于告诉 AngularJS 在指定 HTML 元素上按键松开时需要的操作。ng-keyup 指令不会覆盖元素的原生 onkeyup 事件, 事件触发时，ng-keyup 表达式与原生的 onkeyup 事件将都会执行。因此，...

2018-06-26 11:31:05 2584

原创 bootstrap模态框内跳转页面去掉遮罩层

       bootstrap的模态框相信很多前端小伙伴都在用，不知道你有没有遇到在模态框内跳转页面的情况，跳转过去之后，模态框外面阴影遮罩层还是在整个界面，必须刷新一次界面才能操作界面。        不管在触发跳转的地方使用 data-dismiss=

2018-06-20 16:40:27 3148 1

原创 angularJs上传图片、设定图片宽高及图片预览

       封装angularJs上传图片的指令多不胜数，只能上传图片，无法判断图片的宽高，往往对于某些特定的界面，想要最好的客户体验必须上传特定比例或大小的图片。封装一个功能齐全的指令可以剩下很多重复工作。上传图片<!DOCTYPE html><html lang="en">&

2018-05-10 17:48:01 2094

原创 ui-router传参

       angularJS的ui-router传参配置不好的话会发现传过去的参数只是一次性的，也就是刚跳到界面的时候可以捕获到这个参数，再次刷新的时候这个参数就获取不到了。ui-router传参首先来看一下相关的三个属性：       sta

2018-04-26 18:16:09 490

转载 vue-cli封装axios

       安装及代理跨域在这就不介绍了，可查看我的另一篇笔记 Vue2项目架构搭建（六）——axios调用接口、webpack代理跨域配置。封装请求       封装的时候，我通常喜欢把请求抽象成三个文件，文件位置放在src中，只要你能引用到，就没

2018-04-25 10:20:37 865

原创 vue-cli项目修改文件热重载失效

       遇到一个很奇怪的问题，就是之前vue-cli创建的项目，在起初修改文件可以热重载，但是后面突然间就无法无刷新浏览器更新了，一只以为是热重载出问题了，折腾了半天也没纠结出什么结论，最后百度了一下，原来是编译器webstrom的锅。问题原因     &nbs...

2018-03-23 09:19:01 4276

原创 vue引入sass全局变量

vue引入sass全局变量       sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错...

2018-03-22 13:45:16 12673 2

原创 Vue 第三方字体图标引入 Font Awesome

Font Awesome       用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利，不管是在加载还是修改方面，字体图符远远优于图片。但是饿了吗封装的Element UI提供的字体图符少之又少，又不想用图片，只能自己扩展图符咯。       &nb

2018-03-21 13:30:33 12484 1

原创 jquery mobiscroll

mobiscroll.android-ics-2.5.2.js 配置文件修改下拉框宽高时不要去修改样式，直接配置即可，有时配置出来的宽度在火狐跟谷歌浏览器上差异很大，可以在逻辑界面直接设置下拉框的宽度为窗口界面宽度的百分比即可。(function ($) { var theme = { defaults: { dateOrder: 'Md...

2018-03-13 11:35:06 765

原创导出Excel（兼容各主流浏览器，也可手动设置表头）

导出功能放在后端做事最简单，最高效的。但是不排除某些特殊需求，比如多语言，后端无法做翻译的时候，需要前端先做翻译。实际上就是前端先把数据查询一遍，把数据和表头按语言翻译好之后再做导出功能。说真的，这种做法很low，但是数据混合在一起，后端没法翻译，只能前端来做，如果那位小伙伴有好的解决方案，可以留言告知在下。插件： xlsx.core.min.js 、alasql.min.js使用方法： ...

2018-02-11 18:00:54 508

原创 Vue2项目架构搭建（九）—— 打包项目

vue开发的东西基础架构已经搭建完成，还有很多关联的插件，具体等以后用到再补充，最后就是项目打包。打包代码vue-cli已经配置好打包工具，只需要我们在当前项目下build就好，连续两次Ctrl + c 退出服务启动，执行npm run bulid下图显示完成打包和生成的文件目录：打包完成后，项目目录会自动生成打包生成的dist文件夹，证明打包成功了。检测打包代码

2018-01-22 17:30:40 413

原创 Vue2项目架构搭建（八）—— vue-router2路由配置和调用

路由是SPA子页面的跳转机制，Vue的官方路由是vue-router。安装路由vue-cli在创建项目时有询问是否创建vue-router，如果选了Y，vue-cli已经将路由安装好了,可以直接跳过安装和引入，直接去配置组件；如果选了N，执行npm install --save-dev vue-router路由配置安装好之后，在router文件夹下的index.js中引入v

2018-01-22 16:55:37 1651 1

原创 Vue2项目架构搭建（七）——工具类方法调用

工具类方法定义不可避免的每个项目都会抽出很多数据处理的公共方法，统筹到工具类文件中，vue在定义工具类方法和传统方法一样，只是用了es6的export default导出，示例如下：export default{ alertTip (str) { alert(str) } method1 () { } method2 () { } ...}

2018-01-22 14:11:48 5927

原创 Vue2项目架构搭建（六）——axios调用接口、webpack代理跨域配置

自从Vue 更新到 2.0 之后，官方就不再更新 vue-resource目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求。axios的使用vue-cli没有预下载axios库，因此需要先安装axios库： npm install --save-dev axios安装好之后，先在main.js中引入axios，再设置全局属性$http指向axios

2018-01-22 11:33:44 6444

原创 Vue2项目架构搭建（五）——组件的引入

组件是vue最强大的功能之一，一个vue文件就是一个Vue组件，主要包括三部分：template，script，style。 template标签内是写组件视图的地方，但是要注意的一点是 template中的内容必须先包裹一层html标签，否则直接报错，别问为什么，这是铁律。 script标签内主要是引入第三方库、组件、方法和数据调用等。 style

2018-01-19 17:53:20 758 1

原创 Vue2项目架构搭建（四）——Sass和css引入

sass引入方法一：在main.js中加入import "./style/***/****.scss"; 方法二：在App.vue文件的style@import "./style/***/****.scss"; 方法三：在vue文件的style中写sass语句，需要设置style的lang属性为“scss”否则会无效，scoped表示只对该组件生效。 div{

2018-01-19 16:40:09 1045

原创 Vue2项目架构搭建（三）——修改项目目录

vue-cli创建的项目目录比较简单，而且还有些测试的界面需要删除，因此在路由设置和组件引入之前先调整一下项目的目录。vue-cli创建的目录├── README.md // 项目说明文档├── node_modules // 项目依赖包├── build /

2018-01-19 15:36:25 734

原创 Vue2项目架构搭建（二）——vue-cli脚手架创建项目

vue-cli是官方命令行工具，该工具为现代化的前端开发工作流提供了开箱即用的构建配置，只需几行命令就可以搭建好基础架构。安装vue-cli 使用npm全局安装vue-clinpm install -g vue-cli 安装完成后，执行vue list 会报“vue不是内部或外部的命令”，说明环境变量有问题vue-cli环境变量设置设置vue-cli的系统环境变量

2018-01-19 14:35:41 5181 1

原创 Vue2项目架构搭建（一）——npm、webpack安装及配置

此系列博文为搭建Vue2项目架构，使用知识涉及npm安装第三方库、webpack项目管理、vue-cli安装Vue全家桶、vue-router 2.0路由跳转、axios获取API数据，从基础工具开始到项目打包。NPM安装及配置 NPM是随NodeJs一起安装的包管理工具，因此只需要安装nodeJs即可，npm允许从NPM服务器下载别人编写的第三方包到本地使用，前端人员不用再满世界的

2018-01-19 13:12:54 1348

原创网页自适应设置

网页的自适应说白了就是宽高等随着浏览器窗体变化，那么在讲自适应前先说说设置宽高大小那点小事吧，我们通常设置网页元素是常用的单位有 px、%、em、rem。px 像素由于px设置网页元素宽高，元素宽高不会随浏览器窗口大小改变，延展性很差。建议使用：某些特定的宽高或者属性设置，例如边框的粗细、圆角的程度。建议不要使用：网页中需要设置宽高的元素不要使用，除

2018-01-10 15:04:36 2383

原创 js获取X天前日期

说真的，前端还是蛮苦逼的，后端要什么日期格式就得给大爷们传什么，一会要时分秒，一会要小于10的补“0”，千万别犹豫整一个公共方法。获取实时日期就别传参数了，获取X天前的就传负数就好function getDateTime(type,x) { var nowDate; if(x){ x = parseInt(x); var current_

2018-01-09 15:54:57 401

原创上传图片预览及其获取图片宽高

html中表单元素input[type=file]本身不提供图片预览效果，只能显示当前选择的文件名，需要查看预览效果的话没有API提供支持。某些特殊环境需要对上传图片的宽高有特定需求，需要严格把控，不符合规定不能上传。出于安全考虑，前端是不能直接获取并显示需要上传的文件的，只能另辟蹊径，还好H5提供了文件系统，在处理这些问题时提供了很大支持，可以将本地文件先转化为base64文件格式，

2018-01-05 10:04:04 3295 2

原创 AngularJs去掉链接中的“#”

angularjs的路由机制会给链接中添加一个“#”，是跳到子页面的锚点。由于项目需求，需要将链接中的“#”去掉，其实angular还提供了html5Mode()跳转机制。1、在angular.module.config文件中注入“$locationProvider”angular.module("app",["ui.router"]) .config(function($loca

2018-01-04 15:47:33 1434

原创 Css一屏布局

不同浏览器不用尺寸屏幕呈现出的窗口大小不同，如何去适配网页更好的一屏显示，介绍两种常见情况：1、左右布局或者上下布局左右布局和上下布局是常规的两种布局方式，设置一屏显示也是非常简单的，主要是设置高度的百分比，样式如下： html,body{ margin: 0; padding: 0; height:100%;

2018-01-02 09:57:35 3699

jquery mobiscroll

alasql.min.js

xlsx.core.min.js

空空如也