vue
文章平均质量分 83
等不回天亮等时光
一个会一点php node和切页面的前端工程师
展开
-
vue造轮子之省份区联动下拉组件
业务背景在我业务需求中,需要有个省份区城市联动的组件,并且该组件的开发也是基于elementUi原有的效果上面去。在原有的elementui库中并没有这样的组件,所以也只能自己手写一个,效果如下:需求分析1.需要包含国内的省份,省份下面所对应的城市,城市下方所对应的区,街道不做要求。2.需要配置每个下拉列表是否可以选择状态,这个是需要更加具体场景进行分析,需要对外提高可控制列表是否可以选择。例如:一层选择了广东省后,某些场景广州市不能够被选择到。基础组件选择基础组件还是还是采用el-selec原创 2021-01-04 11:25:15 · 350 阅读 · 0 评论 -
vue造轮子之虚拟列表
前提:在我负责一个模块中,有一个是日志管理模块,它会输出很多很多的操作的日志,起初与后台对接对接的时候并没有考虑到性能渲染问题,只是简单的用v-for把所有的数据都渲染出来,那么这样导致的后果就是页面卡顿,这个原因是你的模块中渲染出太多的DOM节点导致,为了避免这样的问题我采取了虚拟列表来进行渲染。什么是虚拟列表虚拟列表就是一个按需渲染的过程,简单来说就是渲染你所看到的内容,对于你非可视的内容不进行渲染,达到性能的优化。在图中我们可以看到,你所能看到的就是元素7到元素14的内容,当我们的滚动条进行原创 2020-10-28 16:19:46 · 873 阅读 · 0 评论 -
vue造轮子之封装选择下拉树
最近公司有个新需求,希望能有一个下拉选择树的功能,大概的功能和样式如下所示:然后我的第一反应就是上elementui上找现成的组件,但是挺遗憾的就是element并没有提供这样的组件,所以只能自己动手造一个了。1. 组件需求(1) 支持单选和多选功能(2) 叶子节点控制是否能选择(3) 数据回显到选择框支持多选和单选显示(4) 支持树节点搜索功能(5) 基本样式应与elementUi样式保持一致2.布局和样式代码编写由于这个地方需要用到弹出下拉框,所以我就借助了el-popover来实原创 2020-10-22 14:51:39 · 594 阅读 · 2 评论 -
vue中使用echart开发可视化功能
vue中实现ehart图表交互和图表展示 简介该模块也是平时工作中所负责的一个模块,目的是为了能够快速生成图表。在实际工作中的项目这是个主要为了绘制大屏所使用,在这里我选择抽了部分的功能与大家一起分享一下,里面的代码或许不是最好的写法,如果你有不同的写法也欢迎分享和提issues在线预览技术栈和插件选择该功能模块技术栈使用了vue,而只要使用到插件则是 echart+vue-drag-resize,echart是一款经典的图形生成库,它内置了许许多多的常见图表,用兴趣的朋友原创 2020-08-09 14:05:49 · 1111 阅读 · 2 评论 -
vue实现一个sku列表
最近接到一个需求类似于商城选购的一个sku列表,大致要实现的效果如下:sku的专业名词解释为:库存保有单位即库存进出计量的单位,可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态,不同管理模式来处理但我个人理解则为:当你选择到某一个属性,与这个相关的属性应该会发生相对应的变化,这里的变化指的是这个选项是否是可选。假设我现在的数据结构如下:data: [ // 库存 { id: "1", specs: ["紫色", "套餐一", "64原创 2020-05-28 11:20:09 · 3667 阅读 · 0 评论 -
vue造轮子之圆形进度条
在github上看到一个圆形进度条组件,比较适合于我现在的业务需求,然后就拷贝下来放进我的项目。但是cv程序员并不是我想要。所以就研究了一下它的源码,没想到的是源码竟然是如此简单和通俗易懂,先附上原作者的github地址和效果图。https://github.com/cumt-robin/vue-awesome-progress一.canvas基本用法由于该组件是基于canvas完成的,所...原创 2020-01-07 16:44:53 · 2983 阅读 · 3 评论 -
vue实现折叠组件-collapse
相信大家对于下面的列表形式应该不陌生吧,至少我个人在后台OA系统的时候就用到了,那么我来聊下这样形式的列表,应该怎么封装成为一个公共的组件。(代码参考了iview用于个人学习之用)一.列表组件参数设置每一个公共组件都应该约定好参数,定义好回调函数所传递参数。不应该与业务组件和业务逻辑相互耦合。这个组件的约定参数和使用方法如下: <Collapse v-model="value1" @...原创 2019-11-09 22:57:45 · 13981 阅读 · 0 评论 -
关于浅拷贝和深拷贝的理解
在聊深拷贝和浅拷贝之前,我们先来看看以下这几个场景: let obj1 = { a: 1, b: 2 }; let obj2 = obj1; obj2.a = 3; console.log(obj1.a); //3 let a = "ceshi"; let b = a; b = "ceshi1"; console...原创 2019-07-22 11:02:41 · 281 阅读 · 0 评论 -
vue实现全局组件----$alert
在element中,有一些全局的组件,类似于this.message(),this.message(),this.message(),this.toast()这种,通过原型的方式挂载在vue的全局上面,以供我们全局使用,平时自己用的多,那么我现在就尝试自己来实现一下。一.普通组件方式我们实现一个普通的提示框(Alert)组件不难,一般都是这样写:<template> <...原创 2019-06-30 14:18:48 · 15030 阅读 · 0 评论 -
vue项目中如何使用mxgraph进行可视化操作
最近公司需要使用mxgraph,来进行流程图的开发,由于我是第一次接触这个库,所以踩到的坑还是挺多,最坑爹的网上关于这个库的资料实在是太少了,它的文档还是英文文档。所以开发起来还是有点痛苦的。我们来看下以下部分需求:这是PM要我做的流程图,这里我会拿部份的功能和大家分享。包括新建图形,删除节点图形,响应右键菜单事件…由于mxgraph的套路是很固定的,只要你GET到这几个部分再结合文档,就基...原创 2019-04-11 17:00:45 · 6436 阅读 · 13 评论 -
Vue中的Provide/inject
今天做了项目中的登陆功能,按照我之前一贯的套路都是使用vuex这个状态管理插件来处理数据。然后,我就想了想,看下vue有什么其它的方法能够实现父子N多辈的通信。找了下api让我发现了provide和inject这个东西,哇靠,相见恨晚啊。哈哈。Provide/Inject是什么?provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。这对选项需要...原创 2019-03-12 18:06:57 · 3148 阅读 · 1 评论 -
node+mongoDb+Vue+elementUI实现资金管理后台系统(一)----mongoDB的安装与连接
今天和大家分享一下,一个node+mongoDb+Vue实现的一个小型后台管理系统。这个小系统采用的也是前后端分离。后端:node数据库:mongoDb数据库管理工具:robo3T1.2.1数据接口测试:postman前端:vue+vue全家桶+elementUI安装mongodbmongodb是一个开源数据库,可以从它的官网进行下载,https://www.mongodb.co...原创 2019-01-30 23:34:48 · 1586 阅读 · 4 评论 -
node+mongoDb+Vue+elementUI实现资金管理后台系统(六)---前台的注册,登陆与token存储
我们利用elementUi为我们提供的UI组件进行快速编写界面,elementUI文档:http://element-cn.eleme.io/#/zh-CN/component/installationregister.vue 注册界面HTML模板<template> <div class="register"> <div class=...原创 2019-02-06 20:29:46 · 693 阅读 · 2 评论 -
vue2.0+axios+bootstrap+php+mysql编写购物车
最近想加强一下vue的学习,毕竟是现在最火的前端框架嘛。那么,我们这次通过一个购物车的效果,让大家了解一下vue2.0中指令的基本用法。首先先看效果我这里的服务器不采用vue-cli的脚手架生成,直接通过xmapp的apache环境。 在头部引入bootstrap.css,vue.js和axios, <head> <meta chars...原创 2018-07-17 18:57:31 · 1300 阅读 · 0 评论 -
关于vue中组件的问题
我们今天来聊一下关于vue组件的问题。1.is的使用 假设有个这样的场景.我希望写一个table表格常规的HTML结构<div id="root"> <table> <tbody> <tr> ...原创 2018-07-07 13:45:15 · 1600 阅读 · 2 评论 -
vue中组件参数
我们来聊一下vue中的组件参数.1.vue中组件参数 我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。我们来看下最为简单和常见的vue代码<div id="root"> <item content="hello"...原创 2018-07-07 16:10:50 · 2089 阅读 · 0 评论 -
vue中的计算属性computedt与侦听器watch
写vue也有一段时间了,今天和大家分享一下vue中的计算属性和侦听器watch1.什么是计算属性 计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新。来看图一的代码。你也可以简单理解为vue主要注重于视图层,尽可能不在插值表达式添加复杂的逻辑。&amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt;原创 2018-07-20 20:44:34 · 336 阅读 · 0 评论 -
vue+vue-router+vuex+axios+php+mysql实现文章列表跳转
今天来和大家聊一下,vue项目中如何与后端php相结合。 目录结构 Home.vue&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;homelist :list=&quot;list&quot;&amp;gt;&amp;lt;/homelist&amp;原创 2018-08-31 19:43:40 · 479 阅读 · 0 评论 -
vue中的状态管理vuex(一)
最近一直,在搞mpvue,发现vue中为我们提供的vuex这个状态管理是多么的好用,所以就拿出来和大家分享一下,一 什么是vuex Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和Redux 的设计思想,但简化了概念,并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。 小提示,我们在写vuex的时候只要记...原创 2018-08-24 20:30:30 · 1252 阅读 · 0 评论 -
node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口
使用express搭建服务器在D盘下面创建一个文件夹node-app,并在cmd中运行。初始化文件,在cmd中输入npm init,选项直接回车键就可以了。使用的编辑工具是vscode,在cmd中直接输入code .可以快速打开该文件建立server.js和安装express在node-app下新建一个server.js并且通过npm安装expressserver.js...原创 2019-01-31 13:00:41 · 1045 阅读 · 8 评论 -
node+mongoDb+Vue+elementUI实现资金管理后台系统(三)---人物默认头像和登陆接口token设置
获取默认的人物头像我们安装gravatar模块,可以获取到人物的默认头像,官方文档如下https://www.npmjs.com/package/gravatar安装方式:npm install gravatar在routes/api/user.js中使用postman进行测试这个时候就可以获取到了默认的头像。登陆接口编写这里的登录,我们需要第三方jwt模块,实...原创 2019-01-31 20:53:26 · 745 阅读 · 0 评论 -
node+mongoDb+Vue+elementUI实现资金管理后台系统(四)---增加身份字段和配置用户信息接口
增加注册身份字段前台注册的时候,是需要我们选择 不同的身份,然后对后台进行不同的操作,这也是一种权限的处理。在models/User.js下增加identity字段在routes/api/user.js下//@login & registerconst express = require("express");const router = express.Router(...原创 2019-02-01 12:13:21 · 731 阅读 · 0 评论 -
node+mongoDb+Vue+elementUI实现资金管理后台系统(五)---数据增删改查接口
我们用户的所有操作都是要基于token来进行操作,所以我们在profile.js中引入passport模块const passport = require("passport");添加信息接口router.post("/add",passport.authenticate("jwt",{session:false}),(req,res)=>{ const profile...原创 2019-02-06 10:46:58 · 589 阅读 · 0 评论 -
vue中的路由(vue-router)
我们今天来聊一下vue-router,也就是vue中为我们的路由。 有些小伙伴可能就想,我们为什么要用路由呢?我直接写个a标签不一样可以让页面跳转吗? 我们要知道vue是一个mvvm框架,主要做的就是单页面的应用.这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。我们先通过vue-cli脚手架工具帮我们生成目录后,我们观察...原创 2018-07-08 18:33:34 · 330 阅读 · 0 评论