feat:【ele】【mall】diy-editor 的 floating-action-button 使用 tailwindcss 简化 style
This commit is contained in:
@@ -56,8 +56,8 @@ function handleToggleFab() {
|
|||||||
<ElButton type="primary" size="large" circle @click="handleToggleFab">
|
<ElButton type="primary" size="large" circle @click="handleToggleFab">
|
||||||
<IconifyIcon
|
<IconifyIcon
|
||||||
icon="ep:plus"
|
icon="ep:plus"
|
||||||
class="fab-icon"
|
class="transition-transform duration-300"
|
||||||
:class="[{ active: expanded }]"
|
:class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
|
||||||
/>
|
/>
|
||||||
</ElButton>
|
</ElButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -68,14 +68,3 @@ function handleToggleFab() {
|
|||||||
@click="handleToggleFab"
|
@click="handleToggleFab"
|
||||||
></div>
|
></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.fab-icon {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
transition: transform 0.3s;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
transform: rotate(135deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user