![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 86
前端开发二月半
这个作者很懒,什么都没留下…
展开
-
vue+echart 利用散点图实现柱状时间驻留图
产品的需求是这样的,以周为单位,显示每一天一个手机连接某一台路由器的开始时间到结束时间,以及连接次数,最后的实现效果是下图的样子,其中的每个柱表示某个手机连接到某个路由器的时间范围。鼠标移动到柱上表示样式整个开发的辛酸历程是这样的。最开始是尝试的echart的阶梯瀑布图,然后用了之后才发现,echart的阶梯瀑布图完全就是用和背景相同背景色的柱状图叠加起来的,因为我们的项目数据量可能会...原创 2020-04-28 11:42:18 · 807 阅读 · 0 评论 -
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 · 4373 阅读 · 0 评论 -
vue-router的hash(地址栏中带#号)模式与History模式
使用hash模式时,URL的地址请求中会带有#号,此模式背后的原理是onHashChange事件,可以在window对象中上监听该事件,同时hash发生变化的URl会被记录下来,从而使浏览器的前进后退都可以使用,这样页面的状态和URL形成了关联,又被称为前端路由,成为单页面应用的标配。History路由可以分为两大部分(切换和修改),通过HistoryAPI可以丢掉丑陋的【#】号,但是有...原创 2020-01-07 16:33:16 · 2495 阅读 · 0 评论 -
vue组件内数值做watch监听,首次监听不到的问题
在vue中会使用很多子组件,有时因为组件的类型等原因会导致数据监听不到的情况,下面列举几种问题和解决方法子组件内数据首次监听不到时,可以使用【immediate】方法,其值是true或false;immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法watch:{ uploadImageUrl:{ immediate:true, h...原创 2019-10-18 10:45:48 · 5161 阅读 · 2 评论 -
vue可缓存的单页面多标签页
先上传自己制作例子的截图吧,有时间的时候把重要代码片段再详细写下说明!!源码请在下面这个地址下载原创 2019-10-17 20:05:11 · 1245 阅读 · 1 评论 -
编辑画面,element-ui的单选框组选中值以及画面选择样式无法切换,但是绑定的v-model值已发生变化
今天碰到了一个特别奇葩的问题,使用element-ui的单选框组做选择,在新增的情况下,也就是form表单绑定的对象为空时,画面可以正常操作取出来的值也没有问题,但是在编辑的情况下,也就是form表单绑定的对象为前一画面选择的数据时,单选框组居然出来了不能切换选中状态的情况,我通过【change】方法监听发现,绑定的model数据值已经变化为我要选中的数值,但是单选框组选中的值一直都是组件加载是我...原创 2019-10-17 19:45:24 · 2111 阅读 · 0 评论 -
vue制作echart图表随着画面等比例放大缩小
因为本身echart做的图表不会随着div的大小比例进行变化,因此下面介绍两种控制echart大小变化的方法。第一种:根据屏幕分辨率变化切换echart图表的大小变化在mounted中添加监听事件,控制图表大小的改变// 监听浏览器窗口变化,进行图表大小变化let _this = this;window.addEventListener('resize', function() { /...原创 2019-09-25 18:01:40 · 5713 阅读 · 0 评论 -
vue实现树形结构增删改查
其实很多公司都会有类似于用户权限树的增删改查功能,正好最近我刚写了一个树形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~先附上一下效果图这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的。这个是点击了编辑之后,显示节点的编辑按钮点击最上面的添加按钮,显示最外层父节点的添加画面修改节点名称因为...原创 2019-08-05 18:03:49 · 10373 阅读 · 2 评论 -
vue 两种文档下载方法的实现(后台传递文件流,后台返回文件下载地址)
后台返回文件流1.因为是文件流下载,所以在取后台数据的时候,要多传递一个【responseType: ‘blob’】这个参数,是为了最后数据返回时response的data为【blob】文件格式(data: Blob {size: 22528, type: “application/vnd.ms-excel”}),否则返回的数据只有文件流的结构体,不包含【blob】。下面为封装的获取后台文件流...原创 2019-08-05 17:27:48 · 18817 阅读 · 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 · 1654 阅读 · 1 评论 -
vue的横向树形菜单
实现上图三级菜单横向展开的样式使用element-ui的树形插件,其实实现上面的效果还是很简单的,只要动态的给三级节点加一下样式就可以了,可以看下下面的代码片段。树形插件的定义<el-tree class="tree-style" :data="userAuthTree" show-checkbox node-key="id" :props="...原创 2019-08-02 18:09:51 · 5994 阅读 · 2 评论 -
vue element-UI的树形结构,父级关联,返回数据反选的问题
因为element-ui的树形结构是添加了父级的联动,没有办法单独取消,那么就有一个问题,比如说在做用户权限分配的时候,添加选择是没有问题的,选择自己要check的节点,通过下面这个方法可以将父级ID和子集ID一起传给后台。this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());效果是这样的...原创 2019-08-02 18:02:42 · 2581 阅读 · 0 评论 -
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 · 928 阅读 · 1 评论 -
vue实用echart饼图legend显示百分比
vue使用echart的饼图数据部分展示百分比效果图实现源码option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a...原创 2019-07-17 17:24:37 · 16423 阅读 · 7 评论 -
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 · 11677 阅读 · 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 · 3944 阅读 · 1 评论 -
vue鼠标经过效果实现
Vue鼠标经过移除显示div如果只是显示span或者p全部文字的话,建议使用:title="要显示的信息"如果显示的内容比较多,需要弹出div弹框的话可以使用下面的方法第一步:给要鼠标经过的字段加上,鼠标经过事件第二步:制作要显示内容的div(versionTotal是定义的变量,默认是false,控制div是否显示)第三步:写changeActive和removeActive的方法内容如果只是...原创 2019-07-03 16:40:57 · 11699 阅读 · 0 评论 -
Vue实现登陆跳转
不说废话,先上效果图~具体的实现方法,参照以下步骤~创建login.vue,绘制login画面,添加跳转事件。<template> <div class="login-container"> <el-form :model="ruleForm2" :rules="rules2" status-icon ...原创 2019-04-03 16:48:19 · 34379 阅读 · 5 评论 -
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 · 15759 阅读 · 28 评论