Vue簡單PC導航滑鼠懸浮展示子選單

阿新 • • 發佈：2020-12-10

技術標籤：PC端

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"
    /> 

    <!-- 引入 Vue 和 Vant 的 JS 檔案 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
    <script src="https://sucai.suoluomei.cn/sucai_zs/file/20201202101625-typescript.js" 
></script>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .label {
      display: flex;
      flex-direction 
: row;
    }
    .mouse {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 1px solid #fff;
    }
    .sort:last-child {
      border-right: unset;
    }
    .title {
      padding: 10px;
      box-sizing: border-box;
      background-color: red;
      color: #fff;
    }
    .title:hover {
      color: #fff;
      background-color: blue;
    }
    .hoverShow {
      display: flex;
      flex-direction: column;
    }
    .hoverShow div {
      padding: 10px;
      box-sizing: border-box;
      background-color: #aaa;
      color: #fff;
    }
    .hoverShow div:hover {
      background-color: #000;
      color: #ffff;
    }
  </style>
  <body>
    <div id="Vue">
      <div class="label">
        <div
          v-for="(item,index) in list"
          :key="index"
          v-on:mouseover="showToggle(index)"
          v-on:mouseout="handleHide"
          :class="['sort','mouse']"
        >
          <div class="title">{{item.title}}</div>
          <block v-show="index === isShow">
            <div v-for="(item1,idx) in item.list" :key="idx" class="hoverShow">
              <div v-on:click="handleHide" @click="dianji(item1)">
                {{item1}}
              </div>
            </div>
          </block>
        </div>
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#Vue",
      data: {
        list: [
          {
            title: "導航選單1",
            list: ["1", "2", "3"],
          },
          {
            title: "導航選單2",
            list: ["2", "2", "3"],
          },
          {
            title: "導航選單3",
            list: ["3", "2", "3"],
          },
          {
            title: "導航選單4",
            list: ["4", "2", "3"],
          },
        ],
        isShow: -1,
      },
      methods: {
        showToggle(index) {
          this.isShow = index;
        },
        handleHide() {
          this.isShow = !this.isShow;
        },
        dianji(e) {
          console.log(e);
        },
      },
      created() {

      },
    });
  </script>
</html>

Vue簡單PC導航滑鼠懸浮展示子選單

技術標籤：PC端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

Vue實現PC端靠邊懸浮球的程式碼

我想把退出登入的按鈕做成一個懸浮球的樣子，帶動畫的那種。實現是這個樣子：

css滑鼠懸浮展示更多

vue中自定義tab欄以及子選單的增刪改查

技術標籤：筆記vuejscss <template> <Layout> <Header style="margin-top:calc(-2.3vw);height:calc(6vw);width:100%;background-color:white;margin: 0px;

vue與ElementUI專案建立二之簡單的導航元件運用

1、建立導航頁元件我們在src目錄下新建一個資料夾，名為components，今後我們的元件都會放在這個資料夾中。在components目錄下新建一個Navi目錄，在Nav目錄中新建一個名為Nav.vue的元件。至此我們的目錄應該是如下圖

vue實現三級導航展示和隱藏

本文例項為大家分享了實現三級導航展示和隱藏的具體程式碼，供大家參考，具體內容如下

vue滑鼠懸浮圖片處理

<el-popover placement=\"right\" title=\"\" trigger=\"hover\"> <el-image fit=\"cover\" class=\"leftpic\"

vue簡單封裝axios外掛和介面的統一管理操作示例

本文例項講述了vue簡單封裝axios外掛和介面的統一管理操作。分享給大家供大家參考，具體如下：

Vue簡單封裝axios之解決post請求後端接收不到引數問題

1.在src/下新建api資料夾，api/下新建index.js和public.js 在public.js中： import axios from \'axios\';

vue 路由守衛(導航守衛)及其具體使用

最近在學習vue，感覺路由守衛這個地方知識點挺多的，而且很重要，所以，今天新增一點小筆記

Vue簡單實現原理詳解

本文例項講述了Vue實現原理。分享給大家供大家參考，具體如下：用了Vue也有兩年時間了，一直以來都是隻知其然，不知其所以然，為了能更好的使用Vue不被Vue所奴役，學習一下Vue底層的基本原理。

vue利用全域性導航守衛作登入後跳轉到未登入前指定頁面的例項程式碼

有這樣一個場景：如果你在登入之前輸入了http://localhost:8080/oauth2-mgm-app/#/userManage，想進入userManage頁面，但是由於沒有登入，系統是不會讓你進入這個頁面，之後會被定向到login頁面。但是在登入之後，認

win10電腦滑鼠靈敏度怎麼調？簡單調整win10滑鼠靈敏度的方法

如果滑鼠使用時間長了出現反應遲鈍等情況，可以通過調節靈敏度來解決問題，那麼win10電腦滑鼠靈敏度怎麼調？找了很久都找不到方法，其實設定win10電腦滑鼠靈敏度的方法很簡單，大家一起看下文詳細教程攻略。

element表格滑鼠懸浮上帶有點選事件的變紅-:row-class-name

element表格滑鼠懸浮上帶有點選事件的變紅如圖所示只需要在el-table標籤上加一個:row-class-name

echarts 使用formatter 修改滑鼠懸浮事件資訊操作

formatter 一般用於格式化滑鼠懸浮時間的資訊，如果你的資料是JSON陣列格式，那麼不必和我這樣一一判斷扇形圖的 ticket 值，使用 formatter 的 callback 時間即可自行對應

JS實現簡單移動端滑鼠拖拽

本文例項為大家分享了JS實現移動端滑鼠拖拽的具體程式碼，供大家參考，具體內容如下

vue 實現超長文字擷取,懸浮框提示

vue 超長文字擷取，懸浮框提示樣式： <style> .overflow-table .ivu-table-cell{ overflow: hidden;

vue實現PC端解析度適配操作

依賴專案基礎配置使用 vue-cli 生成自適應方案核心：阿里可伸縮佈局方案 lib-flexible

vue-router路由導航

安裝路由 npm install vue-router 路由導航守衛 // to ：是要去的哪個頁面路由相關的引數 (表示將要訪問的那個路由物件)

VUE使用el-table展開行載入子節點table聯動勾選《VUE專欄四》

Vue專案中使用el-table聯動勾選，要求選中父節點，子節點table全選，選中所有子節點，對應的父節點勾選框選中，勾選全部父節點，子節點全部選中，效果如下圖

Vue簡單PC導航滑鼠懸浮展示子選單

相關推薦