![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
TheDesiderata
这个作者很懒,什么都没留下…
展开
-
Element中el-table和MessageBox组件的二次封装
[Talk is cheap. Show me the code]不想看理论知识请直接移步最后代码示例。一、封装目的在使用ElementUI过程中,发现一些组件的代码量还是过多,并且项目中频繁使用,所以就对组件进行了二次封装,并记录在博客中,欢迎共同讨论学习。二、代码示例2.1 MessageBox的封装/** * 封装 在一个叫commonFn的公共服务里面 * @p...原创 2019-07-08 16:12:34 · 2307 阅读 · 0 评论 -
解决ElementUI中table组件无法正常加载数据的问题
[Talk is cheap. Show me the code]不想看理论知识请直接移步最后代码示例。问题描述:将Element中table组件进行了二次封装后,在后端接口未给出时,自己在页面写了一些假数据,但数据赋值过程中,页面未进行正常渲染数据。解决方法:Vue.nextTick(()=>{//确保DOM节点已经生成,在这里对表格进行赋值,===>表格未渲染数据...原创 2019-07-03 10:17:42 · 9973 阅读 · 3 评论 -
Vue解决动态图片无法加载的问题
[Talk is cheap. Show me the code]不想看理论知识请直接移步最后代码示例。一、业务场景动态加载图片,图片无法正常显示,前缀默认添加了http://localhost:9588/至于为什么会自动加,我没有找到确切的原因,后续找到后会进行更新二、代码示例示例:HTML:<img :src="imgURL" alt="图片"><im...原创 2019-07-19 14:09:53 · 1967 阅读 · 0 评论 -
在vue中嵌入iframe页面
[Talk is cheap. Show me the code]不想看理论知识请直接移步最后代码示例。一、嵌入iframe页面业务场景项目是一个物流运营平台的管理系统,系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面(这里对接了智齿)。ps:别问我为什么不自己写一个聊天的功能,问就是不知道。二、iframe是什么ifram标签规定了一个内联框架,让我们...原创 2019-07-29 14:59:12 · 14051 阅读 · 12 评论 -
Vue中通过键盘事件去除输入框中空格
[Talk is cheap. Show me the code]不想看理论知识请直接移步最后代码示例。一、项目场景项目业务基于Vue以及ElementUI下的后台管理系统,其中涉及到对表单的正则验证,表单验证的要求是去除输入框中的空格,并将字母进行大写转换。二、遇到的问题最初的解决思路:Vue本身提供了去除空格的修饰符 v-model.trim所以可以通过 v-model.t...原创 2019-08-04 22:52:48 · 1692 阅读 · 0 评论 -
Vue中slot插槽使用与理解
[Talk is cheap. Show me the code]不想看理论知识请直接移步最后代码示例。一、插槽指的是什么你可以把slot简单的理解为,向父组件向子组件中传递HTML,我们可以根据不同的页面传递不同的html模板到子组件中,已到达在不同的业务场景显示不同的页面的要求,当然你也可以传递数据、方法。slot又包括三种插槽,匿名插槽、具名插槽、作用域插槽。如果你想要更精细的解...原创 2019-08-18 15:00:03 · 260 阅读 · 0 评论 -
Vue中优雅的使用Eslint
[Talk is cheap. Show me the code]前言本文旨在快速配置一个配合Vue+Vscode+Eslint使用的代码规范检查以及代码格式化,相关知识这里不再进行讲述,本文默认你已经熟悉Vue、node、npm、vscode、eslint的基础知识。如果你还不熟悉这些知识请移步eslint中文官网。搭建一个Vue的脚手架请注意这里不要安装Eslint,因为选择安装...原创 2019-09-01 17:37:55 · 631 阅读 · 1 评论