局部引入vuetify样式不生效_Vuetify实现带有LOGO的app-bar

前言

我尝试着使用Vuetify作为我的项目的UI框架，在踩坑两天之后基本清楚了Vuetify的结构，但还是有很多模糊的地方。

不多不说，说Vuetify不适合国人不仅仅是因为Material Design，其中文文档太过贫瘠（虽然我一直认为这些框架的文档都很贫瘠），更不用说中文的博客和文章了。

这也就是我把这一次踩坑的过程写下来的原因。

问题

就目前我所观察到的，Vuetify虽然是一个多终端兼容的框架，但是其本质依然是一个基于移动端UI的框架，尤其是体现在设计层面，这一点与ElementUI完全不同，也有点颠覆我之前开发前端的世界观。当我尝试着把我的界面理解成一个移动端的App，很多疑惑就消失了。

例如，在ElementUI中常见的Header，我目前还没有在Vuetify中看到类似的概念（更有可能是我学习的不够），取而代之的是bars。

而至于bars是什么，可以参考Vuetify的官方文档：

https://vuetifyjs.com/zh-Hans/components/app-bars/​vuetifyjs.com

现在，需要解决一个非常普遍的需求，在bars（header）中加入一个LOGO，并且可以让这个LOGO跳转到页面，一般来说是主页。

解决方案

这个问题并不难解决，难的是具体的布局。在传统的html与css里，这个功能可以通过简单的<ul><li>标签实现，但是在Vuetify里绕了一点弯路。

首先，既然我们选择app-bar替代header，那么我们需要一些基础的设置：

<template>
  <v-app>
    <v-app-bar color="#ffffff" elevation="18" app>
    </v-app-bar>
  </v-app>

这里需要注意的一点是，一定要指明app属性，否则会出现很多问题。

至于为什么会出现这么多问题，我还不清楚，我也不太想搞清楚。

效果如图，其中elevation被翻译成海拔，实际指的是阴影的深度和面积，类似Photoshop中图层阴影效果的距离和扩散还有不透明度。

但是翻译成海拔是认真的吗？我真的觉得elevation翻译成距离都比海拔更具体。

接下来要插入LOGO。在这里有一个特殊情况，就是我的LOGO比较长，而一般的LOGO都是正方形或者一个短矩形，所以接下来一些问题也具有特异性。

我们使用<v-img>标签插入LOGO。这是Vuetify中的一个组件，用于替代img。

需要注意一点，在这里不能使用<v-app-bar>的src属性，src使用的是背景图。

意料之中，但是如何处理这个不受约束的v-img呢？我面对StackOverflow编程得出了答案：

How to add logo to AppBar in Vuetify?​stackoverflow.com

其中：

You can add a v-img component like this:

<v-app-bar color="light-blue lighten-3" app>

  <v-img
    class="mx-2"
    src="https://i.imgur.com/qgGY4tB.png"
    max-height="40"
    max-width="40"
    contain
  ></v-img>

  <v-toolbar-title class="ml-2">
    Page title
  </v-toolbar-title>

</v-app-bar>

It's important to set a max-height and max-width, otherwise the image will overflow the nav vertically and push over the title horizontally. And also set contain to preserve the aspect ratio

大概意思就是说一定要定义max属性防止图像溢出，同时使用contain属性防止图片被裁切。

而同时为了固定LOGO位置，我依据API文档使用position属性：

<template>
  <v-app>
    <v-app-bar color="#ffffff" elevation="18" app>
      <v-img
        alt="LIKEDREAMWALKER"
        src="./assets/LDW_2020_Web.png"
        max-height="5vh"
        max-width="40vw"
        position="center left"
        contain
      ></v-img>
    </v-app-bar>
  </v-app>
</template>

这样也就完美解决了这个问题。

而在多终端的适配上，由于我的LOGO比较长，出现了一些小问题，尤其是在屏幕宽度较窄的情况下。我的解决方案就是尽可能的增大max-width属性的值，但是这不是一个完美的解决方案。

至于其他的解决方案其实还有很多，例如完全使用原始的img和布局方案，这一点也有人做出了回答：

Yon can juste use the <img> balise from native html to set your logo.
Then you can resize them with width or height property.

超链接

超链接是我目前还没有很好解决的问题。

在我没有使用框架开发的时候，我一般会使用<img>和<a>标签嵌套，同时重定义<a>的样式，效果非常好。

<template>
  <v-app>
    <v-app-bar color="#ffffff" elevation="18" app>
      <a href="https://cn.bing.com">
        <v-img
          alt="LIKEDREAMWALKER"
          src="./assets/LDW_2020_Web.png"
          max-height="5vh"
          max-width="40vw"
          position="center left"
          contain
        ></v-img>
      </a>
    </v-app-bar>
  </v-app>
</template>

不过这个方法有一个小问题，就是我无法很好的控制实际的<v-img>标签尺寸，所以超链接区域实际上是非常大的，这很容易造成误操作。但是如果你是使用了一个相对固定的LOGO，例如一个正方形，就基本不会出现这个问题。

综上，可能解决问题的最好方法就是消灭问题吧，换一个LOGO就完全没有这么多问题了。