若依修改主页面标题和logo,标题过长时以省略号显示,鼠标放上去提示全部

最终实现效果如下:

 1.修改主页面logo图片

 找到layout->components->Sidebar->Logo.vue

// 把图片路径替换成自己要换的
import logoImg from "@/assets/logo/xxx.png";

 2.修改标题,在标题过长时以省略号显示,鼠标放上去展示全部信息

同一文件下

<!--下面h1标签里绑定的title属性就是实现的鼠标放上去展示全部内容-->
<router-link
        v-else
        key="expand"
        class="sidebar-logo-link"
        :to="indexPage"
      >
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1
          class="sidebar-title"
          :style="{
            color:
              sideTheme === 'theme-dark'
                ? variables.logoTitleColor
                : variables.logoLightTitleColor,
          }"
          :title="title"
        >
          {
   
   { title }}
        </h1>
      </router-link>

& .sidebar-title {
      display: inline-block;
      width: 120px;/*添加宽度属性,这个多少可以自己调*/
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
      white-space: nowrap; /* 设置文字在一行显示，不能换行 */
      overflow: hidden; /* 文字长度超出限定宽度，则隐藏超出的内容 */
      text-overflow: ellipsis; /* 规定当文本溢出时，显示省略符号来代表被修剪的文本 */
    }