文章分类 -  frontend / 工作里遇到的收集和展示

自定义select
摘要：很2b但是也是有知识点的 <template> <div class="custom-select-container" @click="toggleDropdown" ref="container"> <input type="text" class="custom-select-input" r 阅读全文
posted @ 2024-06-25 14:36 茫茫人间刺骨凉 阅读(20) 评论(0) 推荐(0)
关于在js里定义变量，然后在css里取用
摘要：.kanban_statusBar { height: calc(var(--maxStatusDescHeight) + 45px) ; } // vue的methods里 // 动态设置 kanban_statusBar 与 kanban_order 的间距 setStatusBarHeight 阅读全文
posted @ 2024-06-20 09:25 茫茫人间刺骨凉 阅读(18) 评论(0) 推荐(0)
让蒙层可以穿透点击
摘要：你说得对，我之前的示例没有正确实现点击穿透效果。让我们调整代码以确保正确实现点击穿透效果。 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width 阅读全文
posted @ 2024-06-17 14:39 茫茫人间刺骨凉 阅读(37) 评论(0) 推荐(0)
怎么在vue外创建响应式变量
摘要：在Vue.js应用中，通常会在组件内使用响应式变量。然而，如果你想在Vue组件之外创建响应式变量，可以利用Vue 3提供的 reactive 和 ref 函数来实现这一点。下面是如何在Vue 3应用中实现这一需求的步骤： 1. 安装 Vue 3 确保你已经安装了Vue 3。如果还没有，可以使用以下命 阅读全文
posted @ 2024-06-11 09:55 茫茫人间刺骨凉 阅读(67) 评论(0) 推荐(0)
骨架屏demo
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Skeleton 阅读全文
posted @ 2024-06-04 12:51 茫茫人间刺骨凉 阅读(21) 评论(0) 推荐(0)
前端轮询
摘要：在 Vue 中实现轮询（polling）可以使用 setInterval 方法。在 Vue 组件中，你可以在 mounted 钩子中启动轮询，并在 beforeDestroy 钩子中清理轮询定时器，以防止内存泄漏。 下面是一个在 Vue 组件中实现轮询的示例： 创建一个 Vue 组件，在该组件中实现 阅读全文
posted @ 2024-06-04 09:57 茫茫人间刺骨凉 阅读(52) 评论(0) 推荐(0)
引入第三方库，和vue的数据兼容问题
摘要：有问题 第三个方案好像可以 我有一个需求：我现在使用的是vue3，我引入了三方库，但是三方库的资源加载需要时间，我想在第三方库的加载以后，再vue里执行一个方法，我怎么写？ 第三方库的加载是写在vue实例前面的 1.1 在 Vue 3 中，您可以通过监听第三方库的加载完成事件，然后在 Vue 实例中 阅读全文
posted @ 2024-06-04 09:08 茫茫人间刺骨凉 阅读(65) 评论(0) 推荐(0)
关于滚动条和居中布局中含左侧固定导航栏
摘要：居中布局： 需求： 点击左侧nav，右侧内容切换显示，且 1.整体居中 2.nav不跳 <template> <div class="outer"> <div class="inner"> <div class="left"> <div v-for="item in 3" :key="item" @ 阅读全文
posted @ 2024-05-31 13:24 茫茫人间刺骨凉 阅读(31) 评论(0) 推荐(0)
bugs
摘要：new URL new URLSearchParams(window.location.search).get("orderNo") // √ new URLSearchParams(window.location.href).get("orderNo") // × 在回显的时候 修改了数据类型 在 阅读全文
posted @ 2024-05-25 15:32 茫茫人间刺骨凉 阅读(44) 评论(0) 推荐(0)
下载pdf
摘要：下载pdf 以下是一个通用的下载 PDF 文件的示例 async function downloadPDF(url, orderNo, headers, downloadFileName, downloadElementRef) { try { const response = await axio 阅读全文
posted @ 2024-05-20 17:44 茫茫人间刺骨凉 阅读(43) 评论(0) 推荐(0)
utils function
摘要：传入url，返回查询参数 1 当然可以。你可以使用 `split()` 方法来根据 `?` 进行分割，然后再对查询参数部分进行处理。 以下是一个示例函数，它接受一个完整的 URL 地址作为参数，并返回指定查询参数的值： ```javascript function getQueryParamValu 阅读全文
posted @ 2024-05-16 08:44 茫茫人间刺骨凉 阅读(25) 评论(0) 推荐(0)
&& ||
摘要：在js的三元表达式还有对象里有这样一个现象 pass <div :class="fieldsRequired.emptyEmail?'reminderFalse':'reminderTrue'">邮箱不可为空</div> <div :class="(!fieldsRequired.emptyEmai 阅读全文
posted @ 2024-05-09 10:36 茫茫人间刺骨凉 阅读(31) 评论(0) 推荐(0)
手写一个日历
摘要：<template> <div> <!-- 输入框和日历图标 --> <input type="text" v-model="selectedDate" @focus="showCalendar" readonly> <span @click="showCalendar">📅</span> <!- 阅读全文
posted @ 2024-05-09 09:45 茫茫人间刺骨凉 阅读(26) 评论(0) 推荐(0)
手写一个warningPopUp 带动画
摘要：手写一个warningPopUp 带动画 <template> <div v-if="showError" :class="{ 'error-popup': true, 'leave': hideError }"> <img alt="Error Image" className="error-im 阅读全文
posted @ 2024-05-09 09:44 茫茫人间刺骨凉 阅读(28) 评论(0) 推荐(0)
手写一个校验码和验证框
摘要：手写一个校验码和校验框 <template> <div> <canvas ref="captchaCanvas" :width="canvasWidth" :height="canvasHeight" @click="refreshCaptcha"></canvas> <input type="te 阅读全文
posted @ 2024-05-09 09:42 茫茫人间刺骨凉 阅读(23) 评论(0) 推荐(0)
textarea Limit
摘要：原生方式限制input长度 <!--切记 面向对象，添加或者怎样--> <template> <div> <textarea v-model="message" @input="limitText"></textarea> <p>输入的文本：{{ message }}</p> </div> </te 阅读全文
posted @ 2024-05-09 09:27 茫茫人间刺骨凉 阅读(19) 评论(0) 推荐(0)
vue里手动实现校验
摘要：需求1 有这样一个需求，是表格校验，有firstName，email，confirmEmail三个input，提示文字在每个的input的下面 1.我要在点击按钮以后开始校验； 2.同时输入符合规则的时候，提示文字消失 res： html部分： <div class="accountCard_for 阅读全文
posted @ 2024-05-09 09:21 茫茫人间刺骨凉 阅读(147) 评论(0) 推荐(0)
画一个对号
摘要：<template> <div class="circle"></div> </template> <script> export default { name: "duihao" } </script> <style scoped> .circle { width: 20px; height: 2 阅读全文
posted @ 2024-05-06 13:36 茫茫人间刺骨凉 阅读(23) 评论(0) 推荐(0)
修改input 元素默认样式
摘要：修改select 图标位置 html <select name="" id=""> <option value="">1</option> </select> css select { padding-right: 30px; background-image: url("./pullDownIco 阅读全文
posted @ 2024-04-30 08:58 茫茫人间刺骨凉 阅读(41) 评论(0) 推荐(0)