div 基礎二級選單 - daniel-qa/Vue GitHub Wiki

div 基礎二級選單

1 . 元件結構

el-row：外層使用了 Element Plus 的 el-row 作為行容器。

el-col：將頁面劃分成三個等寬的列（每列 span=8）。

Column 1 與 Column 2：

使用 v-for 迭代顯示列表內容。

點擊每個列表項目時，觸發對應的方法，記錄當前的索引並更改 activeIndex 和 activeIndex2。

Column 3：目前是空白，尚未添加邏輯或功能。

2 .邏輯狀態管理

items 和 items2：分別定義兩個列表數據。

activeIndex 和 activeIndex2：使用 ref 定義兩個變數來儲存當前選中的索引。

預設值是 null，表示初始沒有選中任何項目。

setActive(index) 和 setActive2(index)：

當點擊列表中的某個項目時，更新對應的 activeIndex 或 activeIndex2，以此來控制選中狀態。

3 .選中項目的樣式變化

  • 使用動態 :class 綁定：
:class="{'active': activeIndex === index}"

判斷當前 index 是否等於 activeIndex，若相等則應用 active 樣式。

  • list-item.active 樣式定義：
.list-item.active {
  background-color: #409eff;
  color: white;
}

改變背景顏色和文字顏色，達到高亮效果。

hover 效果：

.list-item:hover {
  background-color: #f0f0f0;
}

4 .滑鼠懸停時，項目背景顏色改變。

  • 功能重點

獨立狀態管理：Column 1 和 Column 2 分別有獨立的狀態變數（activeIndex 和 activeIndex2）。

可擴展性：可以輕鬆地將更多邏輯添加到第三列（Column 3）中，或者新增其他功能。

可復用性：此邏輯和樣式可以重用於多個類似列表元件，只需傳入不同數據即可。

<template>

    <div> Index : {{activeIndex}} </div>
    <div> Index2 : {{activeIndex2}} </div>

    <el-row style="background-color: #FFFFFF;">
        <el-col :span="8">
            Column 1

            <div class="list">
                <div v-for="(item, index) in items"
                     :key="index"
                     :class="{'active': activeIndex === index}"
                     class="list-item"
                     @click="setActive(index)">
                    {{ item }}
                </div>
            </div>

        </el-col>

        <el-col :span="8">
            Column 2

            <div class="list">
                <div v-for="(item, index) in items2"
                     :key="index"
                     :class="{'active': activeIndex2 === index}"
                     class="list-item"
                     @click="setActive2(index)">
                    {{ item }}
                </div>
            </div>

        </el-col>

        <el-col :span="8">Column 3</el-col>
    </el-row>

</template>

<script setup>
import { ref } from 'vue';

const items = ref(['項目一', '項目二', '項目三', '項目四']);
const items2 = ref(['項目A', '項目B', '項目C', '項目D']);
const activeIndex = ref(null);
const activeIndex2 = ref(null);

const setActive = (index) => {
    activeIndex.value = index;
};

const setActive2 = (index) => {
    activeIndex2.value = index;
};
</script>

<style scoped>
.list {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.list-item {
  height: 50px; /* 調整每個項目的高度 */
  line-height: 50px; /* 讓文字垂直居中 */
  padding: 0 10px; /* 調整水平內邊距 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.list-item:hover {
  background-color: #f0f0f0;
}

.list-item.active {
  background-color: #409eff;
  color: white;
}
</style>
⚠️ **GitHub.com Fallback** ⚠️