||

使用Vue开发UI组件:Icon图标组件

这是 Vue 组件开发的第一篇文章,先从最简单的 Icon 组件开始,Icon 是一个在前端经常会用到的组件单元,后续的很多组件可能都有对它的依赖,所以先从 Icon 开始。

开发

这套UI的图标系统使用的是 themify-icons ,将依赖导入项目中,编写组件模板:

<template>
  <i class="sicon" :class="classes"></i>
</template>

这里最关键的就是 classes 的生成规则:

computed: {
  classes() {
    return [`ti-${this.name}`];
  }
}

从代码可以看出,因为这套UI的前缀使用了 ti- ,所以为了简洁,classes 在计算时会自动补齐前缀,用户只需要填写后续的图标名称即可。

使用

图标的使用非常简单,只需要包含 name 属性的标签即可。

<sicon name="user"></sicon>

属性:name

属性 name 对应着 themify-icons 的名称(不含前缀 ti-)。

属性值 引用
user name="user"
layout name="layout"
heart name="heart"
unlock name="unlock"
star name="star"
comments name="comments"
palette name="palette"

演示

下面给出一些示例的图标样式,这些图标全部可以在UI系统中使用。

类似文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注