vue.jsx技术栈
夜码狂农
这个作者很懒,什么都没留下…
展开
-
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件。 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然而无论是官方文档还是网络上的解决方案都不直观甚至有错误,开发者不经过一番探索,很难知道如何处理,甚至怀疑该插件是否能监听加载失败事件。笔者经过一番探索,所幸的是,发现该问题终究是能够解决的,现将相关解决方案分享如下。业务场景试想这样的场景:在img标签上,使用v-lazy绑定的图片的地址。图片的地址可能原创 2020-05-15 09:47:38 · 4854 阅读 · 0 评论 -
axios封装技巧合集:让你的axios更好用的“七种武器”
axios如何封装才好用前端项目中现已广泛使用axios来进行ajax请求的处理,一个很重要的问题是:如何对axios部分进行设计,才能使得接口调用简洁,并且能够应对各种复杂的情况。就笔者参与维护的不少项目而言,axios的封装似乎过于复杂,并且没有发挥出axios的强大功能。好用性虽则每个开发者有不同的见解,然则逻辑的清晰与否、调用是否复杂、是否易于维护等则是比较容易有一致看法的。本...原创 2020-04-07 22:14:12 · 806 阅读 · 0 评论 -
vue+elementUI项目实现自定义校验规则的传参复用性
vue+elementUI项目的表单校验可以复用吗?原创 2020-04-04 19:52:50 · 9001 阅读 · 5 评论 -
vue项目妙用scss mixin实现样式全编程式风格
对于vue项目的样式部分,有多种风格,这将取决于框架搭建人员的设计思路。本人在vue项目中以使用sass(scss)为主,经探索,现研究出一种封装方案,可以快速的进行样式开发。这种方案的优点是:极大节省样式代码的行数,简洁。原先需要4-5行的代码仅需一行即可,即便是极端情况下也不会增加代码行数。样式代码被分成了几类,清晰易读。可扩展性强,要增加样式只需给mixin增加参数。可维护性强,很...原创 2020-03-27 22:16:18 · 4541 阅读 · 0 评论 -
Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)
tinymce是一款综合口碑特别好、功能异常强大的富文本编辑器,在某些网站,甚至享有“宇宙最强富文本编辑器”的称号。那么,在Vue项目中如何集成呢?本人参考了众多网络资料进行配置,竟然没有一篇文章能够完全吻合,并且各个教程显得极其繁琐。 本人不认为配置tinymce需要如此复杂,并认为很多教程的一些步骤是完全冗余的,因此重新参考官方教程,反复实践,终究得以攻克。现将配置的细节、一些极其关键的要...原创 2019-11-21 22:20:16 · 2273 阅读 · 0 评论 -
Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置。即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带宽和资源。在Vue-cli 3.0项目中常用webpack-spritesmith进行相关配置,该插件的文档不太直观,并且文档中基于webpack,而vue-cli 3.0的配置是与webpack有...原创 2019-05-22 18:58:44 · 3431 阅读 · 1 评论 -
Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景在使用Element UI的Table组件时,常常面对这样的业务需求:表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能。并且,表格下方实时统计已勾选数据的项数、重量、金额等。“弯路”分析我们可能会走“弯路”,使用过于复杂的逻辑去实现。常见的弯路是:在Vue的data里面存储已勾选数据的数组,而后基于table的s...原创 2019-10-13 14:03:35 · 6079 阅读 · 2 评论 -
ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
试想一种比较复杂的业务场景:表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框。当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证;取消该行的勾选框,则禁用该行的输入框,并禁用该行输入框的表单验证。思路分析动态表单验证这里显然是一个数据遍历产生的动态表单验证问题,并且与el-table相结合。动态表单验证唯一的难点在于表单项的prop属性的设置问题...原创 2019-10-13 14:03:16 · 11335 阅读 · 5 评论 -
element UI排坑记(一):判断tabs组件是否切换
一、问题描述在element UI的tabs组件中,假设需要在tab切换时执行某个函数,有什么方案?二、问题举例有两个tab,tab1和tab2,两个tab都有一个el-select组件,分别是el-select1和el-select2。el-select1和el-select2绑定了同一个字段,但是两者的下拉选项不相同。在切换tab时将导致以下问题:1. 显示tab1中内容时,a的值是...原创 2019-10-13 14:02:28 · 13256 阅读 · 1 评论