Vue()-常用组件之Logo组件

组件名：nav-logo.vue

参数两个：标题：title、图标：logo，都储存在vuex。

<!-- 左上：logo部分 -->
<template>
  <div class="com-logo-box" :title="this.$store.state.NavLog.title" @click="showHome()">
    <img :src="this.$store.state.NavLog.logo" class="admin-logo" v-if="this.$store.state.NavLog.logo" alt="">
    <span class="admin-title">{{ this.$store.state.NavLog.title }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 显示homeTab
    showHome: function () {
      window.layer.msg("请编辑logo点击事件", {icon: 2})
    },
  },
  created() {
  }
}
</script>

<style scoped>
.com-logo-box {
  cursor: pointer;
}

.admin-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 22px;
}

.admin-title {
  padding-right: 0.5em;
  margin-left: 0.5em;
  font-size: 1.05em;
}

</style>

/**
 * 主页-左侧Logo的状态数据
 *
 * @type {{logo, title: string}}
 */
const state = {
    title: '配置系统',
    logo: require('../../assets/admin-logo.png'),
};
const getters = {};
const mutations = {};
const actions = {};
const modules = {};

export default {
    state,
    getters,
    mutations,
    actions,
    modules
}