家好,今天给大家分享一篇阅读的文章,本篇文章主要讲了 12 个 HTML 标签(组件),通过这些标签避免你在项目中集成复杂第三方组件,比如日历组件、颜色选择、进度条等...,简单的标签就能很方便的调用系统组件。
在项目中,你可能希望通过调色板组件动态调整颜色,这时你可以使用 <input type="color"> 就可以轻松调用一个调色板组件,省去你在找第三方组件,示例效果如下:
示例地址:https://codepen.io/madarsbiss/pen/vYJBqeX
在文章排版时,有时候我们需要引用一些信息,这时我们需要用特殊的样式进行强调,这时你可以使用<blockquote> 标签来强调你用的内容,示例效果如下所示
示例地址:https://codepen.io/madarsbiss/pen/JjyPQBd
如果从头写个音频播放器是一个费时费力又有挑战性的工作,但是你现在可以使用<audio>标签就能很轻松的调用。系统的音频播放器,示例效果如下所示:
示例地址:https://codepen.io/madarsbiss/pen/oNevrEb
我们不仅能很方便的调用系统的音频组件,我们还可以使用<video> 标签调用视频组件,示例效果如下所示:
示例地址:https://codepen.io/madarsbiss/pen/BadBgxJ
折叠列表的需求也是比较常见的,点击标题展开对应的信息内容,这时 <details> 标签就派上用场了,示例效果如下所示:
gif
项目地址:https://codepen.io/madarsbiss/pen/zYdOVPV
日期选择组件可以说是项目中必备的组件,想必大家都有自己比较常用的日期组件,如果没有复杂的样式和交互需求,使用<input type="date"> 这个标签就能轻松的胜任,示例效果如下所示:
示例地址:https://codepen.io/madarsbiss/pen/qBXWzXE
滑块组件也是一个比较常见的组件,主要应用在数值范围的筛选上,方便用户进行选择,这时我们可以使用 <input type="range"> ,我们可以设置最小值、最大值以及当前值,示例效果如下所示:
示例地址:https://codepen.io/madarsbiss/pen/GRvKbXv
为了让内容具有编辑性,你可以不必使用表单组件,比如 input、textarea 标签,你可以在可编辑的容器(div) 上添加 contenteditable 属性,就能很轻松的完成当前容器及所见即所得的编辑,示例如下所示:
示例地址:https://codepen.io/madarsbiss/pen/ExvYBwB
有时候需要在不同的分辨率下显示不同的图片,如果你使用<img> 标签的话,你需要做的工作就会许多,但是使用<picture> 标签就能很轻松的完成在不同分辨率下显示不同图片的设置,调整浏览器的大小,就会根据窗口的大小显示不同大小的图片,示例效果如下所示:
示例地址:https://codepen.io/madarsbiss/pen/abybomY
十、进度条(Progress Bar)
进度条组件也是个很常见的组件,你可以使用<progress> 标签就能轻松完成相关外观的设置,示例效果如下:
示例地址:https://codepen.io/madarsbiss/pen/oNevKdp
如果下拉组件选项比较多,用户选择就会比较困难,用户可能希望结合输入,能很方便的定位到下拉组件的内容,这时候你可以使用 <datalist> 标签就能满足上述需求,示例效果如下所示:
示例地址:https://codepen.io/madarsbiss/pen/eYEOwdQ
如果你需要对页面某部分进行详细介绍时,你可能需要鼠标经过此区域显示详细的提示框效果,这时我们可以使用 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 是浏览器提供的一个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的数据响应性相结合,我们可以利用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中的图片放大缩小功能,我们可以通过以下步骤:
假设我们的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,隐藏放大后的图片并恢复到原始状态。
通过上述代码示例,我们成功地在Element UI中实现了图片的放大缩小功能。这个功能不仅增强了用户的视觉体验,也提高了应用的性能和资源利用效率。在实际项目中,你可以根据具体需求调整代码细节,比如添加动画效果、支持多级缩放等,以满足更复杂的应用场景。
#头条创作挑战赛#
*请认真填写需求信息,我们会在24小时内与您取得联系。