這 12 個實用的 HTML標簽（組件）建議盡早用上

家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標簽（組件），通過這些標簽避免你在項目中集成復雜第三方組件，比如日歷組件、顏色選擇、進度條等...，簡單的標簽就能很方便的調用系統組件。

一、顏色選擇組件（Color Picker）

在項目中，你可能希望通過調色板組件動態調整顏色，這時你可以使用 <input type="color"> 就可以輕松調用一個調色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標簽（Blockquote）

在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進行強調，這時你可以使用<blockquote> 標簽來強調你用的內容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個音頻播放器是一個費時費力又有挑戰性的工作，但是你現在可以使用<audio>標簽就能很輕松的調用。系統的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調用系統的音頻組件，我們還可以使用<video> 標簽調用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點擊標題展開對應的信息內容，這時 <details> 標簽就派上用場了，示例效果如下所示：

gif

項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復雜的樣式和交互需求，使用<input type="date"> 這個標簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個比較常見的組件，主要應用在數值范圍的篩選上，方便用戶進行選擇，這時我們可以使用 <input type="range"> ，我們可以設置最小值、最大值以及當前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內容編輯（Content Editor）

為了讓內容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標簽（Picture Tag）

有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標簽的話，你需要做的工作就會許多，但是使用<picture> 標簽就能很輕松的完成在不同分辨率下顯示不同圖片的設置，調整瀏覽器的大小，就會根據窗口的大小顯示不同大小的圖片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、進度條（Progress Bar）

進度條組件也是個很常見的組件，你可以使用<progress> 標簽就能輕松完成相關外觀的設置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結合輸入，能很方便的定位到下拉組件的內容，這時候你可以使用 <datalist> 標簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對頁面某部分進行詳細介紹時，你可能需要鼠標經過此區域顯示詳細的提示框效果，這時我們可以使用 title 屬性就能輕松實現，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結束語

今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標簽（組件），感謝你的閱讀。

參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

言

在Web開發中，尤其是在響應式布局設計時，我們常常需要根據HTML元素的尺寸變化來調整頁面布局或內容展示。Vue3 提供了強大的響應式機制和Composition API，使得我們可以更靈活地監聽并處理DOM元素尺寸的變化。本文將詳細介紹如何在Vue3項目中實現這一功能。

一、傳統方法：ResizeObserver

ResizeObserver 是瀏覽器提供的一個API，用于觀察目標元素尺寸變化事件，并在其尺寸發生變化時觸發回調函數。首先引入 ResizeObserver 并創建一個觀察者實例：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null); // 存儲需要監聽的DOM元素引用

    let resizeObserver;
    
    // 當組件掛載時創建ResizeObserver實例并開始監聽
    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          console.log('Element size changed:', entry.contentRect.width, entry.contentRect.height);
          // 在這里執行相應的邏輯處理
        });
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    // 組件卸載時停止監聽
    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    return {
      targetElement,
    };
  },
};

在模板中，綁定目標元素到 targetElement ref：

<div ref="targetElement">需要監聽大小變化的元素</div>

二、結合Vue3的響應式優勢

為了更好地與Vue3的數據響應性相結合，我們可以利用Ref或者Computed屬性來存儲和更新元素尺寸信息：

import { ref, computed, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null);
    const elementSize = ref({ width: 0, height: 0 });

    let resizeObserver;

    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        const entry = entries[0];
        elementSize.value = {
          width: entry.contentRect.width,
          height: entry.contentRect.height,
        };
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    // 創建一個計算屬性以返回最新尺寸信息
    const reactiveElementSize = computed(() => elementSize.value);

    return {
      targetElement,
      reactiveElementSize,
    };
  },
};

現在你可以在其他組件內部使用 reactiveElementSize 計算屬性來獲取實時的元素尺寸數據，并據此做出相應布局調整。

在上述代碼示例中，elementSize 用于存儲元素的尺寸信息（寬度和高度），我們使用了 ref 來定義它。然而，如果你希望 elementSize 對象本身具有響應性，即當對象內部的屬性發生變化時也能觸發視圖更新，那么使用 reactive 可能會更合適。

import { ref, reactive, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null);
    // 使用reactive創建響應式對象
    const elementSize = reactive({ width: 0, height: 0 });

    let resizeObserver;

    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        const entry = entries[0];
        // 直接修改響應式對象內部屬性
        elementSize.width = entry.contentRect.width;
        elementSize.height = entry.contentRect.height;
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    return {
      targetElement,
      elementSize,
    };
  },
};

在這種情況下，因為 elementSize 是一個由 reactive 創建的響應式對象，所以在其內部屬性 width 和 height 發生變化時，依賴這些值的組件也會自動重新渲染，無需額外的操作。

需要注意的是，在實際應用中，如果只是簡單的尺寸數值，使用 ref 足以滿足需求，因為 ref 的 .value 屬性本身就是響應式的。而 reactive 更適用于需要整個對象結構都具有響應性的場景。

三、總結

Vue3 的 Composition API 結合瀏覽器原生的 ResizeObserver 可以為我們在監聽HTML元素尺寸變化上提供強大而靈活的支持。通過這樣的方式，開發者可以輕松應對各種復雜的響應式布局需求，為用戶帶來更好的交互體驗。同時，借助Vue3的數據響應性和自動更新機制，能夠在元素尺寸變化時及時刷新視圖，保持UI狀態與實際DOM的一致性。

言

在Web應用開發中，圖片的展示和交互體驗至關重要，特別是在電子商務、社交網絡等領域。Element UI作為Vue.js生態中最受歡迎的UI組件庫之一，提供了豐富的組件以滿足不同的需求。雖然Element UI本身沒有專門針對圖片放大的組件，但我們可以結合其提供的基礎組件和一些自定義邏輯，輕松實現圖片的放大縮小功能。本文將詳細介紹如何在Element UI中實現這一功能，并通過代碼示例和源碼解析，幫助你更好地理解和應用。

一、為什么需要圖片放大縮小功能？

在Web應用中，圖片放大縮小功能主要服務于以下幾點：

增強用戶體驗：用戶可以更清晰地查看圖片細節，尤其在商品詳情、地圖、圖表等場景下。
節省帶寬：初始加載時使用較小尺寸的圖片，待用戶需要時再加載高清版本，從而降低頁面加載時間。
適應不同設備：響應式設計中，小屏幕設備顯示小圖，大屏幕顯示大圖，提高資源利用率。

二、實現思路

要實現在Element UI中的圖片放大縮小功能，我們可以通過以下步驟：

使用<el-image>組件展示圖片。
添加點擊事件監聽器，觸發圖片放大效果。
利用CSS或JavaScript控制圖片的尺寸變化。

三、代碼示例

假設我們的Vue組件已經引入了Element UI，并且在模板中使用了<el-image>組件。

HTML模板：

<template>
  <div class="image-container">
    <el-image :src="imageUrl" @click="toggleZoom"></el-image>
    <div v-if="isZoomed" class="zoomed-image">
      <img :src="highResImageUrl" alt="" @click="toggleZoom">
    </div>
  </div>
</template>

Vue腳本：

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/low-res/image.jpg',
      highResImageUrl: 'path/to/high-res/image.jpg',
      isZoomed: false,
    };
  },
  methods: {
    toggleZoom() {
      this.isZoomed = !this.isZoomed;
    },
  },
};
</script>

CSS樣式：

.zoomed-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoomed-image img {
  max-width: 90%;
  max-height: 90%;
}

四、源碼解析

在上述示例中，我們使用Vue.js的響應式屬性isZoomed來控制是否顯示放大后的圖片。當用戶點擊默認尺寸的圖片時，toggleZoom方法被調用，切換isZoomed的狀態。如果isZoomed為真，則顯示一個覆蓋整個屏幕的背景層，并在其中心位置展示高分辨率的圖片。點擊放大后的圖片再次觸發toggleZoom，隱藏放大后的圖片并恢復到原始狀態。

五、優化建議

懶加載：使用懶加載技術加載高分辨率圖片，避免不必要的資源消耗。
圖片格式優化：使用WebP等現代圖片格式，減小文件大小而不犧牲畫質。
響應式設計：確保圖片放大縮小功能在不同設備上都能良好運行。

六、總結

通過上述代碼示例，我們成功地在Element UI中實現了圖片的放大縮小功能。這個功能不僅增強了用戶的視覺體驗，也提高了應用的性能和資源利用效率。在實際項目中，你可以根據具體需求調整代碼細節，比如添加動畫效果、支持多級縮放等，以滿足更復雜的應用場景。

#頭條創作挑戰賽#

在線咨詢

上一篇：使用TensorFlow進行語音識別.js – 語音命令
下一篇：css3滾動條樣式及美化方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商