等比例缩放图片组件
今天遇到一个需求，设计需要我无论什么情况都要保持图片比例不变，于是顺手写了个这个组件，组件基于vue3+ts，其实核心代码就是那几句css<template> <div style="position: relative" :style="ratioStr"> <div style="posit
写一套拟物风格的UI组件
准备写一套拟物风格的UI组件，先发篇文章后续慢慢补充吧😎大概以后会长这样：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=&
网页文件加载失败如何重试（一）
本文主要讲解脚本文件加载失败时的处理背景在我们开发网站应用时，我们可能会遇到脚本加载失败的情况，导致脚本加载失败的原因有很多，比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。解决方案在 JavaScript 中，我们可以创建一个监听来监听脚本加载失败的情况，然后针对加载失败的脚本进行重新加载。重新加载的方案，一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表，用来在加载失败时匹
一个简单的数字滚动特效
直接贴代码食用Tips：此代码会读取将页面中所有带counter类名的元素，使用时设置 data-start(起始值) 和 data-end(结束值) 两个自定义属性值即可<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />
下拉菜单点击展开点击其他地方关闭
<style> /* 下拉菜单按钮样式 */ .dropbtn { background-color: #ffffff; color: #333333; padding: 10px; font-size: 16px; border: none; cursor: pointer; } /* 下拉菜单容器样式（隐藏） */
前端项目中的拖拽排序实现
在前端项目中，拖拽排序是一个常见的需求。本文将详细讲解如何实现拖拽排序。实现步骤首先，需要给每个可拖拽的元素添加一个 draggable 属性，值为 true，表示该元素可以被拖拽。接着，需要监听每个可拖拽元素的 dragstart 事件，该事件在拖拽开始时触发。在该事件的回调函数中，需要设置拖拽数据，可以使用 event.dataTransfer.setData() 方法。然后，需要监听每个可拖
今天吃什么？
解决今天吃什么的问题，可以自己添加食物可也以用现成的使用到的技术：vue2 + element-ui<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
js点击显示，点击其他地方关闭
话不多说直接上代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
解决苹果手机底部安全区问题
html部分<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />css 代码padding-bottom: constant(safe-area
vscode无标签提示解决办法
1.打开设置2.切换源码视图3.添入以下代码"files.associations": { "*.vue": "html" },4.OK