![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
花程序媛
一名想不断提升自己的程序媛==>勿以浮沙筑高台
展开
-
vue项目复制组件clipboard
1.实现背景有时候项目中会有复制较长文本需要复制,为实现这个功能,封装公共方法2.公共方法import Vue from 'vue'import Clipboard from 'clipboard'function clipboardSuccess() { Vue.prototype.$message({ message: 'Copy successfully', type: 'success', duration: 1500 })}function原创 2020-10-25 21:58:59 · 748 阅读 · 0 评论 -
vue项目树状图的实现
1.实现背景项目需要直观的展示元素之间的关系,需要实现一个树状图数据可视化可以用Echarts HighCharts,但是相关树状图的示例不够直观,且不美观几种工具之间比较,选择了蚂蚁金服的G6来实现(在开发期间有树状图的示例,之后再看发现这个例子没有了)2.相关技术介绍G6图可视化引擎(蚂蚁数据可视化 G6)G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。3.项目集成3..原创 2020-10-19 20:12:02 · 10995 阅读 · 8 评论 -
vue封装Cron任务周期选择组件
1.实现背景在项目中有需要用户输入具体执行任务周期的Cron表达式的需求,但是对不熟悉Cron表达式的用户,显然用户体验不太友好。项目用到的技术栈是vue,xxxjob任务管理系统有原生的任务周期选择组件,但是不适用于vue项目;网上查了一下,找到一篇vue-cron的文章,但是与项目中需要使用的需求还是有点差距,所以在改项目基础上做了封装与改动,具体实现如下文。2.cron表达式了解Linux系统中,一般用 cron 守护进程执行周期性任务;cron表达式简单语法如下~2.1设..原创 2020-09-26 12:36:45 · 2613 阅读 · 2 评论 -
将多个连续的IP地址转为一个IP范围
1.问题背景项目中有这样的一个需求:创建防火墙规则时,在用户选择的云主机、负载均衡、子网的IP地址中,如果有连续的IP地址,就把这些连续的IP地址合并为一个IP范围;具体实现方法如下:(实现框架为vue,放在methods里实现)mergeIP(ipArr){ // IP排序 前半部分 相同的排到一起;后半部分按数字大小 ipArr.sort(function(a,b){ let pre = a.split("."); let next = b.split(".");原创 2020-09-20 20:31:49 · 1606 阅读 · 1 评论 -
vue项目elementUI面包屑的封装
一般项目的菜单只有两级菜单,但是现在做的项目中有三级菜单;对应的第三级菜单下还有新增编辑和详情页面;层级较多有十级左右,所以需要面包屑的展示;本文章主要就项目中面包屑封装做一个总结;1.路由配置文件面包屑时根据vue-router的路由循环生成;所以想要展示的面包屑有多少层级,路由就有多少层级路由层级(三级菜单)每级都要有component,component对应页面要有对应...原创 2020-04-19 20:48:17 · 1688 阅读 · 1 评论 -
vue项目集成vuex
1.安装安装vuexnpm install vuex --save2.项目中添加vuex添加vueximport Vuex from 'vuex'Vue.use(Vuex)在src目录下新建store目录,store目录下新建store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(V...原创 2020-04-19 20:12:43 · 421 阅读 · 0 评论 -
vue项目mock数据
1.安装安装mockjsnpm install mockjs2 --save2.项目中添加mock2.1main.js添加mockimport './mock'2.2在src目录下新建mock目录,mock目录下新建index.jsif (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PR...原创 2020-04-19 20:09:01 · 169 阅读 · 0 评论 -
ant design vue实现穿梭框单选
最近有一个朋友问了一个问题,ant design vue的穿梭框如何实现单选,且禁用顶部的全选checkbox之前项目中用到的是ant design pro,没有用到ant design pro of vue,也没有用过穿梭框组件;所以克隆项目写了一个demo,并就开始一个ant design pro of vue项目做一个梳理总结1.克隆ant design pro of vue项目...原创 2019-12-13 16:00:05 · 5069 阅读 · 2 评论 -
ant design vue渲染表格显示no data
按照ant design vue给出例子写表格组件,有表格数据,却渲染不出来,在分析这一问题,发现几个需要注意的点,做一记录 一般开发环境,当出现问题时,都会给出警告信息,所以留意控制台的输出 开发环境script引入vue注意引入方式如下,否则不能看到警告信息;需引入vue.js,而不是vue.min.js <script src="https://cdn.jsdel...原创 2019-12-10 16:19:31 · 4455 阅读 · 0 评论 -
vue路由vue-router
main.jsimport Router from 'vue-router'Vue.use(Router);route.jsimport login from '../components/login.vue'let routes =[ { path: '/', name: 'index', component: index }, {...原创 2019-04-07 16:16:51 · 120 阅读 · 0 评论