@dxp-dc/el-header NPM

el-header

short description + sample image(png/gif/mp4)

Introduction
Features
Install
Usage
Links
Contributing
Contributors
License

Introduction

If there is no more words to write, this section can be deleted.

⬆ Back to Top

Features

头部导航组件

⬆ Back to Top

Install

import ElHeader from '@dxp-dc/el-header'
Vue.use(ElHeader)

⬆ Back to Top

Usage

<template>
    <el-header
      :apps="apps"
      :message="message"
      @help="handleHelpClick"
      @data-board="handleDataBoardClick"
      @logout="handleLogout"
    />
</template>

<script>
    const apps = [
      {
        active: true,
        name: '零售',
        icon: 'iconh_shangpinshuju',
        onClick: () => {
          apps[0].active = true
          apps[1].active = false
          // eslint-disable-next-line no-console
          console.log('零售')
        },
      },
      {
        active: false,
        name: '运营',
        icon: 'iconh_yunying1',
        onClick: () => {
          // eslint-disable-next-line no-console
          console.log('运营')
          apps[0].active = false
          apps[1].active = true
        },
      },
    ]

export default {
  data() {
    return {
      apps,
      message: {
        badge: true,
        onClick: () => {
          // eslint-disable-next-line no-console
          console.log('message')
          this.message.badge = false
        },
      },
    }
  },
  methods: {
    handleLogout() {
      console.log('logout')
    },
    handleDataBoardClick() {
      console.log('handleDataBoardClick')
    },
    handleHelpClick() {
      console.log('handleHelpClick')
    },
  }  
}
</script>

⬆ Back to Top