<script>
  export default {
    data() {
      return {
        count: 3,
        isFull: true,
        isNews: true,
        isEmail: true,
        isNames: true,
        isOut: true
      }
    },
    created() {

    },
    methods: {
      openNews(val){

      },
      openEmail(){

      },
      getOut(){
        this.$Modal.confirm({
          title:'是否确认退出？',
          onOk: () => {
             //this.$router.push({path:''})  跳转到登录页
             // Cookie.remove("");清除cookie
             // localStorage.clear();清除localStorage
          },
          onCancel:()=>{
            // this.$Message.info('');
          }
        })
      },
      full(val){
        console.log(val)
      }
    }
  }
</script>
<style lang="less" scoped>

</style>


# 顶部公用组件

----
<!-- 采用`iview-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。 -->

### 基础用法

- 基础的用法

<div class="demo-block">
  <div>
    <h-menuRight
       :isFull="isFull"
       :isNews="isNews"
       :isEmail="isEmail"
       :isNames="isNames"
       :isOut="isOut"
       :count="count"
       @on-openNews="openNews"
       @on-openEmail="openEmail"
       @on-getOut="getOut"
       @on-full="full">
    </h-menuRight>
  </div>
</div>

:::demo



```html
<div class="demo-block">
  <div>
    <h-menuRight
       :isFull="isFull"
       :isNews="isNews"
       :isEmail="isEmail"
       :isNames="isNames"
       :isOut="isOut"
       :count="count"
       @on-openNews="openNews"
       @on-openEmail="openEmail"
       @on-getOut="getOut"
       @on-full="full">
    </h-menuRight>
  </div>
</div>


<script>
  export default {
    data() {
      return {
        count: 3,
        isFull: true,
        isNews: true,
        isEmail: true,
        isNames: true,
        isOut: true
      }
    },
    created() {

    },
    methods: {
      openNews(val){

      },
      openEmail(){

      },
      getOut(){
        this.$Modal.confirm({
          title:'是否确认退出？',
          onOk: () => {
             //this.$router.push({path:''})  跳转到登录页
             // Cookie.remove("");清除cookie
             // localStorage.clear();清除localStorage
          },
          onCancel:()=>{
            // this.$Message.info('');
          }
        })
      },
      full(val){
        console.log(val)
      }
    }
  }
</script>


```
:::
### Attributes
| 参数         | 说明                 | 类型   | 可选值 | 默认值 |
| ------------ | -------------------- | ------ | ------ | ------ |
| isFull       |  全屏是否显示  | Boolean  |  true显示,false不显示     |  true  |
| isNews       |  消息是否显示   | Boolean  |  true显示,false不显示     |  true  |
| isEmail       |  邮箱是否显示   | Boolean  |  true显示,false不显示     |  true  |
| isNames       |  用户角色是否显示   | Boolean  |  true显示,false不显示     |  true  |
| isOut       |  退出登陆是否显示   | Boolean  |  true显示,false不显示     |  true  |
| count       |  消息数量  | Number  |    阿拉伯数字    |  3  |



### Events
| 事件名         | 说明             | 返回值                       |
| -------------- | ---------------- | ---------------------------- |
| @on-openNews | 消息弹窗的触发事件 | - |
| @on-openEmail | 邮箱自定义触发事件 | - |
| @on-getOut | 退出登陆的触发事件 | - |
| @on-full | 全屏与退出全屏事件 | false为全屏,true为非全屏 |
| onOk | 确认退出 | - |
| onCancel | 取消退出 | - |
