feat: add page-header

packages/element-plus/index.ts

@@ -16,6 +16,7 @@ import ElRate from '@element-plus/rate'
 import ElSwitch from '@element-plus/switch'
 import ElContainer from '@element-plus/container'
 import ElNotification from '@element-plus/notification'
+import ElPageHeader from '@element-plus/page-header'
 
 export {
   ElAvatar,
@@ -35,6 +36,7 @@ export {
   ElSwitch,
   ElContainer,
   ElNotification,
+  ElPageHeader,
 }
 
 export default function install(app: App): void {
@@ -55,4 +57,5 @@ export default function install(app: App): void {
   ElSwitch(app)
   ElContainer(app)
   ElNotification(app)
+  ElPageHeader(app)
 }

packages/page-header/__tests__/page-header.spec.ts

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils'
+import PageHeader from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('PageHeader.vue', () => {
+  test('render test', () => {
+    const wrapper = mount(PageHeader, {
+      props: { content: AXIOM },
+    })
+    expect(wrapper.find('.el-page-header__content').text()).toEqual(AXIOM)
+  })
+
+  test('slot content', () => {
+    const wrapper = mount(PageHeader, {
+      slots: { content: AXIOM },
+    })
+    expect(wrapper.find('.el-page-header__content').text()).toEqual(AXIOM)
+  })
+
+  test('prop title', () => {
+    const wrapper = mount(PageHeader, {
+      props: { title: AXIOM },
+    })
+    expect(wrapper.find('.el-page-header__title').text()).toEqual(AXIOM)
+  })
+
+  test('slot prop', () => {
+    const wrapper = mount(PageHeader, {
+      slots: { title: AXIOM },
+    })
+    expect(wrapper.find('.el-page-header__title').text()).toEqual(AXIOM)
+  })
+
+  test('event back', async () => {
+    const wrapper = mount(PageHeader, {
+      props: { content: AXIOM },
+    })
+
+    await wrapper.find('.el-icon-back').trigger('click')
+    expect(wrapper.emitted('back')).toBeDefined()
+  })
+})

packages/page-header/doc/basic.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-page-header content="Detail" @back="goBack" />
+</template>
+
+<script lang='ts'>
+export default {
+  methods: {
+    goBack() {
+      console.log('go back')
+    },
+  },
+}
+</script>

packages/page-header/doc/index.stories.ts

@@ -0,0 +1,6 @@
+export default {
+  title: 'PageHeader',
+}
+
+export { default as BasicUsage } from './basic.vue'
+

packages/page-header/index.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import PageHeader from './src/index.vue'
+export default (app: App): void => {
+  app.component(PageHeader.name, PageHeader)
+}

packages/page-header/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/page-header",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}

packages/page-header/src/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="el-page-header">
+    <div class="el-page-header__left" @click="handleClick">
+      <i class="el-icon-back"></i>
+      <div class="el-page-header__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div class="el-page-header__content">
+      <slot name="content">{{ content }}</slot>
+    </div>
+  </div>
+</template>
+<script lang='ts'>
+import { defineComponent } from 'vue'
+import { t } from '@element-plus/locale'
+
+export default defineComponent({
+  name: 'ElPageHeader',
+  props: {
+    title: {
+      type: String,
+      default: () => t('el.pageHeader.title'),
+    },
+    content: String,
+  },
+  emits: ['back'],
+  setup(props, { emit }) {
+
+    function handleClick() {
+      emit('back')
+    }
+
+    return {
+      handleClick,
+    }
+  },
+})
+</script>
+<style scoped>
+</style>