动态图标组件。
# 基础用法
设置 fontSize
属性来调整图标大小,设置 color
属性来调整图标颜色,可用给组件增加点击事件。
<template>
<EBlock class="e-spinner-showcase">
<EBlock>
<EFormItem label="调整图标大小">
<EInput v-model="fontSize" />
</EFormItem>
<EFormItem label="调整颜色">
<EOptionGroup
v-model="color"
type="radio"
:options="colorOptions" />
</EFormItem>
</EBlock>
<EBlock horizontal style="width: 100%;">
<EBlock style="width: 30%;">
<div>
<e-spinner :font-size="fontSize" :color="color" />
<span>default</span>
</div>
<div>
<e-spinner-ios :font-size="fontSize" :color="color" />
<span>ios</span>
</div>
<div>
<e-spinner-md :font-size="fontSize" :color="color" />
<span>md</span>
</div>
<div>
<e-spinner-audio :font-size="fontSize" :color="color" />
<span>audio</span>
</div>
<div>
<e-spinner-bars :font-size="fontSize" :color="color" />
<span>bars</span>
</div>
<div>
<e-spinner-comment :font-size="fontSize" :color="color" />
<span>comment</span>
</div>
<div>
<e-spinner-cube :font-size="fontSize" :color="color" />
<span>cube</span>
</div>
</EBlock>
<EBlock style="width: 30%;">
<div>
<e-spinner-dots :font-size="fontSize" :color="color" />
<span>dots</span>
</div>
<div>
<e-spinner-gears :font-size="fontSize" :color="color" />
<span>gears</span>
</div>
<div>
<e-spinner-grid :font-size="fontSize" :color="color" />
<span>grid</span>
</div>
<div>
<e-spinner-hourglass :font-size="fontSize" :color="color" />
<span>hourglass</span>
</div>
<div>
<e-spinner-infinity :font-size="fontSize" :color="color" />
<span>infinity</span>
</div>
<div>
<e-spinner-oval :font-size="fontSize" :color="color" />
<span>oval</span>
</div>
<div>
<e-spinner-pie :font-size="fontSize" :color="color" />
<span>pie</span>
</div>
</EBlock>
<EBlock style="width: 30%;">
<div>
<e-spinner-puff :font-size="fontSize" :color="color" />
<span>puff</span>
</div>
<div>
<e-spinner-radio :font-size="fontSize" :color="color" />
<span>radio</span>
</div>
<div>
<e-spinner-rings :font-size="fontSize" :color="color" />
<span>rings</span>
</div>
<div>
<e-spinner-tail :font-size="fontSize" :color="color" />
<span>tail</span>
</div>
<div>
<e-spinner-tail :font-size="fontSize" :color="color" @click="click" />
<span>click the icon</span>
</div>
</EBlock>
</EBlock>
</EBlock>
</template>
<script>
export default {
data() {
return {
colorOptions: ['primary', 'success', 'warn', 'error', 'secondary'],
fontSize: '24px',
color: 'primary',
};
},
methods: {
click() {
window.alert('clicked');
},
},
};
</script>