EIcon
图标库,提供了一套常用的图标集合。
# 基础示例
直接通过设置属性 name
来使用即可。
<template>
<EBlock horizontal align="center start" class="e-icon-showcase">
<EIcon :name="'ab-test'" :font-size="'24px'" style="margin-right: 16px;" />
<EIcon :name="'balloons-square'" :font-size="'24px'" style="margin-right: 16px;" />
<EIcon :name="'comments-alt-dots-o'" :font-size="'24px'" style="margin-right: 16px;" />
<EButton theme="primary">
<EIcon :name="'download'" :font-size="'16px'" /> 下载
</EButton>
</EBlock>
</template>
# 添加点击事件
<template>
<EBlock class="e-icon-showcase" horizontal align="center start">
<EIcon name="plus-circle" font-size="24px" @click="alert('clicked')" style="margin-right: 8px;" />
<EText>icon 加 click 事件</EText>
</EBlock>
</template>
<script>
export default {
name: 'EIconShowcase',
methods: {
alert(message) {
// eslint-disable-next-line no-alert
window.alert(message);
},
},
};
</script>
# 图标集合
<template>
<EBlock class="e-icon-showcase">
<div style="padding: 16px;">
<div>fontSize: <input v-model="size" type="number" style="border: 1px solid #ddd; padding: 5px 10px; border-radius: 3px;"></div>
<div style="padding: 16px 0 0;">
color:
<span style="margin: 0 10px;">
<input v-model="color" type="radio"> null
</span>
<span style="margin: 0 10px;">
<input v-model="color" type="radio" value="primary"> primary
</span>
<input v-model="color" type="radio" value="secondary"> secondary
</div>
</div>
<div style="padding: 0 0 16px 16px;">
parent dom font-size: <input v-model="cssFontSize" type="text" style="border: 1px solid #ddd; padding: 5px 10px; border-radius: 3px;">
</div>
<EBlock :style="{fontSize: cssFontSize, padding: '16px', width: '100%'}">
<EBlock >
<EBlock v-for="name in customNames" :key="name" horizontal align="center">
<EIcon :name="name" :font-size="size" :color="color" :style="{padding: padding}" />
<EText style="margin-left: 8px;">{{ name }}</EText>
</EBlock>
</EBlock>
<EBlock>
<EIcon name="plus-circle" :font-size="size" :color="color"
:padding="padding" @click="alert('clicked')" />
<EText>icon 加 click 事件</EText>
</EBlock>
</EBlock>
</EBlock>
</template>
<script>
export default {
data() {
return {
cssFontSize: '24px',
size: 0,
color: null,
padding: null,
customNames: [],
};
},
computed: {
},
created() {
setTimeout(() => {
this.customNames = Array.from(document.querySelectorAll('body>svg>symbol'))
.map(el => el.getAttribute('id')).sort();
}, 500);
},
methods: {
alert(message) {
// eslint-disable-next-line no-alert
window.alert(message);
},
},
};
</script>
# EIcon
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
name | 图标名,对应 iconfont 图标库的图标名 | String | true | - |
color | 字体颜色,支持 primary 等预定义主题颜色 | String | false | - |
fontSize | 字体大小,支持带 px | String / Number | false | - |