手工訂製

• div 模擬選單

• div 基礎二級選單

• div 聯級二級選單

• div 選單關連模糊搜尋選單

• div 聯級二級選單，加入接收清單

---

• 避免樣式污染

• 高度的設計技巧

• 邊距設定

• 標題設定

---

div 多層的 style 寬度設定

 <div :style="{
         minWidth: node.level === 2 ? '300px' : '200px',
         maxWidth: node.level === 2 ? '500px' : '300px',
         minHeight: node.level === 2 ? '150px' : 'auto', // 第二层设置最小高度
         maxHeight: node.level === 2 ? '300px' : 'auto', // 第二层设置最大高度
         overflow: node.level === 2 ? 'auto' : 'visible', // 第二层内容超出时滚动
       }">

---

• 模糊搜尋 Bar

• Cascader + 模糊搜尋 Bar

• 用 div + v-for 顯示資料

• ransform 或 margin

---

CSS Flexbox

• margin-left: auto

  在 Flex 容器中，margin-left: auto; 常用于将元素推到容器的右边，起到弹性分布的作用。

• justify-content:

  space-between 是 CSS Flexbox 的屬性，用於定義子元素在父容器內的水平方向排列方式，元件會平均分配所佔用的空間

  第一個子元素靠左對齊，最後一個子元素靠右對齊。其餘子元素平均分布，且子元素之間的間距相等。

---

• Container 常用的設定

.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

• flex 的常用設定

.msgbox {
    width: 100%;          /* 容器宽度为父容器的 100% */
    padding: 1%;          /* 内部有 1% 的填充，给内容留出边距 */
    display: flex;        /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素按列方向（纵向）排列 */
    flex: 0 0 auto;       /* 子元素不伸缩，保持其内容的原始尺寸 */
    line-height: 20px;    /* 文本行高设置为 20px */
}

flex-direction: column;

改變排列方向:上到下

解释：该属性设置 Flexbox 的子项排列方向为 纵向（列方向），即从上到下。 常见用途：默认情况下，Flexbox 会将子元素按水平方向排列（row）。但是设置为 column 后，子元素会从上到下垂直排列。这个设置在构建竖向布局时非常常用。

flex: 0 0 auto;

解释：这是 flex 属性的简写，它实际上由三个值组成：flex-grow、flex-shrink 和 flex-basis。

flex-grow: 0：指定子元素在父容器中如果有剩余空间时，不扩展其大小。即子元素不会根据容器的大小自动放大。

flex-shrink: 0：指定子元素如果容器空间不足时，不缩小。也就是说，子元素的尺寸会保持不变。

flex-basis: auto：该属性指定子元素的初始大小。auto 表示子元素的大小将基于其内容的大小，或者基于任何指定的 width 或 height。

常见用途：flex: 0 0 auto; 通常用于使子元素根据其内容自然占据空间，并且不会因父容器的大小变化而伸缩。

line-height: 20px;

解释：该属性控制元素内行间距的大小，即文本行与行之间的垂直间距。此设置将行高设置为 20 像素。 常见用途：适用于文本容器，尤其是在文本内容较多时，通过调整行高来增加或减少行间的空隙，从而使文本的阅读体验更好。