教学网站前台模板手机网站开发 视频

教学网站前台模板,手机网站开发 视频,wordpress 编辑,桐柏微网站开发Quasar Addressbar Color 插件教程 一、核心作用 这个插件专门用来修改移动端浏览器地址栏 / 状态栏的背景颜色#xff08;比如 Chrome 移动端顶部的地址栏、Safari 状态栏#xff09;#xff0c;让页面风格更统一#xff0c;仅在移动端生效#xff0c;PC 端无效果。 二…Quasar Addressbar Color 插件教程一、核心作用这个插件专门用来修改移动端浏览器地址栏 / 状态栏的背景颜色比如 Chrome 移动端顶部的地址栏、Safari 状态栏让页面风格更统一仅在移动端生效PC 端无效果。二、快速上手1. 安装Quasar V2无需额外安装插件已内置在 Quasar 框架中直接注册即可。2. 注册插件在项目的quasar.config.js中启用// quasar.config.js module.exports { framework: { plugins: [ AddressbarColor // 启用插件 ] } }3. 基本使用方式 1全局初始化设置默认颜色在 // 文件: /src/boot/addressbar-color.js 或根组件中设置初始颜色import { AddressbarColor } from quasar // 直接设置颜色支持 Hex/RGB/RGBA AddressbarColor.set(#ff0000) // 红色 AddressbarColor.set(rgb(255, 0, 0)) AddressbarColor.set(rgba(255, 0, 0, 0.5))方式 2页面内动态修改在 Vue 组件中根据页面需求动态切换颜色template div button clickchangeColor切换地址栏颜色/button /div /template script import { AddressbarColor } from quasar export default { methods: { changeColor() { AddressbarColor.set(#00ff00) // 切换为绿色 } } } /script三、关键特性自动适配主题如果设置auto参数会自动匹配页面根元素的背景色AddressbarColor.set(auto)透明度处理部分浏览器不支持透明地址栏插件会自动降级为不透明颜色。仅移动端生效PC 端调用无任何效果无需额外判断设备。四、注意事项颜色值建议与页面顶部导航栏颜色一致保证视觉统一。Safari iOS 对地址栏颜色支持有限部分颜色可能被系统调整。避免使用过于鲜艳的颜色影响地址栏文字可读性浏览器会自动切换文字颜色为黑 / 白。五、实战示例页面切换时改颜色在路由守卫中根据页面动态设置地址栏颜色// src/router/index.js import { AddressbarColor } from quasar router.beforeEach((to, from, next) { // 不同页面设置不同颜色 if (to.path /home) { AddressbarColor.set(#1976d2) // 蓝色 } else if (to.path /about) { AddressbarColor.set(#4caf50) // 绿色 } next() })Quasar App Fullscreen 插件教程Quasar CLI 版一、插件介绍App Fullscreen 插件用于管理浏览器 / 设备的全屏模式支持进入 / 退出全屏、监听全屏状态变化、指定元素全屏显示兼容桌面端与移动端部分移动端浏览器限制需用户交互触发。二、安装与启用Quasar CLI 必看1. 启用插件Quasar CLI 项目中插件内置无需额外安装直接在quasar.config.js中注册// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [ AppFullscreen // 启用 AppFullscreen 插件 ] } } }2. 导入插件组件内使用在需要控制全屏的 Vue 组件中导入import { AppFullscreen } from quasar三、核心 API文档原生方法 / 属性1. 基础方法方法名作用参数返回值AppFullscreen.request([target])进入全屏模式target可选指定全屏元素DOM 元素 / 组件 ref默认整个页面PromiseBoolean成功返回 true失败 falseAppFullscreen.exit()退出全屏模式无PromiseBooleanAppFullscreen.toggle([target])切换全屏状态进 / 出target可选同 requestPromiseBoolean2. 状态与事件成员作用AppFullscreen.isActive布尔值当前是否处于全屏模式响应式AppFullscreen.on(change, handler)监听全屏状态变化handler 接收参数isActive布尔值AppFullscreen.off(change, handler)移除全屏状态监听四、基础使用示例文档同步场景场景 1整个页面全屏切换!-- src/pages/FullscreenPage.vue -- template q-page h1全屏测试页面 label切换全屏/h1 q-btn clicktoggleFullscreen :labelAppFullscreen.isActive ? 退出全屏 : 进入全屏 / /q-page /template script setup import { AppFullscreen } from quasar // 切换全屏状态 const toggleFullscreen async () { const success await AppFullscreen.toggle() if (!success) { console.log(全屏切换失败可能被浏览器阻止) } } /script场景 2指定元素全屏显示template q-page !-- 目标元素 -- div refvideoContainer stylewidth: 100%; height: 500px; background: #000; !-- 示例视频元素 -- video srcdemo.mp4 controls/video /div q-btn label让视频容器全屏 clickelementFullscreen / /q-page /template script setup import { ref } from vue import { AppFullscreen } from quasar const videoContainer ref(null) // 指定元素全屏 const elementFullscreen async () { // 传入 DOM 元素通过 ref 获取 const success await AppFullscreen.request(videoContainer.value) if (!success) { console.log(元素全屏失败) } } /script五、文档关键注意事项原文同步触发限制浏览器要求全屏操作必须由用户交互如点击按钮触发无法通过代码自动执行如页面加载时直接全屏移动端兼容部分移动端浏览器如 iOS Safari不支持指定元素全屏仅支持整个页面全屏权限问题如果页面嵌入在 iframe 中需给 iframe 添加allowfullscreen属性才能使用全屏功能响应式状态AppFullscreen.isActive是响应式属性可直接在模板中绑定如示例 1 中动态修改按钮文字错误处理所有异步方法返回 Promise需通过await或.then()处理成功 / 失败状态避免静默失败。六、高级场景文档拓展示例场景全屏时隐藏导航栏退出时显示template q-layout !-- 导航栏全屏时隐藏 -- q-header v-show!AppFullscreen.isActive q-toolbar q-toolbar-title普通模式标题/q-toolbar-title /q-toolbar /q-header q-page-container q-page q-btn clicktoggleFullscreen label切换全屏 / /q-page /q-page-container /q-layout /template script setup import { AppFullscreen } from quasar const toggleFullscreen () { AppFullscreen.toggle() } /script七、调试与验证运行 Quasar 开发服务quasar dev点击触发全屏的按钮验证是否进入全屏桌面端按 F11 可对比移动端需在真实设备测试检查控制台是否有失败日志如浏览器阻止全屏时的提示。Quasar App Visibility 插件教程Quasar CLI 版一、插件介绍App Visibility 插件用于监听应用 / 页面的可见性状态如用户切换标签页、最小化浏览器、锁屏等导致页面隐藏 / 显示支持全局监听与响应式状态获取兼容桌面端和移动端。核心作用判断页面是否处于 “活跃可见状态”可用于暂停 / 恢复视频播放、停止 / 启动定时器、统计用户活跃时长等场景。二、安装与启用Quasar CLI 必看1. 启用插件Quasar CLI 项目中插件内置无需额外安装直接在quasar.config.js中注册// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [ AppVisibility // 启用 AppVisibility 插件 ] } } }2. 导入插件组件内使用在需要监听页面可见性的 Vue 组件中导入import { AppVisibility } from quasar三、核心 API文档原生属性 / 方法1. 响应式状态属性名类型作用AppVisibility.appVisibleBoolean响应式当前页面是否可见活跃-true页面在前台、可见用户当前查看的标签页-false页面在后台切换标签、最小化、锁屏等2. 事件监听方法作用参数说明AppVisibility.on(visibility-change, handler)监听页面可见性变化handler回调函数接收参数-isVisibleBoolean当前是否可见-event原生事件对象浏览器原生 visibilitychange 事件AppVisibility.off(visibility-change, handler)移除可见性变化监听需传入之前绑定的同一个handler函数四、基础使用示例文档同步场景场景 1响应式绑定状态模板中直接使用!-- src/pages/VisibilityPage.vue -- template q-page div当前页面状态{{ AppVisibility.appVisible ? 可见前台 : 隐藏后台 }}/div !-- 示例页面隐藏时暂停视频 -- video refvideoRef srcdemo.mp4 controls :autoplayAppVisibility.appVisible /video /q-page /template script setup import { AppVisibility } from quasar /script场景 2监听可见性变化业务逻辑处理template q-page q-btn label模拟启动定时器 clickstartTimer / div定时器计数{{ count }}/div /q-page /template script setup import { ref, onMounted, onUnmounted } from vue import { AppVisibility } from quasar const count ref(0) let timer null // 启动定时器 const startTimer () { if (timer) clearInterval(timer) timer setInterval(() { // 仅页面可见时计数 if (AppVisibility.appVisible) { count.value } }, 1000) } // 定义可见性变化处理器 const handleVisibilityChange (isVisible) { console.log(页面可见性变化, isVisible ? 进入前台 : 进入后台) // 示例页面隐藏时清除定时器显示时重启 if (!isVisible timer) { clearInterval(timer) timer null } else if (isVisible !timer) { startTimer() } } // 挂载时绑定监听卸载时移除 onMounted(() { AppVisibility.on(visibility-change, handleVisibilityChange) }) onUnmounted(() { AppVisibility.off(visibility-change, handleVisibilityChange) if (timer) clearInterval(timer) }) /script场景 3全局监听入口文件中使用在src/main.js中全局监听页面可见性用于全局业务控制// src/main.js import { createApp } from vue import { Quasar, AppVisibility } from quasar import App from ./App.vue const app createApp(App) app.use(Quasar, { plugins: { AppVisibility } }) // 全局监听页面可见性 AppVisibility.on(visibility-change, (isVisible) { if (!isVisible) { console.log(应用进入后台暂停所有异步任务) // 全局暂停逻辑如停止轮询、暂停音频播放等 } else { console.log(应用回到前台恢复异步任务) // 全局恢复逻辑 } }) app.mount(#app)五、文档关键注意事项原文同步触发场景以下操作会触发可见性变化切换浏览器标签页当前标签隐藏 / 显示最小化 / 还原浏览器窗口设备锁屏 / 解锁移动端 / 桌面端切换到其他应用移动端兼容性支持所有现代浏览器Chrome、Firefox、Safari、Edge 等无 IE 支持响应式特性AppVisibility.appVisible是响应式属性可直接在 Vue 模板或响应式逻辑如 watch中使用监听清理使用AppVisibility.off()移除监听时必须传入与绑定相同的handler函数避免内存泄漏移动端特殊部分移动端浏览器在应用后台时JavaScript 执行可能被节流如定时器延迟依赖可见性判断可优化体验。六、高级场景文档拓展示例场景页面隐藏时暂停 API 轮询显示时恢复script setup import { ref, onMounted, onUnmounted } from vue import { AppVisibility, useQuasar } from quasar const $q useQuasar() let pollInterval null // 模拟 API 轮询函数 const fetchData async () { try { const res await fetch(/api/data) const data await res.json() console.log(轮询获取数据, data) } catch (err) { $q.notify({ type: negative, message: 轮询失败 }) } } // 可见性变化处理 const handleVisibility (isVisible) { if (isVisible) { // 恢复轮询每5秒一次 pollInterval setInterval(fetchData, 5000) // 立即获取一次数据 fetchData() } else { // 暂停轮询 clearInterval(pollInterval) pollInterval null } } onMounted(() { // 初始可见时启动轮询 if (AppVisibility.appVisible) { pollInterval setInterval(fetchData, 5000) } // 绑定监听 AppVisibility.on(visibility-change, handleVisibility) }) onUnmounted(() { AppVisibility.off(visibility-change, handleVisibility) clearInterval(pollInterval) }) /script七、调试与验证运行 Quasar 开发服务quasar dev验证场景切换浏览器标签页查看控制台日志是否触发可见性变化最小化浏览器窗口检查定时器 / 轮询是否暂停移动端测试切换到其他应用后返回验证业务逻辑是否恢复。Quasar BottomSheet底部对话框插件核心总结一、核心定位BottomSheet 是从屏幕底部向上滑动的对话框插件用于展示操作选项替代部分菜单场景不支持导航功能。它始终悬浮于所有组件上方触发后背景变暗聚焦选项需手动关闭才能操作底层内容。二、安装启用Quasar CLI无需额外安装在quasar.config.js中注册即可// quasar.config.js module.exports { framework: { plugins: [BottomSheet] // 启用插件 } }三、核心用法1. 调用方式组件外使用导入BottomSheet直接调用create方法组件内使用通过useQuasar获取$q实例调用$q.bottomSheet()均返回操作对象支持后续控制2. 展示形式支持两种核心布局适配不同场景列表形式List BottomSheet适合展示带描述的选项网格形式Grid BottomSheet适合图标化、简洁的选项集合3. 附加特性支持深色模式Dark mode可搭配图标、头像增强视觉效果快捷键支持桌面端按 ESC 键关闭Cordova 应用按设备后退按钮自动关闭Quasar Cookies 插件教程Quasar CLI 版一、插件介绍Cookies 插件是对浏览器document.cookie的友好封装提供简洁的 API 实现 Cookie 的增、删、改、查支持设置过期时间、路径、域、安全标志等参数兼容所有现代浏览器。核心优势无需手动拼接 Cookie 字符串通过对象参数配置即可完成复杂操作内置过期时间格式化支持天数、日期对象等。二、安装与启用Quasar CLI 必看1. 启用插件Quasar CLI 项目中插件内置无需额外安装直接在quasar.config.js中注册// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [ Cookies // 启用 Cookies 插件 ] } } }2. 导入插件组件内使用在需要操作 Cookie 的 Vue 组件中导入import { Cookies } from quasar三、核心 API文档原生方法 / 参数1. 基础操作方法方法名作用参数说明返回值Cookies.set(name, value, [options])设置 Cookie-nameCookie 名称String-valueCookie 值任意类型会自动序列化-options可选配置对象见下方无Cookies.get(name)获取单个 CookienameCookie 名称Cookie 值自动反序列化无则返回nullCookies.get()获取所有 Cookie无对象键Cookie 名称值Cookie 值Cookies.remove(name, [options])删除 Cookie-nameCookie 名称-options可选需与设置时的path/domain一致无Cookies.has(name)判断 Cookie 是否存在nameCookie 名称Boolean存在返回trueCookies.clear([options])清除所有 Cookieoptions可选path/domain过滤无2.options配置对象设置 / 删除时配置项类型默认值说明expiresNumber/Dayjs/Date-过期时间- Number天数如7表示 7 天后过期- Dayjs/Date具体过期日期pathString/Cookie 生效路径如/admin仅管理员页面生效domainString-Cookie 生效域名如.example.com支持子域名secureBooleanfalse是否仅在 HTTPS 下传输sameSiteStringLax跨站请求策略Strict/Lax/NonehttpOnlyBooleanfalse是否禁止 JavaScript 访问仅服务端可读写四、基础使用示例文档同步场景场景 1设置与获取 Cookie!-- src/pages/CookiesPage.vue -- template q-page q-btn label设置用户信息 Cookie clicksetUserCookie / q-btn label获取用户信息 Cookie clickgetUserCookie / div用户 Cookie{{ userCookie }}/div /q-page /template script setup import { ref } from vue import { Cookies } from quasar const userCookie ref(null) // 设置 Cookie7 天后过期仅 HTTPS 下传输 const setUserCookie () { Cookies.set(user_info, { id: 1, name: 张三 }, { expires: 7, // 7 天过期 secure: process.env.NODE_ENV production, // 生产环境启用 secure sameSite: Lax }) } // 获取 Cookie const getUserCookie () { userCookie.value Cookies.get(user_info) } /script场景 2删除 Cookie 与判断存在性template q-page q-btn label删除用户 Cookie clickremoveUserCookie / q-btn label检查 Cookie 是否存在 clickcheckCookieExists / divCookie 存在状态{{ cookieExists }}/div /q-page /template script setup import { ref } from vue import { Cookies } from quasar const cookieExists ref(false) // 删除 Cookie需与设置时的 path/domain 一致 const removeUserCookie () { Cookies.remove(user_info, { path: / // 必须与设置时的 path 一致默认 / }) } // 检查 Cookie 存在性 const checkCookieExists () { cookieExists.value Cookies.has(user_info) } /script场景 3清除所有 Cookie 与批量操作五、文档关键注意事项原文同步值序列化Cookies.set()会自动将非字符串值对象、数组等序列化为 JSON 字符串Cookies.get()会自动反序列化无需手动处理过期时间传入 Number 表示 “从现在开始的天数”如1表示 1 天后过期传入 Date/Dayjs 对象表示具体过期时间如new Date(2025-12-31)不设置expires则为会话 Cookie浏览器关闭后失效删除 Cookie 注意事项删除时必须保证path/domain与设置时完全一致否则删除失败若设置了secure: true仅能在 HTTPS 环境下删除httpOnly 限制若设置httpOnly: trueJavaScript 无法访问该 CookieCookies.get()返回null仅服务端可操作跨域 Cookiedomain配置需符合浏览器跨域规则如不能设置非当前域名的域sameSite: None需配合secure: true服务端渲染SSR在 SSR 环境中Cookies 插件会自动适配服务端上下文无需额外配置。六、高级场景文档拓展示例场景设置永久 Cookie10 年过期// 设置 10 年过期的 Cookie Cookies.set(token, abc123, { expires: 365 * 10, // 10 年 3650 天 path: /, secure: true, sameSite: Strict })场景按域名设置 Cookie支持子域名// 使 Cookie 在 example.com 及其所有子域名如 a.example.com生效 Cookies.set(global_setting, dark_mode, { domain: .example.com, // 注意前缀点号 expires: 30 })七、调试与验证运行 Quasar 开发服务quasar dev打开浏览器开发者工具F12→ Application → Cookies → 查看当前域名下的 Cookie 列表验证操作设置 Cookie 后刷新页面检查是否存在删除后检查是否消失。Quasar Dark暗色模式插件核心总结一、核心作用快速实现应用的暗色 / 浅色模式切换自动适配 Quasar 内置组件样式支持手动控制、自动适配系统主题无需额外编写大量样式代码。二、安装说明插件已内置在 Quasar 框架中无需手动安装启用可直接在项目中使用。三、核心 API 与用法1. 状态获取组件内通过useQuasar()获取$q.dark可访问$q.dark.isActive布尔值当前是否为暗色模式、$q.dark.mode配置状态auto/true/false。组件外非 SSR导入Dark直接访问Dark.isActive、Dark.modeSSR 环境下此方式无效。2. 模式设置组件内$q.dark.set(val)val支持true强制暗色、false强制浅色、auto适配系统主题也可通过$q.dark.toggle()切换模式。组件外非 SSRDark.set(val)或Dark.toggle()。全局配置quasar.config.js在framework.config.dark中设置默认值auto/true/false。SSR 环境建议在src/App.vue中通过$q.dark.set(val)设置避免使用组件外导入方式。3. 状态监听通过 Vue 的watch监听$q.dark.isActive变化触发模式切换后的业务逻辑如修改自定义样式、保存用户偏好。四、关键注意事项禁止手动给$q.dark.isActive或$q.dark.mode赋值必须使用set()方法修改状态。SSR 环境建议避免设置为auto否则可能出现客户端接管后主题闪烁SSR 无法推断客户端主题偏好。组件外导入Dark仅适用于非 SSR 构建SSR 环境需通过组件内$q.dark或全局配置设置。Quasar Dialog 插件教程Quasar CLI 版一、插件介绍Dialog 插件用于创建各种类型的弹窗提示框、确认框、自定义弹窗等替代浏览器原生alert/confirm/prompt支持自定义样式、按钮、内容兼容桌面端与移动端始终悬浮于应用顶层。二、安装与启用Quasar CLI 必看插件内置无需额外安装直接在quasar.config.js中注册启用// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [ Dialog // 启用 Dialog 插件 ] } } }三、核心使用方式1. 基础调用组件内通过useQuasar()获取$q.dialog实例调用支持预定义弹窗Alert/Confirm/Prompt和自定义弹窗script setup import { useQuasar } from quasar const $q useQuasar() /script2. 预定义弹窗类型文档原生1Alert 提示框仅确认按钮// 基础用法 $q.dialog({ title: 提示, message: 操作成功, ok: { label: 确定, color: primary } }).onOk(() { console.log(用户点击确定) }) // 简化版仅消息 $q.dialog.alert(操作失败请重试)2Confirm 确认框确认 取消按钮// 基础用法 $q.dialog({ title: 确认删除, message: 是否确定删除该数据删除后不可恢复, ok: { label: 删除, color: negative }, cancel: { label: 取消, color: grey } }).onOk(() { console.log(用户确认删除) }).onCancel(() { console.log(用户取消删除) }) // 简化版 $q.dialog.confirm(是否退出登录) .then(() console.log(确认退出)) .catch(() console.log(取消退出))3Prompt 输入框带输入的确认框$q.dialog({ title: 修改昵称, message: 请输入新的昵称, prompt: { model: , // 输入框初始值 type: text, // 输入框类型text/number/email等 placeholder: 请输入昵称 }, ok: { label: 保存 }, cancel: { label: 取消 } }).onOk((data) { console.log(用户输入的昵称, data) // data 为输入框值 }) // 简化版 $q.dialog.prompt(请输入验证码) .then((code) console.log(验证码, code)) .catch(() console.log(取消输入))3. 自定义弹窗文档核心特性支持自定义内容、按钮、样式甚至嵌入 Quasar 组件$q.dialog({ title: 自定义弹窗, // 自定义内容支持 HTML 或 Vue 组件 message: div stylepadding: 16px; q-input v-modelform.phone label手机号 typetel/q-input q-input v-modelform.code label验证码 typenumber stylemargin-top: 12px;/q-input /div , // 传递数据到弹窗内 form: { phone: , code: }, // 自定义按钮 buttons: [ { label: 取消, color: grey, handler: () {} }, { label: 提交, color: primary, handler: (data) { console.log(提交的数据, data.form) // 可返回 Promise 实现异步验证 return new Promise((resolve) { setTimeout(() { if (data.form.phone) resolve() else $q.notify({ type: negative, message: 手机号不能为空 }) }, 500) }) } } ], // 其他配置 persistent: true, // 点击外部不关闭弹窗 maximized: false, // 是否最大化弹窗 fullWidth: true, // 全屏宽度移动端 breakpoint: sm // 响应式断点sm/md/lg })4. 弹窗关闭与回调文档细节onOk(callback)点击确认按钮触发onCancel(callback)点击取消 / 关闭按钮触发onDismiss(callback)弹窗关闭时触发无论哪种方式手动关闭const dialogInstance $q.dialog({...}); dialogInstance.hide()四、核心配置项文档完整参数配置项类型默认值说明titleString-弹窗标题messageString/Vue 组件-弹窗内容支持 HTML 或组件okObject/Boolean{ label: OK, color: primary }确认按钮配置false 隐藏cancelObject/Boolean{ label: Cancel, color: grey }取消按钮配置false 隐藏promptObject/Booleanfalse输入框配置见 Prompt 示例persistentBooleanfalse点击外部 / 按 ESC 是否关闭弹窗fullWidthBooleanfalse是否全屏宽度移动端生效maximizedBooleanfalse是否最大化弹窗breakpointStringmd响应式断点sm/md/lg/xlstyleObject/String-弹窗自定义样式classString-弹窗自定义类名五、文档关键注意事项异步处理按钮 handler 可返回 Promise弹窗会等待 Promise 完成后再关闭用于异步验证Vue 组件嵌入自定义弹窗内容支持嵌入 Quasar 组件但需确保组件已全局注册或通过components配置响应式适配breakpoint配置可控制弹窗在不同屏幕尺寸下的显示方式如移动端全屏ESC 键关闭仅当persistent: false时按 ESC 键可关闭弹窗组件外调用非组件环境如工具函数可直接导入Dialog调用import { Dialog } from quasar Dialog.alert(全局提示)六、实战示例文档拓展示例场景表单提交前确认带异步验证const submitForm () { $q.dialog({ title: 提交确认, message: 是否提交当前表单数据, ok: { label: 提交, color: primary }, cancel: { label: 取消 }, persistent: true }).onOk(async () { try { await api.submitForm(formData) $q.notify({ type: positive, message: 提交成功 }) } catch (err) { $q.notify({ type: negative, message: 提交失败 err.message }) } }) }Quasar Loading 插件教程Quasar CLI 版一、插件介绍Loading 插件用于创建全局加载遮罩全屏 / 局部替代手动编写加载动画支持自定义样式、文案、图标适配异步操作如接口请求的加载状态提示兼容桌面端与移动端。二、安装与启用Quasar CLI 必看插件内置无需额外安装直接在quasar.config.js中注册启用// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [ Loading // 启用 Loading 插件 ] } } }三、核心使用方式1. 全局 Loading全屏遮罩1基础调用组件内通过useQuasar()获取$q.loading实例支持show()/hide()控制显示 / 隐藏script setup import { useQuasar } from quasar const $q useQuasar() // 显示全局 Loading const showLoading () { $q.loading.show({ message: 加载中..., // 加载文案 spinner: dots, // 加载动画类型见文档支持的 spinner 类型 backgroundColor: rgba(0, 0, 0, 0.7), // 背景遮罩颜色 spinnerColor: white // 动画颜色 }) } // 隐藏全局 Loading const hideLoading () { $q.loading.hide() } // 示例模拟接口请求 const fetchData async () { showLoading() try { await new Promise(resolve setTimeout(resolve, 2000)) // 模拟异步请求 console.log(数据加载完成) } finally { hideLoading() // 无论成功失败都隐藏 Loading } } /script2简化调用直接传文案// 仅显示文案使用默认配置 $q.loading.show(正在提交...)3组件外调用全局工具在非组件文件如 api 封装文件中直接导入Loading// src/utils/api.js import { Loading } from quasar // 显示 Loading Loading.show({ message: 请求中... }) // 隐藏 Loading Loading.hide()2. 局部 Loading指定元素遮罩通过$q.loading.show()的target参数指定遮罩元素需传入 DOM 元素或组件 reftemplate div refcontainerRef stylewidth: 500px; height: 300px; border: 1px solid #eee; !-- 需加载的内容 -- div v-ifdata加载完成{{ data }}/div /div q-btn label加载局部内容 clickloadPartialData / /template script setup import { ref } from vue import { useQuasar } from quasar const $q useQuasar() const containerRef ref(null) const data ref(null) const loadPartialData async () { // 仅遮罩指定元素 $q.loading.show({ target: containerRef.value, // 目标元素 message: 局部加载中..., spinner: audio }) try { await new Promise(resolve setTimeout(resolve, 1500)) data.value 局部内容加载完成 } finally { $q.loading.hide() } } /script3. 配置项详解文档完整参数配置项类型默认值说明messageString加载文案空则不显示spinnerStringq-spinner-default加载动画类型支持 dots/audio/grid 等见 Quasar Spinner 组件spinnerSizeNumber/String40px动画尺寸如 30/30px/2remspinnerColorStringcurrentColor动画颜色支持 Hex/RGB/Quasar 调色板backgroundColorStringrgba(0, 0, 0, 0.5)背景遮罩颜色messageColorStringwhite文案颜色targetHTMLElementnull局部 Loading 目标元素null 为全屏delayNumber0延迟显示毫秒避免短时间加载闪烁如设为 300timeoutNumber0自动隐藏超时毫秒0 表示不自动隐藏四、关键特性文档原文单例模式全局 Loading 为单例多次调用show()只会更新配置不会重复显示hide()只需调用一次即可隐藏。延迟显示通过delay参数避免短时间异步操作导致的 Loading 闪烁如接口请求 100ms 完成无需显示 Loading。自动清理hide()会自动清理所有配置无需手动重置。SSR 兼容插件完全支持服务端渲染无需额外配置。五、注意事项文档同步局部 Loading 目标target必须是真实 DOM 元素不能直接传组件实例需通过 ref 获取 DOM。异步操作安全建议在finally块中调用hide()避免异步操作失败导致 Loading 一直显示。样式优先级自定义颜色需使用 RGBA 确保透明度避免遮罩遮挡内容不明显。Spinner 类型支持所有 Quasar Spinner 组件名称如q-spinner-dots可简写为dots完整列表见 Quasar 官方文档。六、高级场景文档拓展示例场景 1带超时的 Loading防止无限加载$q.loading.show({ message: 请求超时测试, timeout: 5000, // 5 秒后自动隐藏 onTimeout: () { $q.notify({ type: negative, message: 请求超时请重试 }) } })场景 2延迟显示 Loading避免闪烁$q.loading.show({ message: 加载中..., delay: 300 // 300ms 后仍未隐藏才显示 })Quasar LoadingBar 插件核心总结一、核心定位LoadingBar 插件是 QAjaxBar 组件的简化封装用于快速实现顶部 / 底部加载进度条适配 Ajax 请求、路由切换等场景无需手动编写进度条逻辑支持自动监听或手动控制。二、安装启用Quasar CLI插件内置在quasar.config.js中注册即可// quasar.config.js module.exports { framework: { plugins: [LoadingBar], // 启用插件 config: { loadingBar: { /* 全局默认配置 */ } // 可选设置默认样式 } } }UMD 版本默认启用若需禁用监听 Ajax 流量可配置loadingBar: { skipHijack: true }。三、核心用法1. 基础控制方法方法名作用适用场景start()启动进度条从 0 开始加载发起 Ajax 请求、路由跳转前stop()结束进度条直接完成到 100%请求完成、路由切换结束increment(value)手动更新进度value 为 0-100 数值分步加载、自定义进度逻辑setDefaults(options)设置全局默认配置统一进度条样式、过滤规则2. 调用方式组件内通过useQuasar()获取$q.loadingBar调用import { useQuasar } from quasar const $q useQuasar() $q.loadingBar.start() // 启动 $q.loadingBar.stop() // 结束组件外含启动文件直接导入LoadingBar调用import { LoadingBar } from quasar LoadingBar.start() LoadingBar.increment(50) // 进度更新到 50%3. 关键配置支持所有 QAjaxBar 属性通过setDefaults()或全局配置设置核心配置项color进度条颜色如purple、#ff0000size进度条高度如15px、2remposition显示位置top/bottom默认顶部hijackFilter(url)Ajax 过滤函数返回布尔值控制是否对该 URL 触发进度条v2.4.5。四、核心特性自动监听默认监听全局 Ajax 流量无需手动调用start()/stop()灵活过滤通过hijackFilter配置仅对指定 URL 触发进度条全局统一支持全局设置默认样式无需重复配置手动控制支持分步更新进度适配复杂加载场景。五、注意事项配置优先级局部调用时的配置会覆盖全局默认配置UMD 版本默认启用所有插件禁用 Ajax 监听需配置skipHijack: true进度条逻辑start()后需调用stop()结束否则进度条会一直停留。Quasar WebStorage 插件教程Quasar CLI 版一、插件介绍WebStorage 插件是对浏览器localStorage/sessionStorage的友好封装提供统一的 API 实现数据的增、删、改、查支持自动序列化 / 反序列化复杂数据对象、数组兼容所有现代浏览器且无需手动处理存储异常。localStorage持久化存储除非手动删除否则永久保存sessionStorage会话存储浏览器标签页关闭后失效。二、安装与启用Quasar CLI 必看插件内置无需额外安装直接在quasar.config.js中注册启用// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [ LocalStorage,SessionStorage // 启用 WebStorage 插件 ] } } }三、核心 API文档原生方法1. 导入方式组件内 / 组件外均可通过以下方式导入对应存储对象import { LocalStorage, SessionStorage } from quasar2. 通用方法LocalStorage/SessionStorage 完全一致方法名作用参数说明返回值set(key, value)存储数据-key存储键名String-value任意类型自动序列化为 JSON无get(key, [defaultValue])获取数据-key存储键名-defaultValue可选键不存在时返回的默认值反序列化后的数据无则返回defaultValue或nullremove(key)删除指定键key存储键名无clear()清空所有存储无无has(key)判断键是否存在key存储键名Boolean存在返回truegetKeys()获取所有键名无数组所有存储的键名getLength()获取存储项数量无Number存储项个数setJson(key, value)显式存储 JSON 数据同set同set无getJson(key, [defaultValue])显式获取 JSON 数据同get同get同get四、基础使用示例文档同步场景场景 1LocalStorage 持久化存储用户偏好!-- src/pages/StoragePage.vue -- template q-page q-btn label保存用户偏好 clicksaveUserPref / q-btn label获取用户偏好 clickgetUserPref / div用户偏好{{ userPref }}/div /q-page /template script setup import { ref } from vue import { LocalStorage } from quasar const userPref ref(null) // 保存复杂数据对象 const saveUserPref () { LocalStorage.set(user_preference, { theme: dark, fontSize: 16, notifications: true }) } // 获取数据带默认值 const getUserPref () { userPref.value LocalStorage.get(user_preference, { theme: light, fontSize: 14 }) } /script场景 2SessionStorage 临时存储表单数据template q-page q-input v-modelform.name label姓名 / q-input v-modelform.age typenumber label年龄 / q-btn label临时保存表单 clicksaveFormTemp / q-btn label恢复表单数据 clickrestoreForm / /q-page /template script setup import { ref } from vue import { SessionStorage } from quasar const form ref({ name: , age: }) // 临时保存表单标签页关闭后失效 const saveFormTemp () { SessionStorage.set(temp_form, form.value) } // 恢复表单数据 const restoreForm () { const tempData SessionStorage.get(temp_form) if (tempData) form.value tempData } /script场景 3批量操作与判断import { LocalStorage } from quasar // 判断键是否存在 if (LocalStorage.has(token)) { console.log(Token 已存储) } // 获取所有键名 const allKeys LocalStorage.getKeys() console.log(所有存储键, allKeys) // 删除指定键 LocalStorage.remove(temp_data) // 清空所有 LocalStorage LocalStorage.clear()五、文档关键特性与注意事项1. 核心特性自动序列化存储对象、数组时自动转为 JSON 字符串获取时自动反序列化无需手动JSON.stringify()/JSON.parse()异常处理封装了浏览器存储配额不足、权限拒绝等异常避免代码崩溃类型安全获取数据时可指定默认值确保返回类型一致API 统一LocalStorage与SessionStorage方法完全一致切换存储方式仅需修改导入对象。2. 注意事项存储大小限制浏览器对localStorage/sessionStorage有大小限制通常 5MB 左右避免存储大文件或大量数据数据类型不支持存储Function、Symbol等类型此类数据会被自动忽略跨域限制localStorage/sessionStorage遵循同源策略不同域名无法共享数据SSR 兼容在服务端渲染SSR环境中需确保仅在客户端调用 WebStorage 方法可通过process.client判断setJson/getJson与set/get功能完全一致仅为语义化别名无额外差异。六、高级场景文档拓展示例场景 1SSR 环境下安全使用import { LocalStorage, process } from quasar // 仅在客户端执行存储操作 if (process.client) { LocalStorage.set(client_data, 仅客户端存储) }场景 2存储过期逻辑手动实现import { LocalStorage } from quasar // 存储带过期时间的数据 const setWithExpiry (key, value, expiryHours) { const data { value, expiry: Date.now() expiryHours * 3600000 // 过期时间戳小时转毫秒 } LocalStorage.set(key, data) } // 获取带过期时间的数据 const getWithExpiry (key) { const data LocalStorage.get(key) if (!data) return null // 检查是否过期 if (Date.now() data.expiry) { LocalStorage.remove(key) return null } return data.value } // 使用示例存储 2 小时后过期的 token setWithExpiry(temp_token, abc123, 2) const token getWithExpiry(temp_token) // 未过期返回 token过期返回 nullQuasar Meta 插件核心总结一、核心作用专门用于动态管理页面元信息优化 SEO 效果支持修改页面标题、meta标签、html/body属性以及添加 / 删除文档头部的style/script/noscript标签适配 SSR服务器端渲染和 SPA单页应用尤其在 SSR 中能让元信息由服务器直接提供提升 SEO 表现。二、安装启用Quasar CLI插件内置在quasar.config.js中注册即可// quasar.config.js module.exports { framework: { plugins: [Meta] // 启用 Meta 插件 } }三、核心用法1. 基础配置组件内静态配置在 Vue 组件中通过meta属性定义静态元信息支持多类型配置export default { meta: { // 页面标题相关 title: 首页, // 基础标题 titleTemplate: title ${title} - 我的网站, // 标题模板最终显示“首页 - 我的网站” // meta 标签name/http-equiv 类型 meta: { description: { name: description, content: 这是网站首页提供优质内容 }, keywords: { name: keywords, content: Quasar,Meta,SEO }, contentType: { http-equiv: Content-Type, content: text/html; charsetUTF-8 } }, // 外部资源链接如字体、样式表 link: { materialIcons: { rel: stylesheet, href: https://fonts.googleapis.com/icon?familyMaterialIcons } }, // 脚本标签如 JSON-LD 结构化数据 script: { ldJson: { type: application/ldjson, innerHTML: { context: http://schema.org } } }, // html 标签属性 htmlAttr: { xmlns:cc: http://creativecommons.org/ns# }, // body 标签属性 bodyAttr: { action-scope: xyz }, // noscript 标签无 JS 时显示 noscript: { default: 您的浏览器不支持 JavaScript请开启后访问 } } }2. 动态配置绑定组件状态meta可设为函数绑定组件内数据数据变化时自动更新元信息export default { data() { return { pageDesc: 初始描述 } }, // 动态绑定依赖组件状态 meta() { return { title: this.pageDesc, meta: { description: { name: description, content: this.pageDesc } } } }, methods: { updateDesc() { this.pageDesc 更新后的页面描述 // 触发元信息自动更新 } } }3. 配置覆盖规则元信息按组件渲染链顺序如 App.vue → 布局组件 → 页面组件叠加后续组件可通过相同键名覆盖前序组件的配置// 父组件配置 meta: { meta: { desc: { name: description, content: 父组件描述 } } } // 子组件配置覆盖父组件的 desc 键对应的 meta 标签 meta: { meta: { desc: { name: description, content: 子组件描述 } } }四、关键注意事项避免重复配置若src/index.template.html中已有元信息建议删除避免与插件配置冲突若元信息固定不变直接在 HTML 模板中定义更高效。适用场景差异SSR 中使用效果最佳元信息可由服务器直接返回SPA 中元信息在运行时添加SEO 优化效果有限。验证工具部署前建议通过 https://metatags.io/ 验证元信息是否生效。Quasar Notify 插件教程Quasar CLI 版一、插件介绍Notify 插件用于创建轻量级通知提示Toast / 通知栏支持自定义样式、位置、动画、持续时间替代原生alert或自定义弹窗适配桌面端与移动端可快速实现操作反馈、系统提示等场景。二、安装与启用Quasar CLI 必看插件内置无需额外安装直接在quasar.config.js中注册启用// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [ Notify // 启用 Notify 插件 ] } } }三、核心使用方式1. 基础调用组件内通过useQuasar()获取$q.notify实例支持直接传字符串简化版或配置对象完整版script setup import { useQuasar } from quasar const $q useQuasar() // 简化版仅提示文本默认类型为 info $q.notify(操作成功) // 完整版自定义配置 $q.notify({ type: positive, // 通知类型positive/negative/warning/info/ongoing message: 数据保存成功, caption: 2025-12-15 10:00, // 副标题可选 position: top-right, // 显示位置top/top-left/top-right/bottom/bottom-left/bottom-right timeout: 3000, // 自动关闭时间毫秒0 表示永不关闭 actions: [ // 自定义操作按钮可选 { label: 关闭, color: white, handler: () {} } ] }) /script2. 组件外调用全局工具在非组件文件如 api 封装、工具函数中直接导入Notify// src/utils/notify.js import { Notify } from quasar // 全局提示 Notify.create({ type: negative, message: 请求失败请重试 }) // 简化版 Notify.create(全局通知)3. 通知类型与预设样式类型颜色风格适用场景positive绿色成功操作保存、提交、删除成功negative红色失败操作请求失败、参数错误warning黄色警告提示权限不足、数据过期info蓝色普通信息操作提示、系统通知ongoing灰色持续进行中的操作加载中、处理中需手动关闭4. 核心配置项文档完整参数配置项类型默认值说明messageString-通知主文本必填captionString-副标题 / 补充说明typeStringinfo通知类型positive/negative/warning/info/ongoingpositionStringtop显示位置top/top-left/top-right/bottom/bottom-left/bottom-righttimeoutNumber5000自动关闭时间毫秒0 表示永不关闭actionsArray[]操作按钮配置见下方示例iconString/Object-自定义图标如 warning 或 {name: warning, color: yellow}colorString-自定义背景色覆盖类型默认色支持 Quasar 调色板textColorString-自定义文本颜色multiLineBooleanfalse是否多行显示message 过长时启用closeBtnBoolean/Stringfalse关闭按钮true 显示默认按钮字符串自定义按钮文本progressBooleanfalse显示倒计时进度条仅 timeout 0 时生效actions配置示例actions: [ { label: 详情, // 按钮文本 color: white, // 文本颜色 handler: () { console.log(点击详情按钮) } // 点击事件 }, { label: 关闭, color: white, handler: (notify) { notify.close() } // 手动关闭通知 } ]四、高级功能文档原生特性1. 手动控制通知生命周期// 创建通知实例并手动控制 const notifyInstance $q.notify({ message: 正在处理..., type: ongoing, timeout: 0 // 永不自动关闭 }) // 手动关闭通知 notifyInstance.close() // 更新通知内容v2.14.0 notifyInstance.update({ message: 处理完成, type: positive, timeout: 3000 })2. 全局默认配置在quasar.config.js中设置全局默认值覆盖所有通知的默认配置// quasar.config.js module.exports function (ctx) { return { framework: { plugins: [Notify], config: { notify: { position: bottom-right, timeout: 4000, multiLine: true, progress: true } } } } }3. 自定义通知样式通过color/textColor/icon完全自定义通知外观$q.notify({ message: 自定义样式通知, color: purple-6, // 自定义背景色 textColor: white, icon: { name: star, // Quasar 图标名 color: yellow }, position: bottom })五、关键注意事项文档同步关闭逻辑timeout: 0时通知永不自动关闭需通过actions或手动调用close()关闭图标支持icon支持 Quasar 内置图标如 warning、Material Icons 或自定义 SVG 图标移动端适配position: bottom在移动端体验更佳避免遮挡顶部导航栏多通知叠加同一位置的通知会自动堆叠显示最多同时显示 5 个可通过全局配置调整SSR 兼容插件完全支持服务端渲染无需额外配置。六、实战示例文档拓展示例场景 1表单提交反馈const submitForm async () { try { await api.submitForm(formData) $q.notify({ type: positive, message: 表单提交成功, caption: 将在 3 秒后跳转, progress: true }) setTimeout(() { router.push(/success) }, 3000) } catch (err) { $q.notify({ type: negative, message: 提交失败, caption: err.message, multiLine: true, timeout: 0, actions: [{ label: 关闭, handler: (n) n.close() }] }) } }场景 2持续操作提示手动更新// 开始加载时显示通知 const notify $q.notify({ message: 正在下载文件..., type: ongoing, timeout: 0, progress: false }) // 模拟下载进度更新 const simulateDownload () { let progress 0 const timer setInterval(() { progress 10 if (progress 100) { clearInterval(timer) // 下载完成后更新通知 notify.update({ message: 文件下载完成, type: positive, timeout: 3000 }) } else { notify.update({ message: 正在下载文件...(${progress}%) }) } }, 500) } simulateDownload()实战template div classq-pa-md q-gutter-y-sm column items-center div div classrow q-gutter-sm q-btn round sizesm colorsecondary clickshowNotif(top-left) q-icon namearrow_back classrotate-45 / /q-btn q-btn round sizesm coloraccent clickshowNotif(top) q-icon namearrow_upward / /q-btn q-btn round sizesm colorsecondary clickshowNotif(top-right) q-icon namearrow_upward classrotate-45 / /q-btn /div /div div div classrow q-gutter-sm div q-btn round sizesm coloraccent clickshowNotif(left) q-icon namearrow_back / /q-btn /div div q-btn round sizesm coloraccent clickshowNotif(center) q-icon namefullscreen_exit / /q-btn /div div q-btn round sizesm coloraccent clickshowNotif(right) q-icon namearrow_forward / /q-btn /div /div /div div div classrow q-gutter-sm div q-btn round sizesm colorsecondary clickshowNotif(bottom-left) q-icon namearrow_forward classrotate-135 / /q-btn /div div q-btn round sizesm coloraccent clickshowNotif(bottom) q-icon namearrow_downward / /q-btn /div div q-btn round sizesm colorsecondary clickshowNotif(bottom-right) q-icon namearrow_forward classrotate-45 / /q-btn /div /div /div /div /template script import { useQuasar } from quasar const alerts [ { color: negative, message: Woah! Danger! You are getting good at this!, icon: report_problem }, { message: You need to know about this!, icon: warning }, { message: Wow! Nice job!, icon: thumb_up }, { color: teal, message: Quasar is cool! Right?, icon: tag_faces }, { color: purple, message: Jim just pinged you, avatar: https://cdn.quasar.dev/img/boy-avatar.png }, { multiLine: true, message: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quisquam non ad sit assumenda consequuntur esse inventore officia. Corrupti reiciendis impedit vel, fugit odit quisquam quae porro exercitationem eveniet quasi. } ] export default { setup () { const $q useQuasar() return { showNotif (position) { const { color, textColor, multiLine, icon, message, avatar } alerts[ Math.floor(Math.random(alerts.length) * 10) % alerts.length ] const random Math.random() * 100 const twoActions random 70 const buttonColor color ? white : void 0 $q.notify({ color, textColor, icon: random 30 ? icon : null, message, position, avatar, multiLine, actions: twoActions ? [ { label: Reply, color: buttonColor, handler: () { /* console.log(wooow) */ } }, { label: Dismiss, color: yellow, handler: () { /* console.log(wooow) */ } } ] : (random 40 ? [{ label: Reply, color: buttonColor, handler: () { /* console.log(wooow) */ } }] : null ), timeout: Math.random() * 5000 3000 }) } } } } /script