Blame view

apps/components/layouts/layout-header.vue 3.54 KB
陈峰 authored
1
<template>
陈峰 authored
2
  <div class="layout-header-wrap" v-if="!hide" :class="{[`theme-${theme}`]: theme}" :style="statusBarHeight">
yyq authored
3 4
    <div class="layout-header">
      <div class="back flex hover-opacity" @touchend.stop.prevent="onBack">
陈峰 authored
5
        <slot name="back" v-if="back && canShowBack">
yyq authored
6 7 8 9 10 11 12 13 14 15 16
          <i class="iconfont icon-left"></i>
        </slot>
      </div>
      <div class="title flex" :style="{opacity}">
        <slot>
          <span class="title-inner">{{title}}</span>
        </slot>
      </div>
      <div class="opts flex" :style="{opacity}">
        <slot name="opts"></slot>
      </div>
陈峰 authored
17
    </div>
yyq authored
18 19 20
    <div class="suction-top-block">
      <slot name="suctionTop"></slot>
    </div>
陈峰 authored
21
  </div>
陈峰 authored
22 23 24
</template>

<script>
陈峰 authored
25 26
import {mapState} from 'vuex';
陈峰 authored
27
export default {
陈峰 authored
28 29
  name: 'LayoutHeader',
  props: {
陈峰 authored
30 31 32
    title: String,
    theme: String,
    fixed: Boolean,
陈峰 authored
33 34 35 36
    back: {
      type: Boolean,
      default: true
    },
陈峰 authored
37 38 39 40
    transparentSeek: Number,
    opacity: {
      type: Number,
      default: 1
陈峰 authored
41 42 43 44 45 46 47 48 49
    },
    hide: Boolean
  },
  title(setTitle) {
    if (!setTitle) {
      return this.title;
    }
    if (this.title) {
      setTitle(this.title);
陈峰 authored
50
    }
陈峰 authored
51
    this.setTitle = setTitle;
陈峰 authored
52
  },
陈峰 authored
53
  computed: {
yyq authored
54
    ...mapState(['yoho']),
陈峰 authored
55
    canShowBack() {
陈峰 authored
56
      return !this.yoho.context.env.isChat;
陈峰 authored
57
    },
yyq authored
58
    statusBarHeight() {
yyq authored
59
      if (this.yoho.window && this.yoho.window.statusBarStatus && this.yoho.window.statusBarHeight) {
yyq authored
60
        return {paddingTop: this.yoho.window.statusBarHeight + 'px'};
yyq authored
61 62 63 64
      }

      return {};
    }
陈峰 authored
65
  },
陈峰 authored
66 67 68
  watch: {
    transparentSeek(value) {
      this.animeEl && this.animeEl.seek(this.animeEl.duration * value);
陈峰 authored
69 70 71 72 73
    },
    title(val) {
      if (val) {
        this.setTitle && this.setTitle(val);
      }
陈峰 authored
74 75 76 77 78 79 80 81 82 83 84 85 86
    }
  },
  mounted() {
    if (this.transparentSeek >= 0) {
      import('animejs').then(({default: anime}) => {
        this.animeEl = anime({
          targets: this.$el,
          backgroundColor: '#222',
          easing: 'easeInOutQuad',
          autoplay: false
        });
      });
    }
陈峰 authored
87 88 89
  },
  methods: {
    onBack() {
陈峰 authored
90
      if (this.yoho.homePage) {
yyq authored
91 92 93
        this.$yoho.safetyInterface(() => {
          this.$yoho.finishPage({});
        });
陈峰 authored
94 95 96
      } else {
        this.$router.go(-1);
      }
陈峰 authored
97
    }
陈峰 authored
98
  }
陈峰 authored
99 100
};
</script>
陈峰 authored
101 102

<style lang="scss" scoped>
yyq authored
103
.layout-header-wrap {
陈峰 authored
104
  width: 100%;
陈峰 authored
105 106
  background-color: #444;
  color: #fff;
陈峰 authored
107
陈峰 authored
108 109 110
  &.theme-white {
    background-color: #fff;
    color: #222;
yyq authored
111 112 113 114

    .layout-header {
      border-bottom: solid 1px #efefef;
    }
陈峰 authored
115 116 117 118 119 120
  }

  &.theme-transparent {
    background-color: initial;
    color: #fff;
  }
yyq authored
121 122 123 124 125 126 127 128 129
}

.layout-header {
  width: 100%;
  height: 44PX;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
陈峰 authored
130
yyq authored
131 132 133 134
  > * {
    position: relative;
  }
陈峰 authored
135 136 137 138 139 140 141
  .flex {
    display: flex;
    align-items: center;
  }

  .iconfont {
    height: 100%;
陈峰 authored
142
    font-size: 20PX;
陈峰 authored
143 144
    display: flex;
    align-items: center;
陈峰 authored
145 146 147
    justify-content: center;
    padding-left: 10PX;
    padding-right: 10PX;
陈峰 authored
148 149 150
  }

  .back {
陈峰 authored
151 152
    width: 160px;
    padding-left: 5px;
陈峰 authored
153 154 155 156 157
  }

  .title {
    flex: 1;
    justify-content: center;
陈峰 authored
158
    font-size: 18PX;
陈峰 authored
159
    letter-spacing: 0.09PX;
陈峰 authored
160
    overflow: hidden;
yyq authored
161
    z-index: 1;
yyq authored
162 163 164

    .title-inner {
      max-width: 90%;
yyq authored
165
      line-height: 1.4;
yyq authored
166 167 168 169 170
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
陈峰 authored
171 172 173
  }

  .opts {
陈峰 authored
174
    width: 160px;
陈峰 authored
175
    height: inherit;
陈峰 authored
176
    justify-content: flex-end;
陈峰 authored
177
    padding-right: 5px;
陈峰 authored
178 179 180 181

    .iconfont {
      font-size: 23PX;
    }
陈峰 authored
182 183
  }
}
yyq authored
184 185 186 187 188

.suction-top-block {
  width: 100%;
  position: absolute;
}
陈峰 authored
189
</style>