全面指南：在 Vue 中优雅封装 HTML ＜dialog＞ 组件

当然！下面我将为您提供一个功能完备的 Vue 对话框组件（CustomDialog.vue），该组件封装了原生的 <dialog> 标签，支持用户自定义样式，并解决了在不同浏览器中的兼容性问题。随后，我将为您提供详细的组件使用文档，帮助您快速集成和使用该组件。

📦 完整的组件代码：CustomDialog.vue

<template><transition name="dialog-fade"><dialogv-if="isOpen"ref="dialog":class="['custom-dialog', customClass]":role="role"aria-modal="true":aria-labelledby="ariaLabelledby":aria-describedby="ariaDescribedby"@cancel="handleCancel"><buttonv-if="showCloseButton"class="close-btn"@click="closeDialog"aria-label="Close dialog">&times;</button><div class="dialog-content" ref="content"><slot></slot></div></dialog></transition>
</template><script>
import 'dialog-polyfill/dist/dialog-polyfill.css';
import dialogPolyfill from 'dialog-polyfill';export default {name: 'CustomDialog',props: {/** * 控制对话框的显示与隐藏* @type {Boolean}* @default false*/modelValue: {type: Boolean,default: false,},/*** 用户自定义的 CSS 类名* @type {String}* @default ''*/customClass: {type: String,default: '',},/*** 是否为模态对话框* @type {Boolean}* @default true*/modal: {type: Boolean,default: true,},/*** 是否显示关闭按钮* @type {Boolean}* @default true*/showCloseButton: {type: Boolean,default: true,},/*** ARIA 标题元素的 ID* @type {String|null}* @default null*/ariaLabelledby: {type: String,default: null,},/*** ARIA 描述元素的 ID* @type {String|null}* @default null*/ariaDescribedby: {type: String,default: null,},/*** 对话框的角色* @type {String}* @default 'dialog'*/role: {type: String,default: 'dialog',},},data() {return {isOpen: false,previousActiveElement: null,focusableElements: [],handleKeydown: null,handleClickOutside: null,};},watch: {modelValue: {immediate: true,handler(val) {if (val) {this.showDialog();} else {this.closeDialog();}},},},methods: {/*** 打开对话框*/showDialog() {this.isOpen = true;this.$nextTick(() => {this.initDialog();this.handleFocus();this.lockScroll();});},/*** 关闭对话框*/closeDialog() {this.isOpen = false;this.unlockScroll();this.$emit('update:modelValue', false);this.removeEventListeners();if (this.previousActiveElement) {this.previousActiveElement.focus();}},/*** 处理取消事件（例如按下 ESC 键）* @param {Event} event */handleCancel(event) {event.preventDefault();this.closeDialog();},/*** 管理焦点*/handleFocus() {this.previousActiveElement = document.activeElement;this.focusableElements = this.getFocusableElements();if (this.focusableElements.length) {this.focusableElements[0].focus();} else {this.$refs.dialog.focus();}},/*** 获取对话框内所有可聚焦的元素* @returns {Array<Element>}*/getFocusableElements() {const selectors = ['a[href]','area[href]','input:not([disabled]):not([type="hidden"])','select:not([disabled])','textarea:not([disabled])','button:not([disabled])','iframe','object','embed','[contenteditable]','[tabindex]:not([tabindex="-1"])',];return Array.from(this.$refs.dialog.querySelectorAll(selectors.join(','))).filter((el) =>!el.hasAttribute('disabled') &&!el.getAttribute('aria-hidden') &&el.offsetParent !== null);},/*** 初始化对话框*/initDialog() {if (typeof this.$refs.dialog.showModal === 'function' && this.modal) {this.$refs.dialog.showModal();} else if (typeof this.$refs.dialog.show === 'function') {this.$refs.dialog.show();} else {this.$refs.dialog.setAttribute('open', '');}this.addEventListeners();},/*** 添加事件监听器*/addEventListeners() {this.handleKeydown = this.handleKeydownEvent.bind(this);this.handleClickOutside = this.handleClickOutsideEvent.bind(this);this.$refs.dialog.addEventListener('keydown', this.handleKeydown);document.addEventListener('click', this.handleClickOutside);},/*** 移除事件监听器*/removeEventListeners() {if (this.handleKeydown) {this.$refs.dialog.removeEventListener('keydown', this.handleKeydown);}if (this.handleClickOutside) {document.removeEventListener('click', this.handleClickOutside);}},/*** 处理键盘事件* @param {KeyboardEvent} e */handleKeydownEvent(e) {if (e.key === 'Tab' || e.keyCode === 9) {this.trapFocus(e);} else if (e.key === 'Escape' || e.keyCode === 27) {this.closeDialog();}},/*** 焦点捕获，确保焦点在对话框内循环* @param {KeyboardEvent} e */trapFocus(e) {const focusable = this.focusableElements;if (focusable.length === 0) {e.preventDefault();return;}const firstElement = focusable[0];const lastElement = focusable[focusable.length - 1];if (e.shiftKey) {if (document.activeElement === firstElement) {e.preventDefault();lastElement.focus();}} else {if (document.activeElement === lastElement) {e.preventDefault();firstElement.focus();}}},/*** 处理点击遮罩关闭对话框* @param {MouseEvent} e */handleClickOutsideEvent(e) {if (!this.modal) return;const rect = this.$refs.dialog.getBoundingClientRect();if (e.clientX < rect.left ||e.clientX > rect.right ||e.clientY < rect.top ||e.clientY > rect.bottom) {this.closeDialog();}},/*** 禁止背景滚动*/lockScroll() {document.body.style.overflow = 'hidden';},/*** 解除背景滚动限制*/unlockScroll() {document.body.style.overflow = '';},},mounted() {// 注册 dialog-polyfill，如果浏览器不支持 showModalif (!('showModal' in HTMLDialogElement.prototype)) {dialogPolyfill.registerDialog(this.$refs.dialog);}},beforeUnmount() {this.removeEventListeners();this.unlockScroll();},
};
</script><style scoped>
.custom-dialog {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 0;border: none;max-width: 90%;max-height: 90%;overflow: auto;z-index: 1000;background-color: var(--dialog-background, #fff);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);border-radius: 8px;
}.dialog-content {padding: 20px;
}.close-btn {position: absolute;top: 10px;right: 10px;background: transparent;border: none;font-size: 1.5rem;cursor: pointer;line-height: 1;
}.dialog-fade-enter-active,
.dialog-fade-leave-active {transition: opacity 0.3s;
}.dialog-fade-enter-from,
.dialog-fade-leave-to {opacity: 0;
}
</style>

📚 组件使用文档

📖 目录

  1. 介绍
  2. 安装
  3. 快速开始
  4. 组件 API
    • Props
    • Events
    • Slots
  5. 高级用法
    • 多层弹窗
    • 自定义样式
    • ARIA 属性
  6. 注意事项
  7. 示例

1. 介绍

CustomDialog 是一个基于 Vue 的对话框组件，封装了原生的 <dialog> 标签，提供了丰富的功能和高度的可定制性。该组件支持用户自定义内容和样式，兼容不支持原生 <dialog> 标签的浏览器，并解决了焦点管理、可访问性等一系列常见问题。

2. 安装

2.1 安装 dialog-polyfill

为了确保组件在所有浏览器中都能正常工作，我们需要安装 dialog-polyfill。

使用 npm：

npm install dialog-polyfill

使用 yarn：

yarn add dialog-polyfill
2.2 引入组件

将 CustomDialog.vue 组件文件放入您的项目中，例如在 src/components 目录下。

3. 快速开始

以下是如何在 Vue 应用中快速集成和使用 CustomDialog 组件的示例。

3.1 注册组件

在需要使用对话框的父组件中引入并注册 CustomDialog。

<template><div><button @click="isDialogOpen = true">打开对话框</button><CustomDialogv-model="isDialogOpen"custom-class="my-dialog"aria-labelledby="dialogTitle"aria-describedby="dialogDesc"><h2 id="dialogTitle">自定义对话框标题</h2><p id="dialogDesc">这是对话框的内容。</p><button @click="doSomething">执行操作</button></CustomDialog></div>
</template><script>
import CustomDialog from './components/CustomDialog.vue';export default {components: { CustomDialog },data() {return {isDialogOpen: false,};},methods: {doSomething() {// 执行某些操作this.isDialogOpen = false;},},
};
</script><style>
.my-dialog {--dialog-background: #f0f0f0;border-radius: 10px;
}
</style>

4. 组件 API

Props
Prop类型默认值描述
modelValueBooleanfalse控制对话框的显示与隐藏。使用 v-model 进行双向绑定。
customClassString''用户自定义的 CSS 类名，用于自定义对话框样式。
modalBooleantrue是否为模态对话框。true 为模态，false 为非模态。
showCloseButtonBooleantrue是否显示关闭按钮。
ariaLabelledbyStringnullARIA 标题元素的 ID，用于辅助技术。
ariaDescribedbyStringnullARIA 描述元素的 ID，用于辅助技术。
roleString'dialog'对话框的角色，默认值为 'dialog'。可以根据需要自定义。
Events
事件名称描述回调参数
update:modelValue当对话框的显示状态改变时触发新的 Boolean 值
Slots
插槽名称描述
默认插槽用于插入自定义的对话框内容，如标题、正文、按钮等。

5. 高级用法

多层弹窗

CustomDialog 组件支持多层弹窗（嵌套对话框）。只需在一个对话框内再使用一个 CustomDialog 组件即可。

<template><div><button @click="isFirstDialogOpen = true">打开第一个对话框</button><CustomDialog v-model="isFirstDialogOpen" custom-class="first-dialog"><h2 id="firstDialogTitle">第一个对话框</h2><p>这是第一个对话框的内容。</p><button @click="isSecondDialogOpen = true">打开第二个对话框</button><CustomDialog v-model="isSecondDialogOpen" custom-class="second-dialog"><h2 id="secondDialogTitle">第二个对话框</h2><p>这是第二个对话框的内容。</p></CustomDialog></CustomDialog></div>
</template><script>
import CustomDialog from './components/CustomDialog.vue';export default {components: { CustomDialog },data() {return {isFirstDialogOpen: false,isSecondDialogOpen: false,};},
};
</script><style>
.first-dialog {--dialog-background: #e0f7fa;
}.second-dialog {--dialog-background: #ffe0b2;
}
</style>
自定义样式

通过 customClass 属性，您可以为对话框添加自定义样式。例如，修改背景颜色、边框、圆角等。

<template><CustomDialog v-model="isDialogOpen" custom-class="fancy-dialog"><!-- 自定义内容 --></CustomDialog>
</template><style>
.fancy-dialog {--dialog-background: #ffffff;border: 2px solid #3f51b5;border-radius: 12px;
}
</style>
ARIA 属性

为了增强可访问性，您可以使用 ariaLabelledby 和 ariaDescribedby 属性，关联对话框的标题和描述。

<template><CustomDialogv-model="isDialogOpen"aria-labelledby="dialogTitle"aria-describedby="dialogDescription"><h2 id="dialogTitle">对话框标题</h2><p id="dialogDescription">对话框的详细描述内容。</p></CustomDialog>
</template>

6. 注意事项

  1. 浏览器兼容性：虽然我们已经引入了 dialog-polyfill 来支持不支持原生 <dialog> 的浏览器，但请确保在项目中正确安装和引入 dialog-polyfill 的 CSS 文件。

  2. 事件清理：组件在销毁时会自动移除事件监听器和解除滚动锁定，无需手动处理。

  3. 可访问性：请确保为 ariaLabelledby 和 ariaDescribedby 提供正确的元素 ID，以增强辅助技术的支持。

  4. 焦点管理：确保对话框内至少有一个可聚焦元素（如按钮、链接等），以便焦点能够正确捕获和循环。

  5. 多层弹窗：在使用多层弹窗时，注意管理各个弹窗的 z-index 和焦点，避免焦点被错误地锁定在最外层弹窗。

  6. 样式覆盖：当自定义样式时，避免覆盖关键的样式变量（如 --dialog-background），以防止影响组件的核心功能。

7. 示例

7.1 基本用法
<template><div><button @click="isDialogOpen = true">打开对话框</button><CustomDialogv-model="isDialogOpen"custom-class="basic-dialog"aria-labelledby="basicDialogTitle"aria-describedby="basicDialogDesc"><h2 id="basicDialogTitle">基本对话框</h2><p id="basicDialogDesc">这是一个基本的对话框示例。</p><button @click="isDialogOpen = false">关闭</button></CustomDialog></div>
</template><script>
import CustomDialog from './components/CustomDialog.vue';export default {components: { CustomDialog },data() {return {isDialogOpen: false,};},
};
</script><style>
.basic-dialog {--dialog-background: #fffbe6;
}
</style>
7.2 带有表单的对话框
<template><div><button @click="isFormDialogOpen = true">打开表单对话框</button><CustomDialogv-model="isFormDialogOpen"custom-class="form-dialog"aria-labelledby="formDialogTitle"aria-describedby="formDialogDesc"><h2 id="formDialogTitle">用户信息</h2><p id="formDialogDesc">请输入您的用户信息。</p><form @submit.prevent="submitForm"><div><label for="username">用户名：</label><input id="username" type="text" v-model="form.username" required /></div><div><label for="email">邮箱：</label><input id="email" type="email" v-model="form.email" required /></div><button type="submit">提交</button><button type="button" @click="isFormDialogOpen = false">取消</button></form></CustomDialog></div>
</template><script>
import CustomDialog from './components/CustomDialog.vue';export default {components: { CustomDialog },data() {return {isFormDialogOpen: false,form: {username: '',email: '',},};},methods: {submitForm() {// 处理表单提交console.log('提交的表单数据：', this.form);this.isFormDialogOpen = false;},},
};
</script><style>
.form-dialog {--dialog-background: #e6f7ff;
}.form-dialog form {display: flex;flex-direction: column;
}.form-dialog form div {margin-bottom: 15px;
}.form-dialog form label {margin-bottom: 5px;
}.form-dialog form input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;
}
</style>
7.3 嵌套弹窗
<template><div><button @click="isParentDialogOpen = true">打开父级对话框</button><CustomDialogv-model="isParentDialogOpen"custom-class="parent-dialog"aria-labelledby="parentDialogTitle"aria-describedby="parentDialogDesc"><h2 id="parentDialogTitle">父级对话框</h2><p id="parentDialogDesc">这是父级对话框的内容。</p><button @click="isChildDialogOpen = true">打开子级对话框</button><CustomDialogv-model="isChildDialogOpen"custom-class="child-dialog"aria-labelledby="childDialogTitle"aria-describedby="childDialogDesc"><h2 id="childDialogTitle">子级对话框</h2><p id="childDialogDesc">这是子级对话框的内容。</p><button @click="isChildDialogOpen = false">关闭子级</button></CustomDialog></CustomDialog></div>
</template><script>
import CustomDialog from './components/CustomDialog.vue';export default {components: { CustomDialog },data() {return {isParentDialogOpen: false,isChildDialogOpen: false,};},
};
</script><style>
.parent-dialog {--dialog-background: #f0f8ff;
}.child-dialog {--dialog-background: #ffe4e1;
}
</style>

📝 总结

通过上述 CustomDialog.vue 组件及其详细的使用文档，您可以轻松地在 Vue 项目中集成一个功能强大、可定制且兼容性良好的对话框组件。该组件不仅支持用户自定义内容和样式，还确保了在不同浏览器中的一致性和可访问性，极大地提升了用户体验。

📌 关键特性

  • 可访问性：遵循 ARIA 标准，支持键盘导航和焦点管理。
  • 兼容性：集成 dialog-polyfill，确保在不支持原生 <dialog> 的浏览器中正常工作。
  • 高度可定制：通过 customClass 和 CSS 变量，自定义对话框的样式。
  • 多层弹窗支持：允许在对话框内嵌套更多对话框。
  • 模态与非模态：灵活控制对话框的模态行为。
  • 过渡动画：使用 Vue 的 <transition> 组件，实现平滑的打开和关闭动画。

希望这个组件和文档能帮助您在项目中快速实现和优化对话框功能！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/456024.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ASP.NET Core 路由规则 MapControllerRoute、MapDefaultControllerRoute、MapController

ASP.NET Core 路由规则 MapControllerRoute、MapDefaultControllerRoute、MapController

MapControllers 来映射属性路由控制器。 资料
阅读更多...
一起搭WPF架构之LiveCharts.Wpf的简单了解与安装

一起搭WPF架构之LiveCharts.Wpf的简单了解与安装

一起搭WPF架构之LiveCharts.Wpf的简单了解与安装 前言LiveCharts.Wpf介绍LiveCharts.Wpf的安装总结 前言 根据项目需求&#xff0c;我单独留了一个界面用于进行数据分析。数据分析的内容考虑是采用图表的形式将SQLite数据库中存储的数据进行绘制成图&#xff0c;以便数据分析。…
阅读更多...
第三十一篇：TCP协议如何解决丢包的问题，TCP系列六

第三十一篇：TCP协议如何解决丢包的问题，TCP系列六

前面我们说TCP协议是可靠的、基于字节流、面向连接的传输层通信协议&#xff1b; 这里我想换种说法&#xff1a;与其说是TCP协议是可靠的&#xff0c;不如说传输层程序软件实现了TCP协议的规范&#xff08;网络层次模型&#xff0c;每一层都有对应的程序软件&#xff09;&…
阅读更多...
33 类与对象 · 下

33 类与对象 · 下

目录 一、构造函数的深入 &#xff08;一&#xff09;构造函数的其他特点 &#xff08;二&#xff09;使用例 1、Date类与Time类显示写 2、Date类与Time类写一部分 &#xff08;三&#xff09;总结 &#xff08;四&#xff09;初始化顺序小题目 二、类型转化 &#xff…
阅读更多...
【芯片设计】DC综合retiming策略的学习与实践

【芯片设计】DC综合retiming策略的学习与实践

对于DC综合中的retiming策略早有耳闻&#xff0c;但是一直没有比较系统的学习和实验过&#xff0c;正好借着这次交付过程的归纳总结机会&#xff0c;把一些零零散散的收获学习记录下。 记得刚出新手村时和某位大佬聊到过&#xff0c;他说你逻辑里写了在某级计算一个结果&#…
阅读更多...
UE5之5.4 第一人称示例代码阅读2 子弹发射逻辑

UE5之5.4 第一人称示例代码阅读2 子弹发射逻辑

TP_WeaponComponent.h 看看头文件 暴露了attach weapon和fire给蓝图 这两个函数意义一看名字吧&#xff0c;就是捡起来枪的时候执行&#xff0c;一个就是发射子弹的时候执行 #pragma once#include "CoreMinimal.h" #include "Components/SkeletalMeshComponen…
阅读更多...
Appium中的api(二)

Appium中的api(二)

目录 元素定位操作api 1--通过id定位api 2--通过class获取定位元素 3--通过xpath表达式定位元素 4.完整代码 解释 效果 元素定位操作api 1--通过id定位api 注:driver.find_element是获取单个元素 # 通过id获取 mySearchId "com.android.settings:id/search_acti…
阅读更多...
如何对pdf文件进行加密？pdf文件加密全攻略与深度解析（5个方法）

如何对pdf文件进行加密？pdf文件加密全攻略与深度解析（5个方法）

如何对pdf文件进行加密&#xff1f; 只见&#xff0c;在深夜的情报局里&#xff0c;特工小李将一份绝密PDF文件放在保险箱内&#xff0c;以为这样就天衣无缝了。 细细推敲&#xff0c;漏洞百出&#xff1a; 如果钥匙被盗呢&#xff1f;如果被神匠破解出密码呢&#xff1f;如果…
阅读更多...
Halcon基础-瓶盖带角度的OCR批量识别

Halcon基础-瓶盖带角度的OCR批量识别

Halcon基础-OCR识别 1、OCR识别素材2、创建路径文件3、Halcon代码实现4、运行效果5、资源获取 1、OCR识别素材 这里我准备了7张不同角度的OCR图片&#xff0c;如下所示&#xff1a; 2、创建路径文件 按照下图所示创建全部文件夹和文件&#xff1a; 01用来存放OCR识别原图 c…
阅读更多...
Vue中使用el-upload实现文件上传时控制提交按钮状态的最佳实践

Vue中使用el-upload实现文件上传时控制提交按钮状态的最佳实践

在Web应用开发中&#xff0c;文件上传是一个常见的需求。在使用Vue框架和Element UI库时&#xff0c;我们经常使用el-upload组件来处理文件上传。但是&#xff0c;如何在上传过程中控制提交按钮的可用状态&#xff0c;以避免在上传未完成时误触提交操作&#xff0c;是一个值得探…
阅读更多...
解决：如何在opencv中得到与matlab立体标定一样的矫正图？（python版opencv）

解决：如何在opencv中得到与matlab立体标定一样的矫正图？（python版opencv）

目的&#xff1a;采用一样的标定参数&#xff0c;matlab中和opencv中的立体矫正图像是一样的吗&#xff1f;不一样的话怎么让它们一样&#xff1f; 结论&#xff1a;不一样。后文为解决方案。 原因&#xff1a;注意matlab的标定结果在matlab中的用法和在opencv中的用法不一样&a…
阅读更多...
光伏电站折旧率的计算

光伏电站折旧率的计算

折旧率的计算方法 直线法&#xff1a;直线法是最常用的折旧计算方法。它假设光伏设备在使用寿命内每年的折旧额保持不变。计算公式为&#xff1a; 折旧率(资产原值-净残值)预计使用寿命。 其中&#xff0c;资产原值是指光伏设备购置价值或建成投产时的价值&#xff1b;净残值…
阅读更多...
chrome清除https状态

chrome清除https状态

莫名其妙的http跳转到https的url了。 解决办法 浏览器地址栏输入&#xff1a;chrome://net-internals/#hsts 输入你需要删除的域名即可&#xff01;&#xff01;&#xff01;
阅读更多...
AMD平台，5600X+6650XT，虚拟机安装macOS 15 Sequoia 15.0.1 (2024.10)

AMD平台，5600X+6650XT，虚拟机安装macOS 15 Sequoia 15.0.1 (2024.10)

macOS 15 Sequoia终于出正式版了&#xff0c;没有Mac&#xff0c;所以还是虚拟机玩玩&#xff0c;还是属于折腾&#xff0c;安装过程和之前差不多&#xff0c;这次我从外网获得了8核和16核openCore&#xff0c;分享一下。 提前发一下ISO镜像地址和openCore引导磁盘地址 ISO镜…
阅读更多...
《人工智能往事》—— 简而言之，AI 已经包围了我们。AI 就是我们。

《人工智能往事》—— 简而言之，AI 已经包围了我们。AI 就是我们。

《人工智能往事》这本书我挺喜欢的&#xff08;推荐给对计算机和AI史有考古兴趣的同学们&#xff09;。我是几年前读的英文版《This Could Be Important: My Life and Times with the Artificial Intelligentsia Pamela McCorduck》很高兴发现国内推出了译本。 作者帕梅拉麦考…
阅读更多...
一座数智工厂，看见汽车制造的诗与远方

一座数智工厂，看见汽车制造的诗与远方

今天的中国&#xff0c;已经是名副其实的汽车制造与出口大国。 根据国家统计局10月18日发布的数据&#xff0c;今年9月中国新能源汽车产量同比增长48.5%&#xff0c;增速为2023年5月以来新高。1月至9月汽车行业出口交货值同比增长17.1%。中国汽车产业的高速发展&#xff0c;离不…
阅读更多...
学习docker第三弹------Docker镜像以及推送拉取镜像到阿里云公有仓库和私有仓库

学习docker第三弹------Docker镜像以及推送拉取镜像到阿里云公有仓库和私有仓库

docker目录 1 Docker镜像dockers镜像的进一步理解 2 Docker镜像commit操作实例案例内容是ubuntu安装vim 3 将本地镜像推送至阿里云4 将阿里云镜像下载到本地仓库5 后记 1 Docker镜像 镜像&#xff0c;是docker的三件套之一&#xff08;镜像、容器、仓库&#xff09;&#xff0…
阅读更多...
uniapp微信小程序使用vant组件库

uniapp微信小程序使用vant组件库

1. vant组件库(微信小程序版本)官网地址 地址: vant组件库(微信小程序版本) 2. uniapp微信小程序引入 <1>. 去到GitHub中将资源克隆到本地,地址: vant-weapp <2>. 到本地把文件拷贝到我们的uniapp微信小程序项目中 在项目的目录下新建一个文件wxcomponents&#…
阅读更多...
iOS 18.2开发者预览版 Beta 1版本发布，欧盟允许卸载应用商店

iOS 18.2开发者预览版 Beta 1版本发布，欧盟允许卸载应用商店

苹果今天为开发人员推送了iOS 18.2开发者预览版 Beta 1版本 更新&#xff08;内部版本号&#xff1a;22C5109p&#xff09;&#xff0c;本次更新距离上次发布 Beta / RC 间隔 2 天。该版本仅适用于支持Apple Intelligence的设备&#xff0c;包括iPhone 15 Pro系列和iPhone 16系…
阅读更多...
Spring Web MVC 入门

Spring Web MVC 入门

1. 什么是 Spring Web MVC Spring Web MVC 是基于 Servlet API 构建的原始 Web 框架&#xff0c;从从⼀开始就包含在Spring框架中。它的 正式名称“SpringWebMVC”来⾃其源模块的名称(Spring-webmvc)&#xff0c;但它通常被称为"Spring MVC". 什么是Servlet呢? Ser…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023