Vue

Vue3 实现网页背景水印功能

经常有一些公司和组织出于系统文件或信息安全保密的需要,需要在系统网页上增加带有个人标识(系统账号或个人信息)的水印,可以简单防止截图外传。 首先我们来看这样一个水印功能的实现思路,通常是在我们原有的网页上附上一个 DIV 层,将它设置绝对定位铺满整个窗口,然后 z-index 值尽量往大了设,保证让水印层处于当前网页所有元素的上面,又不影响当前网页的操作。

vxe-table 树形表格展开行设置

使用过 Element UI 树形表格的都知道当我们为表格数据进行刷新时,它的行的展开状态是不变的,而当我使用 vxe-table 时,默认情况下展开状态是不保留的,需要进行额外的设置,可在 expand-config 设置项里配置 reserve 属性为 true,另外要使之生效,还得设置 row-config 里面的 keyField 属性。

完善系统的最后一公里,增加系统日志功能

当我们在开发一个系统的时候,随着规划的功能越来越多,按照复杂度和稳定性相反的原则,为了保证系统能够按照我们设想的目标运行,我们需要对系统的运行状况进行监控。

使用 Element 组件搭建在线学习的课程卡片设计

假如我们要做一个在线课程学习的系统,其中我们需要做的一个功能就是课程信息流的一个展示,以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点:这是我们能想到的一些关键信息,考虑到必要性,剔除了一些其它的非必要的信息,需要用户点击进入详情页才能看到。作为一个前端程序员,在没有产品和设计的情况下,如何通过我们日常开发的一些经验,将这八条信息展现在一张卡片上,还要保持信息的层次感和布局的合理性,这个具有一定的挑战,且看我是如何做的吧。

在线答卷系统的前端设计与数据库系统的设计与实现

如果要你实现一个在线的答题系统,你能想到它该具有哪些功能?当我接到这样一个需求的时候,脑海中立马能想到的就是它有录入题库的功能,创建试卷后可以从题库选择试题,并且可以针对试题进行分数的设置和排序。试卷发布后,用户通过指定的链接进入到试卷页面进行答题,答题完提交后,试卷由指定人进行评分。另外可能需要一个页面记录自己的答卷记录。初步设想罗列基本功能后,然后我们针对每个功能进行细化

Axios 源码解读看这一篇就够了

axios是个很优秀的项目,截止2022/2/25为止GitHub上有着91.3k的start。而它的源码也不多,所以很值得一看。阅读源码不仅能学习到新的知识点也能发现自己的不足,带着问题去读源码是个好的习惯哦:1.axios是怎么实现可以创建多个实例的。2.axios的拦截器是怎么实现的。3.axios取消请求是怎么实现的。4.axios是怎么做到防xsrf(csrf)攻击的5.axios的优缺点

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 插入内容的功能,这个场景还是很常见的)

Sidebar