44 lines
750 B
Vue
44 lines
750 B
Vue
<template>
|
|
<div
|
|
style="padding: 0 calc(15px * var(--beilv)) 0 calc(32px * var(--beilv));"
|
|
@click="toggleClick"
|
|
>
|
|
<svg-icon
|
|
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv));"
|
|
class="item-icon hamburger"
|
|
:class="{ 'is-active': isActive }"
|
|
icon-class="hamburgerBtn"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Hamburger',
|
|
props: {
|
|
isActive: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
toggleClick() {
|
|
this.$emit('toggleClick')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hamburger {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.hamburger.is-active {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style>
|