no message
Former-commit-id: a5a79c56821d2740d7caeedd693ee3b0d2789d78 Former-commit-id: ff3644d92902815dfc198c7889eaf20941269c6d Former-commit-id: febdf06a50063ce86001f42544e66addd56517ae
This commit is contained in:
48
static/markdownFiles/article/组件 - 图标组件.md
Normal file
48
static/markdownFiles/article/组件 - 图标组件.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 图标
|
||||
|
||||
## 使用方法
|
||||
|
||||
基本
|
||||
|
||||
```
|
||||
// 并无卵用的使用方式
|
||||
<Icon></Icon>
|
||||
// 指定图标名称
|
||||
<Icon name="github"></Icon>
|
||||
// 设置行内样式
|
||||
<Icon name="github" style="font-size: 100px;"></Icon>
|
||||
// 设置 class
|
||||
<Icon name="github" class="icon-class-demo"></Icon>
|
||||
```
|
||||
|
||||
这个组件只是简化了写法而已
|
||||
|
||||
`<Icon name="github"></Icon>` 等于 `<i class="fa fa-github" aria-hidden="true"></i>`
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
|
||||
|
||||
## 参考
|
||||
|
||||
推荐一个国内的图表索引 [Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
|
||||
|
||||
PS. 左侧最后一个图标的样式 `SCSS`
|
||||
|
||||
```
|
||||
<style lang="scss">
|
||||
.icon-class-demo {
|
||||
transition: all .3s;
|
||||
font-size: 100px;
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&:hover{
|
||||
color: #F56C6C;
|
||||
transform: scale(1.2) rotate(30deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
## 参数
|
||||
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| value | 绑定的值,可以使用 v-model | 非 | String | | |
|
||||
|
||||
Reference in New Issue
Block a user