<template> <div class="fixed-header"> <LayoutHeader ref="header" :title="data.authorName" theme="transparent" :style="headerStyle"> <template> <div ref="titleBlock" class="title-block" :class="titleClass" :style="`transform: translate3d(0, ${blockTranslateY}, 0)`"> <slot></slot> </div> </template> <template v-slot:opts> <WidgetShare v-if="!share" class="article-share" :option="shareOption" @click.native="onShare"></WidgetShare> </template> </LayoutHeader> </div> </template> <script> import ArticleItemHeader from '../article/article-item-header'; import {getDetailShareData} from 'utils/share-handler'; import {mapState} from 'vuex'; export default { name: 'ArticleDetailHeader', data() { return { shareOption: { color: '#fff', iconBold: true } }; }, props: [ 'data', 'step', 'titleStep', 'share', ], computed: { ...mapState(['yoho']), stepPercent() { return parseInt(this.step, 10) / 100; }, headerStyle() { let style = {}; this.setIconColor(Math.floor((255 - 68) * (1 - this.stepPercent) + 68)); style.background = `rgba(255,255,255,${this.stepPercent})`; if (this.stepPercent > 0.98) { style.borderBottom = '1px solid #efefef'; } return style; }, blockTranslateY() { return '-' + parseInt(`0${this.titleStep}`, 10) + '%'; }, titleClass() { if (this.yoho.context.env.isChat) { return { 'no-padding-left': true, 'no-padding-right': true, }; } } }, mounted() { this._iconColor && this.setIconColor(this._iconColor); }, methods: { setIconColor(color) { if (!this.$el) { this._iconColor = color; return; } if (!this.icons) { this.icons = [...this.$el.querySelectorAll('.back .iconfont'), ...this.$el.querySelectorAll('.opts .iconfont')]; } if (this.icons && this.icons.length) { this.icons.forEach(dom => { dom.style.color = `rgb(${color},${color},${color})`; }); } }, onShare() { this.$yoho.share(getDetailShareData(this.data)); }, onFollow() { return parseInt(this.step, 10) / 100; }, onBack() { this.$refs.header.onBack(); } }, components: { ArticleItemHeader, } }; </script> <style scoped lang="scss"> .fixed-header { position: absolute; width: 100%; z-index: 10; transition: all 100ms; box-sizing: border-box; /deep/ .title { overflow: visible !important; } .title-block { height: 100%; position: absolute; top: 100%; left: -60px; right: -60px; &.no-padding-left { left: -130px; } &.no-padding-right { right: -140px; } } .article-share { margin-right: 26px; } } </style>