hkyy/admin-frame/naf/frame/header/logo.vue.bak

<template>
  <div class="logo">
    <router-link to="/">
      <span class="h1">{{ shortName }}</span>
    </router-link>
    <el-tooltip effect="dark" :content="switchTip" placement="bottom" v-if="!collapse">
      <el-switch :value="navMode" active-color="#ff1b14" active-value="nested" inactive-value="lite" @change="switchMode"> </el-switch>
    </el-tooltip>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('naf/menu');
export default {
  props: {
    shortName: String,
    width: {
      type: String,
      default: '256px',
    },
    navMode: String,
  },
  methods: {
    switchMode(payload) {
      this.$emit('switch-mode', payload);
    },
  },
  computed: {
    ...mapState(['collapse']),
    switchTip() {
      return this.navMode == 'nested' ? '切换到简单导航模式' : '切换到经典导航模式';
    },
  },
};
</script>
<style lang="less" scoped>
.logo {
  display: table;
  margin-left: 5%;
  padding: 0 16px;
  overflow: hidden;
  width: 18%;
  height: 100%;
  .h1 {
    color: #000;
    font-size: 1.5em;
    width: 70%;
    float: left;
    display: block;
    line-height: 7rem;
  }

  .el-switch {
    margin-top: 2.8rem;
    display: table-cell;
    width: 10%;
    float: right;
    margin-right: 0.5rem;
  }
}
</style>