quasar-skilld

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

quasarframework/quasar

quasar

quasarframework/quasar

quasar

Version: 2.18.6 (Nov 2025) Tags: legacy: 1.22.10 (May 2023), latest: 2.18.6 (Nov 2025)

References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs

**版本：**2.18.6（2025年11月） **标签：**旧版：1.22.10（2023年5月），最新版：2.18.6（2025年11月）

参考资料：文档 — API参考、指南 • GitHub问题 — 缺陷、解决方法、边缘情况 • GitHub讨论 — 问答、模式、实践方案 • 版本发布 — 更新日志、破坏性变更、新API

API Changes

API变更

This section documents version-specific API changes — prioritize recent major/minor releases.

BREAKING:

v-model

-> uses

model-value

@update:model-value

instead of

value

@input

in Vue 3 source

BREAKING:

QDrawer

QDialog

QMenu

QTooltip

-> use

class

and

style

attributes instead of

content-class

content-style

props source

BREAKING:
```
QImg
```
-> completely redesigned, removed
```
transition
```
and
```
basic
```
props; renamed
```
no-default-spinner
```
to
```
no-spinner
```
source

BREAKING:

QScrollArea

-> methods

getScrollPosition

returns

{ top, left }

;

setScrollPosition

and

setScrollPercentage

require

axis

parameter source

BREAKING:
```
QTable
```
-> renamed
```
data
```
prop to
```
rows
```
to avoid TS naming conflicts source
BREAKING:
```
Platform.is
```
-> all boolean properties now explicitly
```
false
```
instead of
```
undefined
```
since v2.17.0 source
BREAKING:
```
colors
```
utils ->
```
getBrand
```
and
```
setBrand
```
replaced by
```
getCssVar
```
and
```
setCssVar
```
respectively source

BREAKING: Scroll utils -> renamed

getScrollPosition

getVerticalScrollPosition

animScrollTo

animVerticalScrollTo

, and

setScrollPosition

setVerticalScrollPosition

source

BREAKING:
```
date
```
utils ->
```
addToDate
```
and
```
subtractFromDate
```
property names normalized (e.g.,
```
year
```
->
```
years
```
,
```
month
```
->
```
months
```
) source
BREAKING:
```
QPopupEdit
```
-> must now use the default slot with
```
v-slot="scope"
```
for performance source
BREAKING:
```
GoBack
```
directive -> removed; use router reference (
```
$router.back()
```
or
```
$router.go(-1)
```
) instead source
NEW:
```
useQuasar
```
composable -> primary method for accessing the
```
$q
```
object within Composition API components
NEW:
```
useMeta
```
composable -> new way to define meta tags, replacing the now deprecated
```
meta
```
component property source

NEW:

QTable

props -> added

table-row-style-fn

table-row-class-fn

grid-style-fn

, and

grid-class-fn

in v2.18.0 source

Also changed:

useFormChild()

new composable ·

QOptionsGroup

props

option-value

option-label

option-disable

new v2.17.0 ·

QUploader

prop

thumbnail-fit

new v2.17.0 ·

QSelect

prop

disable-tab-select

new v2.17.0 ·

QMenu

QBtnDropdown

no-esc-dismiss

new v2.18.0 ·

evt.qAvoidFocus

new flag v2.18.0 ·

QDate

model-value no longer contains

changed

prop ·

QPagination

prop

gutter

new ·

QImg

props

loading

crossorigin

fit

new ·

Dialog

plugin custom component props moved to

componentProps

Loading

plugin uses

html: true

for HTML content instead of

sanitize

App.vue

wrapper

<div id="q-app">

removed ·

.sync

modifier replaced by

v-model:propName

本部分记录特定版本的API变更 —— 优先关注近期的主要/次要版本更新。

破坏性变更：在Vue 3中，
```
v-model
```
改为使用
```
model-value
```
+
```
@update:model-value
```
，替代原有的
```
value
```
+
```
@input
```
来源
破坏性变更：
```
QDrawer
```
/
```
QDialog
```
/
```
QMenu
```
/
```
QTooltip
```
—— 改为使用
```
class
```
和
```
style
```
属性，替代原有的
```
content-class
```
/
```
content-style
```
属性来源
破坏性变更：
```
QImg
```
—— 完全重新设计，移除了
```
transition
```
和
```
basic
```
属性；将
```
no-default-spinner
```
重命名为
```
no-spinner
```
来源

破坏性变更：

QScrollArea

—— 方法

getScrollPosition

{ top, left }

；

setScrollPosition

和

setScrollPercentage

需要

axis

参数来源

破坏性变更：
```
QTable
```
—— 将
```
data
```
属性重命名为
```
rows
```
，以避免TS命名冲突来源
破坏性变更：
```
Platform.is
```
—— 自v2.17.0起，所有布尔属性现在显式为
```
false
```
，而非
```
undefined
```
来源
破坏性变更：
```
colors
```
工具函数 ——
```
getBrand
```
和
```
setBrand
```
分别被
```
getCssVar
```
和
```
setCssVar
```
取代来源

破坏性变更：滚动工具函数 —— 将

getScrollPosition

重命名为

getVerticalScrollPosition

，

animScrollTo

重命名为

animVerticalScrollTo

，

setScrollPosition

重命名为

setVerticalScrollPosition

来源

破坏性变更：
```
date
```
工具函数 ——
```
addToDate
```
和
```
subtractFromDate
```
的属性名称标准化（例如
```
year
```
->
```
years
```
，
```
month
```
->
```
months
```
）来源
破坏性变更：
```
QPopupEdit
```
—— 现在必须使用默认插槽
```
v-slot="scope"
```
以提升性能来源
破坏性变更：
```
GoBack
```
指令 —— 已移除；请改用路由引用（
```
$router.back()
```
或
```
$router.go(-1)
```
）来源
新增：
```
useQuasar
```
组合式函数 —— 在组合式API组件中访问
```
$q
```
对象的主要方法
新增：
```
useMeta
```
组合式函数 —— 定义元标签的新方式，取代现已弃用的
```
meta
```
组件属性来源

新增：

QTable

属性 —— 在v2.18.0中新增了

table-row-style-fn

、

table-row-class-fn

、

grid-style-fn

和

grid-class-fn

来源

**其他变更：**新增

useFormChild()

组合式函数 · v2.17.0新增

QOptionsGroup

属性

option-value

、

option-label

、

option-disable

· v2.17.0新增

QUploader

属性

thumbnail-fit

· v2.17.0新增

QSelect

属性

disable-tab-select

· v2.18.0新增

QMenu

QBtnDropdown

的

no-esc-dismiss

· v2.18.0新增

evt.qAvoidFocus

标志 ·

QDate

的model-value不再包含

changed

属性 · 新增

QPagination

属性

gutter

· 新增

QImg

属性

loading

、

crossorigin

、

fit

· Dialog插件的自定义组件属性移至

componentProps

· Loading插件使用

html: true

处理HTML内容，替代原有的

sanitize

· 移除

App.vue

的包装器

<div id="q-app">

· 用

v-model:propName

取代

.sync

修饰符

Best Practices

最佳实践

Use
```
#q-app/wrappers
```
instead of
```
quasar/wrappers
```
for defining configurations and boot files — provides superior type inference and alignment with modern Quasar CLI source
Use Regle as the recommended validation library for
```
QInput
```
and
```
QField
```
— provides a robust, externalized validation logic compared to inline rules source
Prefer responsive CSS classes (e.g.,
```
gt-sm
```
,
```
lt-md
```
) over the
```
Screen
```
plugin in JavaScript — minimizes re-renders and layout shifts by leveraging CSS media queries directly source
Bootstrap custom dialog components with the
```
useDialogPluginComponent
```
composable — handles the complex internal communication and lifecycle requirements of the Dialog plugin automatically source
Enable the
```
no-transition
```
prop on
```
QTree
```
when rendering large datasets — significantly improves runtime performance by skipping expensive expansion/collapse animations source
Use Quasar's
```
useInterval
```
and
```
useTimeout
```
composables over native browser timers — ensures automatic cancellation and memory cleanup when the component is unmounted source
Place
```
QPullToRefresh
```
as a direct child of
```
QPage
```
when using
```
QLayout
```
— ensures correct scroll event interception and native-like pull behavior within the layout container source
Avoid setting
```
Dark
```
mode to
```
auto
```
in SSR applications — prevents the "flicker" effect where the server renders light mode before the client synchronizes with system preferences source
Do not use
```
v-model
```
with
```
QRouteTab
```
components — the active state is derived directly from the current route, and manual model updates will not trigger navigation source
Prefer the Loading Bar Plugin over manual
```
QAjaxBar
```
component instances — provides a simpler, globally managed progress indicator for all Ajax calls without per-page wiring source

定义配置和启动文件时，使用
```
#q-app/wrappers
```
而非
```
quasar/wrappers
```
—— 这能提供更出色的类型推断，且与现代Quasar CLI保持一致来源
为
```
QInput
```
和
```
QField
```
推荐使用Regle作为验证库 —— 相较于内联规则，它能提供更健壮、可外部化的验证逻辑来源
优先使用响应式CSS类（例如
```
gt-sm
```
、
```
lt-md
```
）而非JavaScript中的
```
Screen
```
插件 —— 通过直接使用CSS媒体查询，减少重渲染和布局偏移来源
使用
```
useDialogPluginComponent
```
组合式函数引导自定义对话框组件 —— 它能自动处理Dialog插件复杂的内部通信和生命周期要求来源
渲染大型数据集时，为
```
QTree
```
启用
```
no-transition
```
属性 —— 通过跳过昂贵的展开/折叠动画，显著提升运行时性能来源
使用Quasar的
```
useInterval
```
和
```
useTimeout
```
组合式函数替代原生浏览器计时器 —— 确保组件卸载时自动取消计时器并清理内存来源
使用
```
QLayout
```
时，将
```
QPullToRefresh
```
作为
```
QPage
```
的直接子元素 —— 确保在布局容器内正确拦截滚动事件，实现类原生的下拉行为来源
在SSR应用中避免将
```
Dark
```
模式设置为
```
auto
```
—— 防止出现“闪烁”效果，即服务器先渲染浅色模式，之后客户端再与系统偏好设置同步来源
不要将
```
v-model
```
与
```
QRouteTab
```
组件一起使用 —— 激活状态直接由当前路由派生，手动更新模型不会触发导航来源
优先使用Loading Bar插件而非手动实例化
```
QAjaxBar
```
组件 —— 它无需每页配置，就能为所有Ajax请求提供更简单、全局管理的进度指示器来源

quasar-skilld

Original

Translation

quasarframework/quasar
`quasar`

quasarframework/quasar
`quasar`

API Changes

API变更

Best Practices

最佳实践