Vue

Vue 自定义指令可以实现哪些有用的功能

Vue 有一些很实用的指令 v-show v-if v-text v-html v-bind v-on 可以帮助我们实现很复杂的功能,同时它还开辟了钩子供我们自己实现自定义指令。根据自己平时开发总结了一些可以通过指令实现的功能场景:

Element 通知组件 Notification 支持同类型的提示信息只弹出一次!!!

当我们在使用 Element Notification 通知组件的时候,由于该组件不是通过实例化来创建的,当有事件触发通知时我们就无法控制在同一个页面相同的消息只弹出一次,我们必须使用其它的手段来实现。能否通过一个标识来记录当前页面已经触发通知,我们根据这个标识来判断是否再次弹出相同的提示信息。

如何在启动 Vue 程序之前读取本地静态文件内容

有这样一个需求,就是希望通过本地的 Json 文件来写入一些内容,比如请求后端接口的 API 前缀,我们在 public 目录下面新建一个 project.config.json 文件来做一些配置项:

Element UI Loading 加载组件动态变更 text 值(加载文案)

有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。如果我想在 loading 的时候,同时显示上传的进度值,于是我在 text 值里拼接上进度值变量,发现只显示最初的进度变量值,并没有随着变量的改变而更新视图。 官方文档里也没有提供能动态改变加载文案的 API,网上看到有人说可以使用 setText 来设置 text 值,于是使用以下方法试了试,还真的可以

ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字

当我们使用 ElementUI 构建表单页面的时候,经常需要使用到复合型输入框,可前置或后置元素,一般为标签或按钮,作为该输入框的说明性文字。 但是 DatePicker 日期选择器组件并没有提供 Slot 来让我们添加同样的解释性文字,如果只是用 placeholder 说明,当选择日期后我们并不知道该区域是干什么的。 想达到 Input 组件同样的 UI 效果,好像只能自己想办法了。(有点疑惑,为什么日期组件官方没有提供前置和后置 Slot 插入内容的功能,这个场景还是很常见的)

Vue刷新页面有哪几种方式

在Vue项目中,刷新当前页除了 window.reload(),你还能想到什么办法?而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。 在某个详情页面的时候,我们经常需要通过路由中的详情 id 去获取内容,当我们在不同的详情页来回切换的时候,打开的页面是同一个,只是需要通过监听路由中的参数 id 的变化去重新请求详情接口。

Vue 页面如何监听用户预览时间

最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加入开始计时和清除计时的逻辑,通过后台的接口上报对应的培训素材的时间数据,即可达到目的

如何全局引入 Vue Composition API

使用过Vue3 开发的难免会被每个页面都要引入 vue 的Api而烦恼,这也是相较 2.x 版本的最大的区别。有相过为什么要这样做吗? 因为在 2.x 的版本中,我们在入口文件 main 中全局注册唯一的vue对象实例,而所有的api都可以通过这个对象的引用获得。Vue 3的改进就是要优化打包的体积,更方便的进行复用逻辑组件,分成一个个的小的vue 实例,从而Api也是根据需要手动引入。

Vue.nextTick 用法原理详解

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

Element table 实现点击任何一处展开行功能

正常默认是点击行前面的向右箭头展开行,但是从用户体验上好像不是很人性化,产品经理需要点击整行的任何一处,即可展开。 实现也不是不可能,table组件提供很过的API和属性,通过组合即可实现。先设置行的 row-key 属性,然后利用 expand-row-keys 属性来控制当前展开的行,它是一个数组,可控制多行展开。最后通过 row-click 事件API来触发更新 expand-row-keys 数组。

Sidebar