ElementUI

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

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

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

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

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

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

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

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

生成以周统计的表头,跨月份的周算在后一个月

这是人力统计的一个表格的表头,根据月份,划分周,每周从周一开始到周日(国内习惯性)。而跨月份的周算在前一个月还是后一个月,我们的需求是算在后一个月。根据情况而定。

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

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

前端常用UI框架整理

越来越多的设计精美的UI框架可以帮助解决项目中快速搭建前端原型,基本覆盖常见的使用场景,即使没有覆盖到,也可通过重写CSS来定制你想要的组件。

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

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

Sidebar