<script>
import {mapState} from 'vuex'
import office from '../../src/assets/img/office.png'
import auth from '../../src/assets/img/auth.png'
export default {
  data() {
    return {
      office,
      data:[{imgUrl:office,name:'系统1'},{imgUrl:auth,name:'系统2'}]
    }
  },
  computed:{
    sysShow:function(){
      return this.$root.sysShow
    }
  },
  created() {},
  methods: {
    openSys(){
      if(!this.$root.sysShow){
        this.$root.sysShow = true
      } else {
        this.$root.sysShow = false
      }
    },
  }
}
</script>
<style lang="less" scoped>
  .demo-block {
    >div {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>

# 系统平台切换

----
采用`iview-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。

### 基础用法

- 系统平台切换，快速切换至其他系统

<div class="demo-block">
  <h-button type="primary" @click.stop="openSys">平台切换</h-button>
  <div>
      <h-sysChange :sysShow="sysShow" :authData="data" ></h-sysChange>
  </div>
</div>

:::demo





```html
  <div>
      <h-sysChange :sysShow="sysShow" :authData="data">
      </h-sysChange>
  </div>
  <script>
 export default {
  data() {
    return {
      data:[{imgUrl:'',name:'系统1'},{imgUrl:'',name:'系统2'}]
    }
  },
  created() {},
  methods: {

  }
}
</script>

```
:::
### Attributes
| 参数                | 说明                       | 类型   | 可选值 | 默认值 |
| ------------        | --------------------      | ------ | ------ | ------ |
| sysShow             | 是否显示平台切换          | Boolean  | -   | false       |
| authData             | 系统数据        | Array  | -   | []       |





### Events
| 事件名         | 说明             | 参数                       |
| -------------- | ---------------- | ---------------------------- |
| —— |——  | —— |
