repair_lite/front-end/src/components/top-bar/sider-trigger/SiderTrigger.vue

<template>
    <Button type="text" :class="['trigger-btn',collapsed ? 'collapsed':'']" @click="handleChange">
        <Icon :type="icon" :size="size"></Icon>
    </Button>
</template>

<script>
    export default {
        name: "SiderTrigger",
        props: {
            collapsed: Boolean,
            icon: {
                type: String,
                default: ''
            },
            size: {
                type: Number,
                default: 26
            }
        },
        methods: {
            handleChange(){
                this.$emit('on-change', !this.collapsed)
            }
        }
    }
</script>

<style lang="less" scoped>
@import "./sider-trigger.less";
</style>