下拉選單內容 Dropdown Menu


下拉選單需要的東西:

  • 按鈕 trigger button
  • 填充內容 dropdown context
    以上是 dropdoen menu template 要製作的 slot

trigger button:

  • isOpen 判斷是否開啟選單
    //trigger btn
    <div class="dropdown-trigger"
         @click.prevent="isOpen = ! isOpen"
    >

    //切換顯示/隱藏內容 toggle context
    <ul v-show="isOpen"
        class="dropdown-menu absolute bg-black mt-2 py-2 rounded shadow text-white z-10"
        :class="classes"
    >
        //menu context
    </ul>
    data() {
        return {
            isOpen: false
        };
    },







你可能感興趣的文章

API 留言板練習-Part 3 : 增加[載入更多]功能

API 留言板練習-Part 3 : 增加[載入更多]功能

Blank line in trello card

Blank line in trello card

[23] 強制轉型 - 明確的強制轉型、Strings <> Numbers、日期轉 Number、位元運算子

[23] 強制轉型 - 明確的強制轉型、Strings <> Numbers、日期轉 Number、位元運算子






留言討論