5.记录Vue项目定义滚动条样式及菜单栏鼠标停放文字提示

1.系统默认的滚动条不太好看，就改了下样式通过CSS，搭配主题简介

/* 自定义滚动条 */

::-webkit-scrollbar {
    width: 5px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

2.鼠标停放菜单栏文字提示，效果如下图

        <Menu
          ref="side_menu"
          :active-name="$route.name"
          :open-names="openNames"
          theme="light"
          width="auto"
          :class="menuitemClasses"
        >
        <div class="left_icon">
          <Icon style="font-size:30px !important" type="logo-freebsd-devil" />
          <span>后台管理系统</span>
        </div>
          <div v-for="(item,index) in menu" :key="index">
            <Submenu v-if="item.children" :name="item.title">
              <template slot="title">
                <Tooltip placement="right" :content="item.title" theme="light">
                <Icon :type="item.icon" />
                <span>{{item.title}}</span>
                </Tooltip>
              </template>
              <MenuItem
                v-for="(obj,i) in item.children"
                :key="i"
                :name="obj.name"
                @click.native="$router.push({name:obj.name})"
              >
                <Tooltip placement="right" :content="obj.title" theme="light">
                  <Icon :type="obj.icon" />
                  <span>{{obj.title}}</span>
                </Tooltip>
              </MenuItem>
            </Submenu>
            <MenuItem v-else :name="item.name" @click.native="$router.push({name:item.name})">
              <Tooltip placement="right" :content="item.title" theme="light">
                <Icon :type="item.icon" />
                <span>{{item.title}}</span>
              </Tooltip>
            </MenuItem>
          </div>
        </Menu>