随笔分类 -  vue.js

element ui消息弹窗优化--禁止多次弹出
摘要：上图是多次点击弹出警告框的效果，按照正常的理解，只要弹出过一次，后面不管怎么点都不应该在弹出，用原来的消息体即可，可惜element ui没有做这方面的处理，因此只能自己封装了 // element ui message封装，避免同一消息反复弹出 import { Message } from 'e 阅读全文
posted @ 2020-03-28 14:39 点点乐淘淘 阅读(3758) 评论(0) 推荐(0)
element ui源码解析 -- Pagination篇( 副：列表页进入详情页再返回后，如何保持当前页码正确 )
摘要：之所以看Pagination源码，由于一个问题： 需求：从列表页进入详情页后再返回，需求方希望保持在当前的页码而不是重新定位到第一页 问题：按照element ui文档设置current-page后请求的数据正常，但pagination的页码显示却不正确，不管current-page值等于多少，永远 阅读全文
posted @ 2020-01-04 15:41 点点乐淘淘 阅读(1745) 评论(0) 推荐(0)
provide inject应用及和props对比
摘要：之前本人写过几篇element ui源码解析，其中提到provide/inject，当时只是匆匆带过，没有做深入研究，直到后来一次开发，需要实现孙组件更改父组件的值才想起来，原来这一对属性有如此大的用途且相当方便，因此这里做个总结，顺便做个简单的DEMO。 PS: 下面提到的父组件，子组件，孙组件只 阅读全文
posted @ 2019-07-24 09:12 点点乐淘淘 阅读(2932) 评论(0) 推荐(1)
vue指令应用--实现输入框常见过滤功能
摘要：前端开发最常碰到的就是输入框，经常要做各种验证，本公司惯用的需求是直接屏蔽特定字符的输入，如禁止非数字输入，特殊符号输入，空格输入等，这些功能反复使用，做成指令的形式，直接调用，非常方便，上代码： 目录结构很简单： 1、项目文件夹里新建directives文件夹，所有指令都放在这个文件夹里 2、in 阅读全文
posted @ 2019-06-12 14:28 点点乐淘淘 阅读(5427) 评论(0) 推荐(1)
vue项目实现导出数据到excel
摘要：实现导出功能分两种，一种是客户端拿到数据做导出，第二种是服务器端处理好，返回一个数据流实现导出 第一种网上很容易找到，也很好用，本文要说的是第二种。 服务器端返回的是流数据，js提供了对应的处理方法，fetchExport是封装的ajax请求方法，利用axios创建一个实例，请求头要特别注意设置响应 阅读全文
posted @ 2019-06-01 17:39 点点乐淘淘 阅读(5884) 评论(0) 推荐(0)
组件绑定v-model，实现最大化复用
摘要：看优秀的vue项目，对组件的封装做的都非常到位，比如一个按钮都可以实现复用，仔细研究会发现实现基础就是组件直接绑定v-model，来看看按钮： 比如有个点赞按钮，长这样： 当点赞之后变成这样： 相信很多人会直接在当前这个组件里写上DOM结构，样式和点击事件，其实这样会造成严重的耦合，也没法复用，封装 阅读全文
posted @ 2019-05-31 11:58 点点乐淘淘 阅读(497) 评论(0) 推荐(0)
element ui源码解析 -- button篇
摘要：要看源码就得从最简单的开始，button够简单的了，就从他开始吧。 安装依赖后源码目录在：node_modules/element-ui/packages中，可以看到这里的文件夹命名是不是很熟悉，就是我们平时写的组件名，打开任何一个文件夹，都有一个src文件夹和一个index.js，src文件夹放组 阅读全文
posted @ 2019-05-09 15:22 点点乐淘淘 阅读(2702) 评论(0) 推荐(0)
基于element ui的图片预览插件
摘要：写插件很简单，满足两个条件即可，一、基本的逻辑思路，二、熟悉插件语法要求。本次Vue插件也比较简单，点击“查看图片”用轮播的方式限制用户上传的图片，如图： 项目采用的是vue-element-admin 在‘src/components’下新建‘imgPreview’文件夹，然后在该文件夹下新建‘I 阅读全文
posted @ 2019-04-10 17:33 点点乐淘淘 阅读(21376) 评论(0) 推荐(0)
vue打包静态资源路径不正确的解决办法
摘要：vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题，常见的有两个 1、js，css路径不对 解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’ 2、css中引用的图片资源找不到 我的login.vue文件中有一段css，其中引用了一个背景 阅读全文
posted @ 2017-11-03 08:43 点点乐淘淘 阅读(33665) 评论(1) 推荐(0)
vue学习笔记二：v-if和v-show的区别
摘要：v-if vs v-show v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是 阅读全文
posted @ 2017-08-15 15:49 点点乐淘淘 阅读(193) 评论(0) 推荐(0)
vue学习笔记一：用Key管理可复用元素
摘要：vue为了高效的渲染元素，会尽可能的复用组件，而不是从头渲染，如下案例 在输入框中输入值后，点切换，你会发现输入的值还在，加个key就能让vue重新渲染input元素 阅读全文
posted @ 2017-08-15 15:46 点点乐淘淘 阅读(606) 评论(0) 推荐(0)
vue学习笔记三：常见的表单绑定
摘要：{{checked}} jack sim tom mei {{names}} male female {{gende... 阅读全文
posted @ 2017-08-09 16:15 点点乐淘淘 阅读(219) 评论(0) 推荐(0)
如何理解vue.js组件的作用域是独立的
摘要：vue.js组件的作用域是独立，可以从以下三个方面理解： 1、父组件模板在父组件作用域内编译，父组件模板的数据用父组件内data数据；2、子组件模板在子组件作用域内编译，子组件模板的数据用子组件内data数据，如果要用父组件的必须用props传递；3、子组件标签的数据，使用父组件内的data数据 案 阅读全文
posted @ 2016-09-07 10:57 点点乐淘淘 阅读(7238) 评论(0) 推荐(2)