公用头部组件-vue2

1.头部组件

<template>
    <div id="w-header" :style="entiretyStyle">
        <div class="title" onselectstart="return false;" :style="titleStyle">
            <span :style="textStyle" v-if="textShow"> {{ titleText }}</span>
            <slot name="title"></slot>
            <i :class="{ [icon]: true, close: !shrink }" id="icon-title" @click="shrinkClick" v-if="iconShow"></i>
        </div>
        <div class="context" id="headerContext" :class="{ close: !shrink }">
            <slot name="context"></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        entiretyStyle: {
            type: Object,
            default: () => {
                return {}
            }
        },
        titleStyle: {
            type: Object,
            default: () => {
                return {}
            }
        },
        titleText: {
            type: String,
            default: '标题'
        },
        textStyle: {
            type: Object,
            default: () => {
                return {}
            }
        },
        textShow: {
            type: Boolean,
            default: true
        },
        icon: {
            type: String,
            default: 'el-icon-arrow-down'
        },
        iconShow: {
            type: Boolean,
            default: true
        },
        customEvent: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            shrink: true
        }
    },
    mounted() {

    },
    methods: {
        shrinkClick() {
            this.shrink = !this.shrink
            if (this.customEvent) {
                this.$emit('customShrinkEvent')
            }
        }
    }
}
</script>
<style lang="less" scoped>
#w-header {
    width: 100%;
    overflow: hidden;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 32px;
        padding: 0px 10px;
        // background-color: rgb(242, 242, 242);
        background: rgba(0, 0, 0, 0.02);
        box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(0, 0, 0, 0.04);
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);

        #icon-title {
            color:#c9c9c9;
            cursor: pointer;
            transition: all 0.5s ease-in-out;
            transform: rotate(0deg);

            &.close {
                transform: rotate(-180deg);
            }
        }
    }

    #headerContext {
        transition: all 0.4s ease-in-out;
        max-height: 10000px;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* IE 10+ */

        &.close {
            max-height: 0px;
        }

        &::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
        }
    }
}

2.使用头部组件

<template>
  <div>
    <w-hearder titleText="属性"></w-hearder>
  </div>
</template>
<script>
export default {
  components: {
    WHearder: () => import("@/components/W-Header/index.vue")
  },
};
</script>

3.展现（样式自行修改、内容自行修改，喜欢加什么加什么）