- 博客(27)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 利用jquery实现数字千分位排版显示，使用0动态补全8位数
利用jquery实现上述效果其实非常简单，首先在html部分创建div容器，设置好最外层对齐方式以及大小。再利用jquery对动态数据进行html拼接就可以了。内容块定义<div style="width:100%;padding: 0 14%;text-align:center;margin-top:38px;height: 67px;"><div id="home_search_num"></div>样式书写.home-content-num{ h.
2020-10-19 14:02:38
665
原创 环形饼图实现
实现如上图所示环形的饼图，实现思路为先绘制一个占比为所需数据大小环形饼图，设置好对齐方式，添加一个全局的背景色即可。但是由于上述所使用的环形图的圆角方法【roundCap: true】为echarts4.5以上版本新添加的方法，因此要想完成上述完全效果，建议使用较高版本echarts.js，下面为上述效果的option配置。option = { title: { text: "占比", textStyle: { color: '#666666', font.
2020-10-19 13:22:38
1794
转载 echart保存图片的两种实现方式
echart本身自带有toolbox的saveAsImage用以实现保存图片，具体的option设置如下：var option = { title: { text: data.name, x: 'center', y: '83%', textStyle: {color: "#333"} }, color:['#5f67ea', '#f97363', '#008.
2020-10-13 10:07:53
8642
1
原创 vue+echart 利用散点图实现柱状时间驻留图
产品的需求是这样的，以周为单位，显示每一天一个手机连接某一台路由器的开始时间到结束时间，以及连接次数，最后的实现效果是下图的样子，其中的每个柱表示某个手机连接到某个路由器的时间范围。鼠标移动到柱上表示样式整个开发的辛酸历程是这样的。最开始是尝试的echart的阶梯瀑布图，然后用了之后才发现，echart的阶梯瀑布图完全就是用和背景相同背景色的柱状图叠加起来的，因为我们的项目数据量可能会...
2020-04-28 11:42:18
767
原创 JS的一些时间获取和计算公用方法封装
又是一个记录博客，不想废话的一天。。。。就是一些自己之前写的时间计算和日期格式化的源码整理，直接看代码吧~~/** * 判断年份是否为润年 * @param {Number} year * @return {Boolean} */ isLeapYear: function (year) { return (year % 400 == 0) || (year % 4 == ...
2020-04-28 11:01:16
446
原创 angular中使用z-tree初始化之后，展开根节点不生效
今天解决了一个非常尴尬的问题，纠结了整整半个月，最好还是被自己没有仔细看文档给打败了。具体的事情是这样的，我们的需求是使用实现可复选的树结构，因为要适配IE8，纠结了很久之后最后决定使用z-tree，适配性又高速度又快。数据是后台接口动态获取的，对取出来的数据进行了树的初始化，初始化结束后默认展开根节点数据，然后问题就来了，不管怎么弄根节点数据就是展不开，然后就开始了我的漫长调查过程…下面是我...
2020-04-27 20:15:29
779
原创 laydate报Uncaught TypeError: Cannot read property 'appendChild' of undefined
laydate Uncaught TypeError: Cannot read property ‘appendChild’ of undefined我遇到这个错误之后是从两个方向解决的问题出现了这个的原因可能是因为把初始化的js放在了head中引用，导致DOM元素还没有加载完就进行初始化，因此报错。如果是这个原因的话只需要将js从head中放置到body中就可以了。因为layDate是...
2020-04-23 11:49:59
4875
原创 vue打包配置的详细说明【config/index.js的build部份】
index: path.resolve(__dirname, '../dist/index.html') 打包生成的文件路径__dirname：代码所在路径，字符串格式assetsRoot: path.resolve(__dirname, '../dist'),包含应用程序的所有静态资产的根目录（绝对路径）assetsSubDirectory: 'static',被编译之后的资源...
2020-01-07 16:56:17
4317
原创 vue-router的hash（地址栏中带#号）模式与History模式
使用hash模式时，URL的地址请求中会带有#号，此模式背后的原理是onHashChange事件，可以在window对象中上监听该事件，同时hash发生变化的URl会被记录下来，从而使浏览器的前进后退都可以使用，这样页面的状态和URL形成了关联，又被称为前端路由，成为单页面应用的标配。History路由可以分为两大部分（切换和修改），通过HistoryAPI可以丢掉丑陋的【#】号，但是有...
2020-01-07 16:33:16
2413
原创 工作中JS语法的小整理以及vue小知识的收纳
工作中总是碰到一些其实自己知道，但是真正用的时候右很容易混淆的一些语法和知识，特意在这里记一下，希望能提醒自己养成随手记录的好习惯！！js的chartAt()和indexOf()vue-router的hash（地址栏中带#号）模式与History模式vue打包配置的详细说明【config/index.js的build部份】js的chartAt()和indexOf()let arrA = ['a...
2020-01-07 16:31:46
176
原创 vue组件内数值做watch监听，首次监听不到的问题
在vue中会使用很多子组件，有时因为组件的类型等原因会导致数据监听不到的情况，下面列举几种问题和解决方法子组件内数据首次监听不到时，可以使用【immediate】方法，其值是true或false；immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法watch:{ uploadImageUrl:{ immediate:true, h...
2019-10-18 10:45:48
5101
2
原创 编辑画面，element-ui的单选框组选中值以及画面选择样式无法切换，但是绑定的v-model值已发生变化
今天碰到了一个特别奇葩的问题，使用element-ui的单选框组做选择，在新增的情况下，也就是form表单绑定的对象为空时，画面可以正常操作取出来的值也没有问题，但是在编辑的情况下，也就是form表单绑定的对象为前一画面选择的数据时，单选框组居然出来了不能切换选中状态的情况，我通过【change】方法监听发现，绑定的model数据值已经变化为我要选中的数值，但是单选框组选中的值一直都是组件加载是我...
2019-10-17 19:45:24
2065
原创 vue制作echart图表随着画面等比例放大缩小
因为本身echart做的图表不会随着div的大小比例进行变化，因此下面介绍两种控制echart大小变化的方法。第一种：根据屏幕分辨率变化切换echart图表的大小变化在mounted中添加监听事件，控制图表大小的改变// 监听浏览器窗口变化，进行图表大小变化let _this = this;window.addEventListener('resize', function() { /...
2019-09-25 18:01:40
5608
原创 vue实现树形结构增删改查
其实很多公司都会有类似于用户权限树的增删改查功能，正好最近我刚写了一个树形结构的增删改，在这里和大家分享一下，如果有不合理的地方欢迎评论，我会尽快优化~~先附上一下效果图这个是没有点击编辑时，产品的需求是选中某个节点，取得该节点对应的设备数据，所以初始页面是下面这个样子的。这个是点击了编辑之后，显示节点的编辑按钮点击最上面的添加按钮，显示最外层父节点的添加画面修改节点名称因为...
2019-08-05 18:03:49
10282
2
原创 vue 两种文档下载方法的实现（后台传递文件流，后台返回文件下载地址）
后台返回文件流1.因为是文件流下载，所以在取后台数据的时候，要多传递一个【responseType: ‘blob’】这个参数，是为了最后数据返回时response的data为【blob】文件格式（data: Blob {size: 22528, type: “application/vnd.ms-excel”}），否则返回的数据只有文件流的结构体，不包含【blob】。下面为封装的获取后台文件流...
2019-08-05 17:27:48
18683
5
原创 [Vue warn]: Error in render: "TypeError: _self.$scopedSlots.default is not a function" 错误解决
出现【[Vue warn]: Error in render: “TypeError: _self.$scopedSlots.default is not a function”】这个错误是因为element-ui的table组件使用了v-if去做动态切换展示。解决方法：把v-if换成v-show（只是隐藏不注销）去实现上面的动态切换效果就可以了。...
2019-08-02 18:18:01
1588
1
原创 vue的横向树形菜单
实现上图三级菜单横向展开的样式使用element-ui的树形插件，其实实现上面的效果还是很简单的，只要动态的给三级节点加一下样式就可以了，可以看下下面的代码片段。树形插件的定义<el-tree class="tree-style" :data="userAuthTree" show-checkbox node-key="id" :props="...
2019-08-02 18:09:51
5908
2
原创 vue element-UI的树形结构，父级关联，返回数据反选的问题
因为element-ui的树形结构是添加了父级的联动，没有办法单独取消，那么就有一个问题，比如说在做用户权限分配的时候，添加选择是没有问题的，选择自己要check的节点，通过下面这个方法可以将父级ID和子集ID一起传给后台。this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());效果是这样的...
2019-08-02 18:02:42
2553
原创 vue打开二级或者三级页面传输对象，再刷新浏览器数据丢失问题解决（vue使用router传递数据）
vue使用router进行跳转如果只是单纯的URL跳转的话，直接指定path就可以了this.$router.push({path:'whiteList'}});如果需要使用router进行单纯的字符串传输this.$router.push({path:'throughList',query:{id:id}});要跳转的画面取传输数据使用this.$route.query.id...
2019-07-24 18:41:18
887
1
原创 vue实用echart饼图legend显示百分比
vue使用echart的饼图数据部分展示百分比效果图实现源码option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a...
2019-07-17 17:24:37
16307
7
原创 一些实用博客的分享（ES6详解，echart属性详解）
大家如果是学习ES6的话，强烈推荐下面这个阮老师的讲解，都是对比分析，比较清楚易懂！！！博客地址：http://es6.ruanyifeng.com/#docs/let
2019-07-17 10:21:32
243
转载 echart 饼图标题title的详细参数配置
var myChart=echarts.init(document.getElementById('main'));//init初始化接口，返回ECharts实例，其中dom为图表所在节点 var option = { //标题 title : { show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） ...
2019-07-09 20:09:43
11188
1
原创 vue内容省略表示（超过15位显示...）
需要设置省略的字段加上方法（通过|做出来）<p class="title" :title="scope.row.appVersion" >{{scope.row.appVersion | ellipsis}}</p>书写过滤方法filters: { // 版本号显示12位，超过12位显示... ellipsis: func...
2019-07-03 17:00:01
3908
1
原创 vue鼠标经过效果实现
Vue鼠标经过移除显示div如果只是显示span或者p全部文字的话，建议使用:title="要显示的信息"如果显示的内容比较多，需要弹出div弹框的话可以使用下面的方法第一步：给要鼠标经过的字段加上，鼠标经过事件第二步：制作要显示内容的div（versionTotal是定义的变量，默认是false，控制div是否显示）第三步：写changeActive和removeActive的方法内容如果只是...
2019-07-03 16:40:57
11615
原创 Vue实现登陆跳转
不说废话，先上效果图~具体的实现方法，参照以下步骤~创建login.vue，绘制login画面，添加跳转事件。<template> <div class="login-container"> <el-form :model="ruleForm2" :rules="rules2" status-icon ...
2019-04-03 16:48:19
33740
4
原创 vue实现单页面多标签页
不废话先上效果图实现上面的效果，主要是通过改变vue的路由机制实现的在router目录文件下新建TabRouter.js文件，添加以下内容const route = Object.create(null)route.install = function (vue) { // 第一个字符串是 组件名，第二个是组件路径，第三个是包名(如果不指定则已1.js,2.js....n.j...
2019-04-03 16:09:23
15550
28
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人