整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

这 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应用中,图片放大缩小功能主要服务于以下几点:

  1. 增强用户体验:用户可以更清晰地查看图片细节,尤其在商品详情、地图、图表等场景下。
  2. 节省带宽:初始加载时使用较小尺寸的图片,待用户需要时再加载高清版本,从而降低页面加载时间。
  3. 适应不同设备:响应式设计中,小屏幕设备显示小图,大屏幕显示大图,提高资源利用率。

二、实现思路

要实现在Element UI中的图片放大缩小功能,我们可以通过以下步骤:

  1. 使用<el-image>组件展示图片。
  2. 添加点击事件监听器,触发图片放大效果。
  3. 利用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,隐藏放大后的图片并恢复到原始状态。

五、优化建议

  1. 懒加载:使用懒加载技术加载高分辨率图片,避免不必要的资源消耗。
  2. 图片格式优化:使用WebP等现代图片格式,减小文件大小而不牺牲画质。
  3. 响应式设计:确保图片放大缩小功能在不同设备上都能良好运行。

六、总结

通过上述代码示例,我们成功地在Element UI中实现了图片的放大缩小功能。这个功能不仅增强了用户的视觉体验,也提高了应用的性能和资源利用效率。在实际项目中,你可以根据具体需求调整代码细节,比如添加动画效果、支持多级缩放等,以满足更复杂的应用场景。

#头条创作挑战赛#