vue3+原生javascript 手寫日期時間選擇框 滾動選擇可輸入

需求：

web端 想要跟手機端一樣選擇年月日時分，通過滾動選擇

實現效果圖：

理念：

1.年月日時分 分別為單個輸入框，用來做輸入修改

2.div把輸入框拼接起來，顯示出一個日期框的樣子

3.年月日時分 下拉給默認list數據，

  • 年：給100個選項? ? 20 - 現在年 - 80
  • 月：12個選項
  • 日：根據所選中年月來判斷出多少個日期
  • 時：24
  • 分：60

4.打開日期框時，使用 appendChild(div) 動態插入年月日時分

5.獲取到默認日期，給對應下拉數據?add('active') 加選中class名

6.注意一點：日期格式轉換 月 日 時 分? 小于10補0

7.當輸入修改時，下面的年月日會滾動到修改后的日期上面，輸入框 加 @input 事件

?8.當輸入的值不在下拉列表中 默認第一個月 01，日01，時01，分01

9.添加滾動 事件 handleScroll

10.添加選中事件?handleClick

11.添加打開，關閉（取消/確定） 日期框事件

示例：默認值為當時間 （可使用組件傳參方式給與默認值）

完整代碼：

<template><div class="main-container"><div class="datetime-input" @click="togglePicker(true)"><span class="el-input__prefix"><span class="el-input__prefix-inner"><i class="el-icon el-input__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor"d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path><path fill="currentColor"d="M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32"></path><path fill="currentColor" d="M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32"></path></svg></i></span></span><input class="no" style="min-width: 56px;width: 56px;" type="text" maxlength="4" placeholder="YYYY"v-model="selectedDate.year"@input="updateFromInputFields('year')"/><span class="separator">-</span><input class="no" style="min-width: 28px;width: 28px;" type="text" maxlength="2" placeholder="MM"v-model="selectedDate.month"@input="updateFromInputFields('month')"/><span class="separator">-</span><input class="no" style="min-width: 28px;width: 28px;" type="text" maxlength="2" placeholder="DD"v-model="selectedDate.day"@input="updateFromInputFields('day')"/><span style="width: 3px;"></span><input class="no" style="min-width: 28px;width: 28px;" type="text" maxlength="2" placeholder="HH"v-model="selectedDate.hour"@input="updateFromInputFields('hour')"/><span class="separator">:</span><input class="no" style="min-width: 28px;width: 28px;" type="text" maxlength="2" placeholder="MM"v-model="selectedDate.minute"@input="updateFromInputFields('minute')"/></div><div class="picker-container" ref="pickerContainerRef"><div class="wheel-container"><div class="wheel-group"><div class="wheel-label">年</div><div class="wheel" ref="yearsWheel" @scroll="handleScroll(yearsWheel,'year')" @click="handleClick(yearsWheel)"@wheel="handleWheel(yearsWheel)"></div></div><div class="wheel-group"><div class="wheel-label">月</div><div class="wheel" ref="monthWheel" @scroll="handleScroll(monthWheel,'month')"@click="handleClick(monthWheel)" @wheel="handleWheel(monthWheel)"></div></div><div class="wheel-group"><div class="wheel-label">日</div><div class="wheel" ref="dayWheel" @scroll="handleScroll(dayWheel,'')" @click="handleClick(dayWheel)"@wheel="handleWheel(dayWheel)"></div></div><div class="wheel-group" style="margin-left: 8px;"><div class="wheel-label">時</div><div class="wheel" ref="hourWheel" @scroll="handleScroll(hourWheel,'')" @click="handleClick(hourWheel)"@wheel="handleWheel(hourWheel)"></div></div><div class="wheel-group"><div class="wheel-label">分</div><div class="wheel" ref="minuteWheel" @scroll="handleScroll(minuteWheel,'')" @click="handleClick(minuteWheel)"@wheel="handleWheel(minuteWheel)"></div></div></div><div class="buttons"><button class="now-btn" @click="nowSelection">此刻</button><button class="cancel-btn" @click="cancelSelection">取消</button><button class="confirm-btn" @click="confirmSelection">確定</button></div></div></div>
</template>
<script setup lang="ts" name="index">
import {ref, onMounted, onActivated} from 'vue';const props = defineProps({localDateTimeNow: {type: String,default: ''}
});const emit = defineEmits(['timeUpdateClick']);const selectedDate = ref({day: new Date().getDate(),month: new Date().getMonth() + 1,year: new Date().getFullYear(),hour: new Date().getHours(),minute: new Date().getMinutes(),
});const years = Array.from({length: 100}, (_, i) => new Date().getFullYear() - 20 + i);
const months = Array.from({length: 12}, (_, i) => i + 1);
const hours = Array.from({length: 24}, (_, i) => i);
const minutes = Array.from({length: 60}, (_, i) => i);const yearsWheel = ref(null)
const monthWheel = ref(null)
const dayWheel = ref(null)
const hourWheel = ref(null)
const minuteWheel = ref(null)
const pickerContainerRef = ref(null)
const dayFather = ref(0)
const dayInputNum = ref(0)const getDaysInMonth = (year: number, month: number) => {const days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {days[1] = 29;}return days[month - 1];
};const generateDaysArray = (year: number, month: number) => {const daysInMonth = getDaysInMonth(year, month);return Array.from({length: daysInMonth}, (_, i) => i + 1);
};const initWheel = (wheelElement, data, initialValue, addPlaceholders = false) => {wheelElement.innerHTML = '';data.forEach(item => {const div = document.createElement('div');div.textContent = item < 10 ? '0' + item : item;div.className = 'divItem';div.dataset.value = item.toString();wheelElement.appendChild(div);});if (addPlaceholders) {for (let i = 0; i < 4; i++) {const div = document.createElement('div');div.textContent = '';div.classList.add('placeholder');wheelElement.appendChild(div);}}const itemHeight = 21;const initialIndex = data.indexOf(Number(initialValue));nextTick(() => {wheelElement.scrollTop = initialIndex * itemHeightupdateActiveItem(wheelElement);wheelElement.addEventListener('scroll', () => {updateActiveItem(wheelElement);updateSelectedDate();updateInputFields();});wheelElement.addEventListener('click', (e: MouseEvent) => {if (e.target instanceof HTMLElement && e.target.tagName === 'DIV' && !e.target.classList.contains('placeholder')) {const index = Array.from(wheelElement.children).indexOf(e.target);wheelElement.scrollTop = index * itemHeight;}});wheelElement.addEventListener('wheel', (e: WheelEvent) => {e.preventDefault();const delta = Math.sign(e.deltaY) * 3;const currentScroll = wheelElement.scrollTop;const newScroll = Math.max(0, Math.min(currentScroll + delta * itemHeight, (data.length - 1) * itemHeight));wheelElement.scrollTop = newScroll;});})};const updateActiveItem = (wheelElement: HTMLElement) => {const itemHeight = 21;const selectedIndex = Math.round(wheelElement.scrollTop / itemHeight);const items = wheelElement.querySelectorAll('div');items.forEach(item => item.classList.remove('active'));let activeIndex = selectedIndex;while (activeIndex >= 0 && items[activeIndex] && items[activeIndex].classList.contains('placeholder')) {activeIndex--;}if (activeIndex >= 0 && items[activeIndex]) {items[activeIndex].classList.add('active');}
};const updateSelectedDate = () => {const activeYear = yearsWheel.value.querySelector('.active')const activeMonth = monthWheel.value.querySelector('.active')const activeDay = dayWheel.value.querySelector('.active')const activeHour = hourWheel.value.querySelector('.active')const activeMinute = minuteWheel.value.querySelector('.active')if (activeDay && activeMonth && activeYear && activeHour && activeMinute) {selectedDate.value = {year: parseInt(activeYear.dataset.value),month: parseInt(activeMonth.dataset.value),day: parseInt(activeDay.dataset.value),hour: parseInt(activeHour.dataset.value),minute: parseInt(activeMinute.dataset.value),};validateDate();}
};const validateDate = () => {if (dayInputNum.value == 1) {selectedDate.value.day = dayFather.value}const lastDayOfMonth = getDaysInMonth(Number(selectedDate.value.year), selectedDate.value.month);if (selectedDate.value.day > lastDayOfMonth) {selectedDate.value.day = lastDayOfMonth;const days = generateDaysArray(Number(selectedDate.value.year), selectedDate.value.month);initWheel(dayWheel.value, days, selectedDate.value.day, true);}
};const updateInputFields = () => {selectedDate.value.year = selectedDate.value.yearselectedDate.value.month = Number(selectedDate.value.month) < 10 ? '0' + Number(selectedDate.value.month) : selectedDate.value.monthselectedDate.value.day = Number(selectedDate.value.day) < 10 ? '0' + Number(selectedDate.value.day) : selectedDate.value.dayselectedDate.value.hour = Number(selectedDate.value.hour) < 10 ? '0' + Number(selectedDate.value.hour) : selectedDate.value.hourselectedDate.value.minute = Number(selectedDate.value.minute) < 10 ? '0' + Number(selectedDate.value.minute) : selectedDate.value.minute
};const updateFromInputFields = (type) => {if (type == 'year' && selectedDate.value[type].length == 4 || selectedDate.value[type].length == 2) {const year = selectedDate.value.year;const month = selectedDate.value.month;const day = selectedDate.value.day;const hour = selectedDate.value.hour;const minute = selectedDate.value.minute;const lastDayOfMonth = getDaysInMonth(year, month) || 1;const validDay = Math.min(day, lastDayOfMonth);selectedDate.value = {year,month: Math.max(1, Math.min(12, month)),day: Math.max(1, Math.min(lastDayOfMonth, validDay)),hour: Math.max(0, Math.min(23, hour)),minute: Math.max(0, Math.min(59, minute)),};initAllWheels();updateInputFields();}
};const togglePicker = (show) => {if (pickerContainerRef.value) {pickerContainerRef.value.style.display = show ? 'block' : 'none';if (show) {initAllWheels();} else {emit('timeUpdateClick', selectedDate.value)}if (show) {dayInputNum.value++}}
};const initAllWheels = () => {initWheel(yearsWheel.value, years, selectedDate.value.year)initWheel(monthWheel.value, months, selectedDate.value.month, true);const days = generateDaysArray(selectedDate.value.year, selectedDate.value.month);const lastDayOfMonth = getDaysInMonth(selectedDate.value.year, selectedDate.value.month);if (selectedDate.value.day > lastDayOfMonth) {selectedDate.value.day = lastDayOfMonth;}initWheel(dayWheel.value, days, selectedDate.value.day, true);initWheel(hourWheel.value, hours, selectedDate.value.hour, true);initWheel(minuteWheel.value, minutes, selectedDate.value.minute, true);updateInputFields();
};const updateDayWheelOnMonthOrYearChange = () => {const activeYear = yearsWheel.value.querySelector('.active')const activeMonth = monthWheel.value.querySelector('.active')if (activeYear && activeMonth) {const year = parseInt(activeYear.dataset.value);const month = parseInt(activeMonth.dataset.value);const days = generateDaysArray(year, month);if (Number(selectedDate.value.day) > days[days.length - 1]) {selectedDate.value.day = days[days.length - 1];}initWheel(dayWheel.value, days, selectedDate.value.day, true);updateInputFields();}
};const handleScroll = (wheelElement, type: string) => {updateActiveItem(wheelElement);updateSelectedDate();if (type === 'year' || type === 'month') {updateDayWheelOnMonthOrYearChange();}
};const handleClick = (wheelElement) => {dayInputNum.value++const index = Array.from(wheelElement.children).findIndex(item => item.className == 'active');wheelElement.scrollTop = index * 21;
};const handleWheel = (wheelElement) => {const delta = Math.sign(event.deltaY) * 3;const currentScroll = wheelElement.scrollTop;const itemHeight = 21;const newScroll = Math.max(0, Math.min(currentScroll + delta * itemHeight, (wheelElement.children.length - 1) * itemHeight));wheelElement.scrollTop = newScroll;
};const confirmSelection = () => {togglePicker(false);
};const nowSelection = () => {const now = new Date();selectedDate.value = {day: now.getDate(),month: now.getMonth() + 1,year: now.getFullYear(),hour: now.getHours(),minute: now.getMinutes(),};initAllWheels();
};const cancelSelection = () => {const now = new Date();selectedDate.value = {day: now.getDate(),month: now.getMonth() + 1,year: now.getFullYear(),hour: now.getHours(),minute: now.getMinutes(),};initAllWheels();togglePicker(false);
};
// 點擊頁面其他地方關閉選擇器document.addEventListener('click', (e) => {if (e.target && e.target.className != 'no' && e.target.className != 'datetime-input' && e.target.className != 'separator' && e.target.className != 'cancel-btn' && e.target.className != 'picker-container' && e.target.className != 'wheel-container' && e.target.className != 'wheel-group' && e.target.className != 'wheel' && e.target.className != 'buttons' && e.target.className != 'confirm-btn' && e.target.className != 'cancel-btn' && e.target.className != 'now-btn' && e.target.className != 'wheel-label' && e.target.className != 'active' && e.target.className != 'divItem') {togglePicker(false);}
})
// 暴露變量
defineExpose({timeupdate
});
onMounted(() => {initAllWheels();
});
</script>
<style scoped>
.main-container {width: 300px;position: relative;border: 1px solid #dcdfe6;margin-top: 1px;margin-bottom: 1px;
}.datetime-input {height: 30px;line-height: 30px;display: flex;align-items: center;margin: 0 10px;
}.datetime-input input {/*width: 100%;*//*text-align: center;*/
}.datetime-input .separator {margin: 0 0 2px 0;color: #999;
}.picker-container {display: none;position: absolute;top: calc(100% + 2px);left: 0;width: 100%;background: white;border-radius: 0 0 5px 5px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);padding: 10px 0 5px;z-index: 1000;border: 1px solid #ddd;border-top: none;}.wheel-container {display: flex;overflow-x: auto;padding: 5px 0;scrollbar-width: none;justify-content: center;}.wheel-container::-webkit-scrollbar {display: none;
}.wheel-group {display: flex;flex-direction: column;align-items: center;margin: 0 2px;min-width: 40px;
}.wheel-label {font-size: 11px;color: #666;margin-bottom: 3px;height: 15px;line-height: 15px;
}.wheel {height: 110px;width: 40px;overflow: hidden;text-align: center;border: 1px solid #eee;border-radius: 3px;background: #fff;scroll-behavior: smooth;
}.wheel div {height: 25px;line-height: 25px;cursor: pointer;transition: all 0.2s;font-size: 13px;
}.wheel div:hover {background: #f5f5f5;
}:deep(.wheel div.active) {background: #4285f4;color: white;font-weight: bold;
}:deep(.placeholder) {height: 21px;line-height: 21px;
}:deep(.divItem) {font-size: 16px;height: 21px;line-height: 21px;
}:deep(.wheel div.placeholder) {color: transparent;pointer-events: none;
}.buttons {display: flex;justify-content: flex-end;
}button {height: 30px;line-height: 30px;width: 50px;border: none;border-radius: 3px;cursor: pointer;font-size: 12px;margin-left: 6px;
}.cancel-btn {background: #f0f0f0;color: #333;
}.confirm-btn {background: #4285f4;color: white;
}
</style>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/89632.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/89632.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/89632.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Jetson邊緣計算主板：Ubuntu 環境配置 CUDA 與 cudNN 推理環境 + OpenCV 與 C++ 進行目標分類

Jetson邊緣計算主板：Ubuntu 環境配置 CUDA 與 cudNN 推理環境 + OpenCV 與 C++ 進行目標分類

最近由于業務需求&#xff0c;接觸到了Jetson邊緣AI計算主板&#xff0c;博主使用的是Jetson Orin NX 16GB這個版本&#xff0c;可以看到其算力達到了100TOPS&#xff0c;這是一個非常恐怖的算力了&#xff0c;接下來便是博主對其的環境配置過程&#xff0c;博主要在該主板上運…
閱讀更多...
CLIP模型實現中的其他細節

CLIP模型實現中的其他細節

之前已經完整的拆解了CLIP中所用到的ResNet、ViT和Transformer三個模型&#xff08;CLIP拆解-CSDN博客&#xff09;&#xff0c;這篇將講解model.py實現中的其他細節。 1.關于ResNet模型中vision_head的設置 ResNet: vision_heads vision_width * 32 // 64 ViT: vision_h…
閱讀更多...
國科大深度學習作業1-手寫數字識別實驗

國科大深度學習作業1-手寫數字識別實驗

背景介紹&#xff1a;單位實習&#xff0c;趁機摸魚&#xff0c;由于電腦只安裝了VSCode&#xff0c;所以算是從環境搭建寫起。 目錄 一、環境搭建 1. 安裝Anaconda 2. 創建Python環境 3. 安裝PyTorch 4. 安裝其他必要庫 二、在 VSCode 中配置環境 1. 安裝Pytho…
閱讀更多...
基于Spring Boot的綠園社區團購系統的設計與實現

基于Spring Boot的綠園社區團購系統的設計與實現

第1章 摘 要 本設計與實現的基于Spring Boot的綠園社區團購系統&#xff0c;旨在為社區居民提供一套高效、便捷的團購購物解決方案。隨著電子商務的發展和社區居民對便捷購物需求的增加&#xff0c;傳統的團購模式已無法滿足用戶的個性化需求。本系統通過整合現代化技術&…
閱讀更多...
【51單片機四位數碼管從0循環顯示到99，每0.5秒增加一個數字，打擊鍵計數】2022-6-11

【51單片機四位數碼管從0循環顯示到99，每0.5秒增加一個數字，打擊鍵計數】2022-6-11

緣由 #include "REG52.h" unsigned char code smgduan[]{0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f,0x6f,0x77,0x7c,0x39,0x5e,0x79,0x71,0,64,15,56}; //共陰0~F消隱減號 unsigned char Js0, miao0;//中斷計時 秒 分 時 毫秒 unsigned int shu0; //bit Mb0;//…
閱讀更多...
如何通過python腳本向redis和mongoDB傳點位數據

如何通過python腳本向redis和mongoDB傳點位數據

向MongoDB傳數據 from pymongo import MongoClient #導入庫對應的庫localhost "172.16.0.203" #數據庫IP地址 baseName "GreenNagoya" client MongoClient(localhost, 27017, username"admin", password"zdiai123") #數…
閱讀更多...
昆侖通泰觸摸屏Modbus TCP服務器工程 || TCP客戶端工程

昆侖通泰觸摸屏Modbus TCP服務器工程 || TCP客戶端工程

目錄 一、Modbus TCP服務端 1.設備地址 2.實操及數據 二、Modbus TCP客戶端 1.結果及協議解析 一、Modbus TCP服務端 1.設備地址 --單元標識符 DI輸入/4個離散輸入 DO輸出/單個線圈輸出 輸入寄存器 讀輸入寄存器操作&#xff0c;寫輸入寄存器操作 保持寄存器 …
閱讀更多...
PyTorch 安裝使用教程

PyTorch 安裝使用教程

一、PyTorch 簡介 PyTorch 是由 Facebook AI Research 團隊開發的開源深度學習框架。它以動態圖機制、靈活性強、易于調試而著稱&#xff0c;廣泛應用于自然語言處理、計算機視覺和學術研究。 二、安裝 PyTorch 2.1 通過官網選擇安裝命令&#xff08;推薦&#xff09; 訪問官…
閱讀更多...
開源功能開關(feature flags) 和管理平臺之unleash

開源功能開關(feature flags) 和管理平臺之unleash

文章目錄 背景Flagsmith 和 Unleash什么是unleash架構Unleash Edge 安裝和使用Unleash SDKs開放API Tokens訪問**Server-side SDK (CLIENT)****查詢所有 Feature Toggles****查詢特定 Toggle** API token typesClient tokensFrontend tokensPersonal access tokensService acco…
閱讀更多...
細胞建模“圖靈測試”：解析學習虛擬細胞挑戰賽

細胞建模“圖靈測試”：解析學習虛擬細胞挑戰賽

一、AI能否預測細胞的未來&#xff1f; 想象一下&#xff0c;有一天我們不必一管管地做實驗&#xff0c;就能在計算機中模擬細胞對基因敲除、藥物處理乃至微環境變化的反應。這不再是科幻&#xff0c;而是“虛擬細胞”&#xff08;Virtual Cell&#xff09;研究的宏大目標。然…
閱讀更多...
centos9安裝docker Dify

centos9安裝docker Dify

CentOS | Docker Docs yum -y install gcc gcc-c yum-utils Docker 官方的 YUM 軟件倉庫配置文件到系統,設置存儲庫 yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo 也可以從阿里云下(我選擇上面的) yum-config-manager --add-re…
閱讀更多...
基于Jenkins和Kubernetes構建DevOps自動化運維管理平臺

基于Jenkins和Kubernetes構建DevOps自動化運維管理平臺

目錄 引言 基礎概念 DevOps概述 Jenkins簡介 Kubernetes簡介 Jenkins與Kubernetes的關系 Jenkins與Kubernetes的集成 集成架構 安裝和配置 安裝Jenkins 安裝Kubernetes插件 配置Kubernetes連接 配置Jenkins Agent Jenkins Pipeline與Kubernetes集成 Pipeline定義…
閱讀更多...
MySQL 8.0 OCP 1Z0-908 題目解析(18)

MySQL 8.0 OCP 1Z0-908 題目解析(18)

題目69 Choose three. A MySQL server is monitored using MySQL Enterprise Monitor’s agentless installation. Which three features are available with this installation method? □ A) MySQL Replication monitoring □ B) security-related advisor warnings □ …
閱讀更多...
【mongodb】安裝和使用mongod

【mongodb】安裝和使用mongod

文章目錄 前言一、如何安裝&#xff1f;二、使用步驟1. 開啟mongod服務2. 客戶端連接數據庫3. 數據庫指令 總結 前言 Mongodb的安裝可以直接安裝系統默認的版本&#xff0c;也可以安裝官網維護的版本&#xff0c;相對而言更推薦安裝官網維護的版本&#xff0c;版本也相當更新。…
閱讀更多...
云效DevOps vs Gitee vs 自建GitLab的技術選型

云效DevOps vs Gitee vs 自建GitLab的技術選型

針對「云效DevOps vs Gitee vs 自建GitLab」的技術選型&#xff0c;我們從核心需求、成本、運維、擴展性四個維度進行深度對比&#xff0c;并給出場景化決策建議&#xff1a; 一、核心能力對比表 能力維度云效DevOpsGitee自建GitLab&#xff08;社區版/企業版&#xff09;代碼…
閱讀更多...
CentOS 7 安裝RabbitMQ詳細教程

CentOS 7 安裝RabbitMQ詳細教程

前言&#xff1a;在分布式系統架構中&#xff0c;消息隊列作為數據流轉的 “高速公路”&#xff0c;是微服務架構不可或缺的核心組件。RabbitMQ 憑借其穩定的性能、靈活的路由機制和強大的生態支持&#xff0c;成為企業級消息中間件的首選之一。不過&#xff0c;當我們聚焦 Cen…
閱讀更多...
Python爬蟲用途和介紹

Python爬蟲用途和介紹

目錄 什么是Python爬蟲 Python爬蟲用途 Python爬蟲可以獲得那些數據 Python爬蟲的用途 反爬是什么 常見的反爬措施 Python爬蟲技術模塊總結 獲取網站的原始響應數據 獲取到響應數據對響應數據進行過濾 對收集好的數據進行存儲 抵御反爬機制 Python爬蟲框架 Python…
閱讀更多...
uni-app開發app保持登錄狀態

uni-app開發app保持登錄狀態

在 uni-app 中實現用戶登錄一次后在 token 過期前一直免登錄的功能&#xff0c;可以通過以下幾個關鍵步驟實現&#xff1a;本地持久化存儲 Token、使用請求與響應攔截器自動處理 Token 刷新、以及在 App.vue 中結合 pages.json 設置登錄狀態跳轉邏輯。 ? 一、pages.json 配置說…
閱讀更多...
21、MQ常見問題梳理

21、MQ常見問題梳理

目錄 ? 、MQ如何保證消息不丟失 1 、哪些環節可能會丟消息 2 、?產者發送消息如何保證不丟失 2.1、?產者發送消息確認機制 2.2、Rocket MQ的事務消息機制 2.3 、Broker寫?數據如何保證不丟失 2.3.1** ?先需要理解操作系統是如何把消息寫?到磁盤的**。 2.3.2然后來…
閱讀更多...
MySQL數據庫--SQL DDL語句

MySQL數據庫--SQL DDL語句

SQL--DDL語句 1&#xff0c;DDL-數據庫操作2&#xff0c;DDL-表操作-查詢3&#xff0c;DDL-表操作-創建4&#xff0c;DDL-表操作-數據類型4.1&#xff0c;DDL-表操作-數值類型4.2&#xff0c;DDL-表操作-字符串類型4.3&#xff0c;DDL-表操作-日期時間類型4.4&#xff0c;實例 …
閱讀更多...
最新文章

Copyright @ 2022~2023