<script>
export default {
  data() {
    return {

    }
  },
  created() {},
  methods: {
    handleOut(){
      this.$Modal.confirm({
        title:'是否确认退出？',

        onOk: () => {
           //this.$router.push({path:''})  跳转到登录页
           // Cookie.remove("");清除cookie
           // localStorage.clear();清除localStorage
        },
        onCancel:()=>{
          // this.$Message.info('');
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .demo-block {
    >div {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>

# 退出

----
采用`element-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。

### 基础用法

- 基础的退出icon用法

<div class="demo-block">
    <h-logOut @handleOut="handleOut"></h-logOut>
</div>

:::demo



```html
  <div>
       <h-logOut @handleOut="handleOut"></h-logOut>
  </div>
  <script>
 export default {
  data() {
    return {

    }
  },
  created() {},
  methods: {
    handleOut(){
      this.$Modal.confirm({
        content:'是否确认退出？',
        onOk: () => {
           //this.$router.push({path:''})  跳转到登录页
           // Cookie.remove("");清除cookie
           // localStorage.clear();清除localStorage
        },
      })
    }
  }
}
</script>

```
:::
### Attributes
| 参数         | 说明                 | 类型   | 可选值 | 默认值 |
| ------------ | -------------------- | ------ | ------ | ------ |




### Events
| 事件名         | 说明             | 返回值                       |
| -------------- | ---------------- | ---------------------------- |
| @handleOut | 退出方法 | —— |

