Blame view

ant-design-vue-jeecg/src/components/page/PageHeader.vue 4.57 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <div class="page-header">
    <div class="page-header-index-wide">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
          <router-link v-if="item.name != name" :to="{ path: item.path }">
            {{ item.meta.title }}
          </router-link>
          <span v-else>{{ item.meta.title }}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>

      <div class="detail">
        <div class="main" v-if="!$route.meta.hiddenHeaderContent">
          <div class="row">
            <img v-if="logo" :src="logo" class="logo"/>
            <h1 v-if="title" class="title">{{ title }}</h1>
            <div class="action">
              <slot name="action"></slot>
            </div>
          </div>
          <div class="row">
            <div v-if="avatar" class="avatar">
              <a-avatar :src="avatar"/>
            </div>
            <div v-if="this.$slots.content" class="headerContent">
              <slot name="content"></slot>
            </div>
            <div v-if="this.$slots.extra" class="extra">
              <slot name="extra"></slot>
            </div>
          </div>
          <div>
            <slot name="pageMenu"></slot>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
肖超群 authored
44
45
46
47
48
49
50
51
52
53
54
55
import Breadcrumb from '@/components/tools/Breadcrumb'

export default {
  name: "PageHeader",
  components: {
    "s-breadcrumb": Breadcrumb
  },
  props: {
    title: {
      type: String,
      default: '',
      required: false
肖超群 authored
56
    },
肖超群 authored
57
58
59
60
    breadcrumb: {
      type: Array,
      default: null,
      required: false
肖超群 authored
61
    },
肖超群 authored
62
63
64
65
    logo: {
      type: String,
      default: '',
      required: false
肖超群 authored
66
    },
肖超群 authored
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
    avatar: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      name: '',
      breadList: [],
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {

      this.breadList = []
      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})

      this.name = this.$route.name
      this.$route.matched.forEach((item) => {
        // item.name !== 'index' && this.breadList.push(item)
        this.breadList.push(item)
      })
    }
  },
  watch: {
    $route() {
肖超群 authored
97
98
99
      this.getBreadcrumb()
    }
  }
肖超群 authored
100
}
肖超群 authored
101
102
103
104
</script>

<style lang="less" scoped>
肖超群 authored
105
106
107
108
109
110
111
112
113
114
115
116
.page-header {
  background: #fff;
  padding: 16px 32px 0;
  border-bottom: 1px solid #e8e8e8;

  .breadcrumb {
    margin-bottom: 16px;
  }

  .detail {
    display: flex;
    /*margin-bottom: 16px;*/
肖超群 authored
117
肖超群 authored
118
119
120
121
122
123
124
125
126
127
    .avatar {
      flex: 0 1 72px;
      margin: 0 24px 8px 0;

      & > span {
        border-radius: 72px;
        display: block;
        width: 72px;
        height: 72px;
      }
肖超群 authored
128
129
    }
肖超群 authored
130
131
132
    .main {
      width: 100%;
      flex: 0 1 auto;
肖超群 authored
133
肖超群 authored
134
135
136
137
138
139
      .row {
        display: flex;
        width: 100%;

        .avatar {
          margin-bottom: 16px;
肖超群 authored
140
141
142
        }
      }
肖超群 authored
143
144
145
      .title {
        font-size: 20px;
        font-weight: 500;
肖超群 authored
146
肖超群 authored
147
148
149
150
151
152
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, .85);
        margin-bottom: 16px;
        flex: auto;
肖超群 authored
153
肖超群 authored
154
      }
肖超群 authored
155
肖超群 authored
156
157
158
159
160
161
      .logo {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        margin-right: 16px;
      }
肖超群 authored
162
肖超群 authored
163
164
165
166
      .content, .headerContent {
        flex: auto;
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
肖超群 authored
167
肖超群 authored
168
169
170
171
172
173
174
        .link {
          margin-top: 16px;
          line-height: 24px;

          a {
            font-size: 14px;
            margin-right: 32px;
肖超群 authored
175
176
          }
        }
肖超群 authored
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
      }

      .extra {
        flex: 0 1 auto;
        margin-left: 88px;
        min-width: 242px;
        text-align: right;
      }

      .action {
        margin-left: 56px;
        min-width: 266px;
        flex: 0 1 auto;
        text-align: right;

        &:empty {
          display: none;
肖超群 authored
194
195
196
197
        }
      }
    }
  }
肖超群 authored
198
}
肖超群 authored
199
肖超群 authored
200
.mobile .page-header {
肖超群 authored
201
肖超群 authored
202
  .main {
肖超群 authored
203
肖超群 authored
204
205
    .row {
      flex-wrap: wrap;
肖超群 authored
206
肖超群 authored
207
208
209
210
211
212
213
      .avatar {
        flex: 0 1 25%;
        margin: 0 2% 8px 0;
      }

      .content, .headerContent {
        flex: 0 1 70%;
肖超群 authored
214
肖超群 authored
215
216
217
        .link {
          margin-top: 16px;
          line-height: 24px;
肖超群 authored
218
肖超群 authored
219
220
221
          a {
            font-size: 14px;
            margin-right: 10px;
肖超群 authored
222
223
          }
        }
肖超群 authored
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
      }

      .extra {
        flex: 1 1 auto;
        margin-left: 0;
        min-width: 0;
        text-align: right;
      }

      .action {
        margin-left: unset;
        min-width: 266px;
        flex: 0 1 auto;
        text-align: left;
        margin-bottom: 12px;

        &:empty {
          display: none;
肖超群 authored
242
243
244
245
        }
      }
    }
  }
肖超群 authored
246
}
肖超群 authored
247
</style>