header

基础用法

ykc-header 的基础用法。

title

张三

• 修改密码

<template>
  <ykc-header
    class="ykc-header-demo"
    :title="title"
    username="张三"
    @overview="handleOverview"
    @change-password="handleChangePassword"
    @logout="handleLogout"></ykc-header>
</template>

<script>
  export default {
    data() {
      return {
        title: 'title',
      };
    },
    methods: {
      handleOverview() {
        this.title = '总览';
        this.$message.success('总览');
      },
      handleChangePassword() {
        this.title = '修改密码';
        this.$message.warning('修改密码');
      },
      handleLogout() {
        this.title = '退出登录';
        this.$message.error('退出登录');
      },
    },
  };
</script>

<style>
  .ykc-header-demo {
    border: 1px solid #ccc;
  }
</style>

显示代码 复制代码 复制代码

Attributes

参数	必填	说明	类型	可选值	默认值
title	否	当前页面标题	String	无	无
username	是	当前登录用户名	String	无	无

Events

事件名称	说明	回调参数
overview	点击总览按钮	无
change-password	修改密码	无
logout	退出登录	无