升级指南

TIP

Quasar的v1版本现在具有稳定的API。

从较旧的v1升级到最新的v1

使用UMD

只需将引用Quasar的所有CSS和JS标签中的版本字符串替换为较新的版本。

使用Quasar CLI

# 在Quasar v1项目中
# 运行这些命令

# 检查可升级的软件包
$ quasar upgrade

# 做实际的升级
$ quasar upgrade --install

代码编辑器终端的注意事项

如果您使用的是代码编辑器终端而不是真实的终端，运行quasar upgrade并收到错误消息：Command not found或*@quasar/cli* version appears to be undefined，您将需要到代码编辑器终端的设置，然后取消选中选项（或等效选项）从项目根目录将’node_modules/.bin’添加到％PATH％，然后重新启动代码编辑器。

使用Vue CLI

$ yarn upgrade quasar@1

您可能还想确保您也拥有最新的@quasar/extras软件包：

$ yarn add @quasar/extras@latest

从0.x升级到v1

在开始将旧版Quasar升级到Quasar v1的旅程之前，您应该了解以下几点： 1）在Discord服务器或论坛上提问之前，请先阅读文档。 2）准备一个CodePen，以便工作人员可以为您提供帮助。 3）深入研究Quasar源代码（它将帮助您了解框架并教您使用Vue进行编程的最佳实践）。 4）除非绝对必要，否则不要将框架组件用作mixin（如果需要，请封装它们）。 5）除非绝对必要，否则不要使用CSS选择器来定位内部组件。 6）由于速度快和使用效率高，我们建议尽可能使用yarn。但是，当使用全局变量时，我们仍然建议使用npm，特别是如果您使用nvm（节点版本管理器）。 7）使用git进行仓库管理并进行定期提交，就像在流程上做笔记一样，如果遇到问题，可以恢复到以前的状态。 8）将Quasar启动文件用于任何预安装的应用程序例程。 9）使用其他库时请务必谨慎-Quasar无法确保它们将完全兼容 10）最后，成为[支持者/赞助人]（https://donate.quasar.dev）并能访问特殊Discord支持的聊天室以获得优先支持。

升级简介

虽然升级旧版Quasar项目似乎是一个合理的选择，但它可能并不总是以最佳解决方案的形式出现。请注意，有些替代方法可能会更快，更有效。例如，有时最好创建一个新项目并移植旧项目。以这种方式，如果您缓慢且有条理地进行操作，则可以看到问题并迅速解决。这与就地升级项目相反，后者可以同时破坏所有内容。如果您要进行升级，我们将汇总以下所需的步骤。但是，您仍然需要更新通过修订的任何Quasar组件才能升级到v1。

无论哪种情况，当您在此过程中构建项目时，都可能会遇到没有提供有效信息的生成错误，并且您也不知道是什么原因导致的。 如果您遇到这种情况，建议您运行quasar build而不是quasar dev，因为生产版本有时会（从Webpack中）提供与dev版本不同的信息。

如果您陷入困境，请访问论坛并访问Discord服务器寻求帮助。 不仅来自员工，还来自社区。

无论走哪条路，祝您好运！

Info

应当指出，我们已尽最大努力确保升级文档中的所有内容都是正确的。 但是，由于这是手动过程，因此可能会出现错误。 如果发现任何问题，请不要害怕进行PR，并提出需要更正的更改。

初始步骤

开始升级项目的最佳方法是执行以下步骤：

  1. 首先，使用quasar info确认您的当前信息：
Global packages
  quasar-cli                    0.17.23

Important local packages
  quasar-cli                    0.17.23 (Quasar Framework CLI)
  quasar-framework              0.17.19 (Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
  quasar-extras                 2.0.9   (Quasar Framework fonts, icons and animations)

这显示了旧版Quasar的版本（我们将在步骤结束时再次进行此操作以验证是否升级）

  1. 移除本地quasar-cli软件包
$ yarn remove quasar-cli

  1. 删除文件夹.quasar、node_modules和package-lock.json或yarn.lock文件

  2. 安装：quasar和@quasar/extras作为依赖项

$ yarn add quasar @quasar/extras
  1. 安装：@quasar/app作为开发依赖项
$ yarn add --dev @quasar/app
  1. 重新安装所有npm软件包
$ yarn
  1. Babel升级

首先删除旧的.babelrc并创建新的babel.config.js

然后将您的babel.config.js更新为

module.exports = {
  presets: [
    '@quasar/babel-preset-app'
  ]
}

  1. **将文件夹src/plugins重命名为src/boot

  2. 在quasar.conf.js中：重命名关键部分plugins到boot：

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
    ],

应该看起来像这样：

module.exports = function (ctx) {
  return {
    // app boot (/src/boot)
    boot: [
    ],

不要混淆Quasar插件。 _不要_更改此内容：

// Quasar plugins
framework: {
  plugins: [ // 不要编辑这里
    'Notify'
  ]
}

  1. 在quasar.conf.js中：重命名fontawesome为fontawesome-v6、mdi为mdi-v6、ionicons为ionicons-v4(在extras部分中), 如果您使用它们。 即使您不使用它们，重命名它们仍然是好习惯，以防将来您使用它们。

  2. 在quasar.conf.js>framework>iconSet中，对其值进行与上述相同的重命名替换（fontawesome到fontawesome-v6、mdi到mdi-v6和ionicons到ionicons-v4）

  3. 在quasar.conf.js中：重命名framework > i18n为lang

  4. 在“ quasar.conf.js”中：删除所有对ctx.theme的引用

  5. 在文件夹~/src/css中创建文件quasar.variables.styl（如果尚不存在）。 向其中添加以下内容（或将内容从~/src/css/themes/common.variables.styl中移出）：

// Quasar Stylus Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files.

// Check documentation for full list of Quasar variables

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

$primary   = #1976d2
$secondary = #26A69A
$accent    = #9C27B0

$positive  = #21BA45
$negative  = #C10015
$info      = #31CCEC
$warning   = #F2C037

  1. 在~/src/css文件夹中，删除themes文件夹。

  2. 删除旧版Quasar的全局quasar-cli，并安装新的@quasar/cli。 （您仍然可以使用它运行旧版0.17项目）

删除全局Quasar CLI

$ yarn global remove quasar-cli
# or (depending on what you've installed it with)
$ npm remove -g quasar-cli

安装全局Quasar CLI

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

TIP

如果您正在使用Yarn，请确保Yarn的全局安装位置在你的PATH上：

# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"
  1. 最后但并非最不重要的一点是，使用quasar info进行健全性检查：
Global packages
  @quasar/cli - 1.0.5

Important local packages
  quasar - 1.9.0 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.5.4 -- Quasar Framework App CLI
  @quasar/extras - 1.5.1 -- Quasar Framework fonts, icons and animations

请注意与步骤1不同的版本。

现在剩下的就是修复页面和组件的正确性。 以下信息可用作参考。

构建主题

iOS主题不再可用，但是您将看到，也不再需要它：

  • 文档中有一些示例，说明如何使不同组件的外观和感觉像iOS
  • 您可以挂接到$q.platform.is.ios来帮助您不同地设置组件属性
  • 新组件非常易于定制（比旧版Quasar容易得多）

Quasar CLI

  • 要创建新项目，请使用yarn create quasar或npm init quasar而不是quasar create或quasar init
  • --theme，-t选项不再可用作构建选项。
  • 添加了quasar describe，用于Quasar组件等的命令行帮助。
  • quasar inspect是查看生成的Webpack配置的新选项。
  • quasar ext是Quasar应用扩展管理的新选项。
  • quasar new plugin ...现在是quasar new boot ...

构建输出

dist文件夹现在去除了-mat和-ios后缀，因为现在只有一个主题。 结果，dist/spa-mat, dist/electron-ios, dist/pwa-mat等现在变为dist/spa, dist/electron, dist/pwa。

动画

  • v1版本中，JS和CSS动画已删除。 但是，当v1完全发布时，它们将作为单独的Quasar软件包提供。 在此之前，如果需要它们，可以通过将它们直接从v0.17存储库中拉出并将它们添加到您的项目的方式，将它们手动添加到您的quasar项目中。
  • motion.styl
  • animate.js

杂项

  • this.$q.i18n改为this.$q.lang
  • import('quasar-framework/i18n/' + lang)改为import('quasar/lang/' + lang) 其中lang为en-us等.
  • 语言包en-uk已更改为en-gb
  • this.$q.icons改为this.$q.iconSet
  • 在以前的版本中，您将使用以下内容访问导入的语言包isoName：
 import('quasar/lang/' + locale).then(lang => {
   // 使用此命令访问isoName - lang.default.lang
 })

现在这需要更改为

 import('quasar/lang/' + locale).then(lang => {
   // 使用此命令访问isoName - lang.default.isoName
 })

调色板

颜色faded, dark, light已删除。 如果需要这些，请将其重新添加到新的Stylus文件中。

// Variables
$light = #bdbdbd
$dark = #424242
$faded = #777

// CSS3 Root Variables
:root
  --q-color-light $light
  --q-color-light-d darken($light, 10%)
  --q-color-faded $faded
  --q-color-dark $dark

// CSS Classes
.text-faded
  color $faded !important
  color var(--q-color-faded) !important
.bg-faded
  background $faded !important
  background var(--q-color-faded) !important

.text-light
  color $light !important
  color var(--q-color-light) !important
.bg-light
  background $light !important
  background var(--q-color-light) !important

.text-dark
  color $dark !important
  color var(--q-color-dark) !important
.bg-dark
  background $dark !important
  background var(--q-color-dark) !important

.text-faded
  color $faded !important
  color var(--q-color-faded) !important
.bg-faded
  background $faded !important
  background var(--q-color-faded) !important

CSS

颜色

  • tertiary颜色被重命名为accent. 这适用于品牌颜色和颜色列表。
旧版v1
$tertiary$accent
.bg-tertiary.bg-accent
.text-tertiary.text-accent

风格&特性

标题

旧版v1
h1.q-display-4.text-h1
h2.q-display-3.text-h2
h3.q-display-2.text-h3
h4.q-display-1.text-h4
h5.q-headline.text-h5
h6.q-title.text-h6
.q-subheading.text-subtitle1 或 .text-subtitle2
.q-body-1.text-body1
.q-body-2.text-body2
.q-caption.text-caption
.text-overline

文字类型

旧版v1
.quote

CSS辅助类

旧版v1
.capitalize.text-capitalize
.lowercase.text-lowercase
.uppercase.text-uppercase

CSS可见性

旧版v1
.highlight-and-fade
.mat-only
.ios-only
.mat-hide
.ios-hide

鼠标相关

旧版v1
.cursor-inherit
.cursor-none
.cursor-not-allowed

边界相关

旧版v1
.round-borders.rounded-borders
.no-border
.no-border-radius
.no-box-shadow

布局和网格

网格行

旧版v1
.order-first
.order-none
.order-last
.offset-<size>-<columns>

size 是xs, sm, md, lg or xl之一。
columns 是1到12

网格列

旧版v1
.col-auto
.col-xs-auto
.col-sm-auto
.col-md-auto
.col-lg-auto
.col-xl-auto
.col-shrink

网格Gutter

旧版v1
.gutter-xs.q-gutter-xs
.gutter-sm.q-gutter-sm
.gutter-md.q-gutter-md
.gutter-lg.q-gutter-lg
.gutter-xl.q-gutter-xl
.q-gutter-none
.q-col-gutter-xs
.q-col-gutter-sm
.q-col-gutter-md
.q-col-gutter-lg
.q-col-gutter-xl

指令

旧版v1
v-close-overlayv-close-popup
v-back-to-top

如果您正在使用新的QMenu组件，则可以使用auto-close属性。

插件

操作表

本地/会话存储

结构看起来相同，但是一些功能已重命名。

旧版v1
LocalStorage.get.item(key)LocalStorage.getItem(key)
SessionStorage.get.item(key)SessionStorage.getItem(key)
this.$q.localStorage.get.item(key)this.$q.localStorage.getItem(key)
this.$q.sessionStorage.get.item(key)this.$q.sessionStorage.getItem(key)

组件

  • 以下组件按字母顺序排列，以便于访问。

QActionSheet

  • 被弃用，而倾向于BottomSheet（来自代码），或使用带有position="bottom"的QDialog（来自模板）。

QAlert

QBanner属性

旧版v1
actions
avatar
color
detail
icon
message
text-color
type
dense
inline-actions
rounded

QBanner插槽

旧版v1
default
avatar
action

QAutocomplete

  • 已删除，内置于QSelect中，它功能更强大，并提供了更多选项来满足您的自动完成需求； 确保您习惯了QSelect的所有功能

QBreadcrumbs

QBreadcrumbs属性

旧版v1
color
gutter
separator-color

QBreadcrumbsEl

QBreadcrumbsEl属性

旧版v1
color
event

QBtn

  • align类型从string更改为any
  • tabindex类型从number更改为number|string

QBtn属性

旧版v1
no-ripple
repeat-timeout
wait-for-ripple
ripple
stack
stretch
unelevated

QBtnDropdown

  • align类型从string更改为any
  • tabindex类型从number更改为number|string

QBtnDropdown属性

旧版v1
dark-percentage
no-ripple
percentage
popover-anchor
popover-self
repeat-timeout
wait-for-ripple
auto-close
cover
menu-anchor
menu-self
persistent
ripple
stack
stretch
unelevated

QBtnDropdown事件

旧版v1
@before-hide(evt)
@before-show(evt)
@hide(evt)
@show(evt)

QBtnDropdown方法

旧版v1
hide(evt)
show(evt)
toggle(evt)

QBtnGroup

QBtnGroup属性

旧版v1
glossy
stretch
unelevated

QBtnToggle

QBtnToggle属性

旧版v1
no-ripple
wait-for-ripple
ripple
stack
stretch
unelevated

QCard

QCard属性

旧版v1
color
inline
text-color
bordered

QCard插槽

旧版v1
overlay

QCardTitle

  • 已删除，请使用QCard的QCardSection

QCardMain

  • 已删除，请使用QCard的QCardSection

QCardMedia

  • 已删除，请使用QCard的QCardSection或直接放置<img>或QParallax。

QCardSeparator

QCarousel

  • thumbnails类型从array更改为boolean

QCarousel属性

旧版v1
animation
color
easing
handle-arrow-keys
no-swipe
quick-nav
quick-nav-icon
quick-nav-position
swipe-easing
thumbnails-horizontal
thumbnails-icon
animated
control-color
navigation
navigation-icon
next-icon
padding
prev-icon
swipeable
transition-next
transition-prev

QCarousel事件

旧版v1
@input(index)@input(value)
@slide
@slide-trigger
@before-transition
transition

QCarousel方法

旧版v1
goToSlide(slideNum)goTo(panelName)

QCarousel插槽

旧版v1
control-button
control-full
control-nav
control-progress
quick-nav

QCarouselControl

  • offset类型从array of 2 numbers更改为array

QCarouselSlide

QCarouselSlide属性

旧版v1
disable
name

QChatMessage

  • size类型从array更改为string
  • text类型从array更改为string

QCheckbox

  • val类型从object更改为any

QCheckbox属性

旧版v1
checked-icon
indeterminate-icon
no-focus
readonly
unchecked-icon
dense
tabindex

QCheckbox方法

旧版v1
toggle()

QChip

QChip属性

旧版v1
avatar
closable
detail
floating
pointing
small
tag
clickable
disable
label
outline
removable
ripple
selected
tabindex

QChip事件

旧版v1
@hide()
@update:selected(state)
@remove(state)

QChipsInput

QCollapsible

QExpansionItem属性

旧版v1
active-class
append
caption
content-inset-level
dark
default-opened
dense
dense-toggle
disable
duration
exact
exact-active-class
expand-icon
expand-icon-class
expand-icon-toggle
expand-separator
group
header-class
header-inset-level
header-style
icon
label
popup
switch-toggle-side
to
replace

QExpansionItem事件

旧版v1
@before-hide(evt)
@before-show(evt)
@hide(evt)
@input(value)
@show(evt)

QExpansionItem方法

旧版v1
show(evt)
toggle(evt)
hide(evt)

QExpansionItem插槽

旧版v1
header

QColorPicker

  • 被QColor替换
  • default-value类型从string|object更改为string

QColor属性

旧版v1
after
align
before
cancel-label
clear-value
clearable
color
display-value
error
float-label
hide-underline
inverted
inverted-light
modal
no-parent-value
ok-label
placeholder
popover
prefix
stack-label
suffix
warning

QColor事件

旧版v1
@clear(clearVal)

QColor方法

旧版v1
clear()
hide()
show()
toggle()

QContextMenu

  • 已删除，将QMenu与context-menu属性一起使用

QDatePicker

QDate属性

旧版v1
color
dark
disable
disable-year-month
event-color
events
first-day-of-week
landscape
minimal
options
readonly
text-color
today-btn

QDatetime

QDatetimePicker

QDialog

QDialog属性

旧版v1
cancel
color
ok
message
options
prevent-closepersistent
prompt
stack-buttons
title
content-class
content-style
full-height
full-width
maximized
seamless
no-refocus
no-focus
auto-close
transition-hide
transition-show

QDialog事件

旧版v1
@ok()
@cancel()
@hide()
@show()
@before-hide
@before-show
@shake

QDialog方法

旧版v1
hide(evt)
show(evt)
toggle(evt)

QDialog插槽

旧版v1
body
buttons
message
title

QFab (浮动操作按钮)

QFab事件

旧版v1
@hide()
@show()
@before-hide(evt)
@before-show(evt)

QFab插槽

旧版v1
tooltip

QFabAction

QField

  • 更新，全新 不要用来包裹QInput或QSelect； 现在，QField的功能已内置到QInput和QSelect中。

如果使用它包裹Input，只需将所有属性从QField移到QInput。 如果您使用error和error-label，请在QInput上启用bottom-slots，并将error-label更改为error-message。

QIcon

QIcon属性

旧版v1
left
right

QInfiniteScroll

替换:handler为@load.

QInfiniteScroll属性

旧版v1
handler
inline
disable

QInfiniteScroll事件

旧版v1
@load(index, done)

QInfiniteScroll方法

旧版v1
loadMore()trigger
updateScrollTarget

QInfiniteScroll插槽

旧版v1
messageloading

QInnerLoading

  • size类型从string|number更改为string

QInnerLoading属性

旧版v1
visible
showing
transition-hide
transition-show

QInput

  • stack-label类型从string更改为boolean
  • autofocus类型从boolean|string更改为boolean

QInput属性

旧版v1
after
align
before
clear-value
decimals
float-label
hide-underline
initial-show-password
inverted
inverted-light
lower-case
max-height
no-parent-field
no-pass-toggle
numeric-keyboard-toggle
step
upper-case
warning
autogrow
bg-color
borderless
bottom-slots
counter
debounce
dense
error-message
fill-mask
filled
hide-hint
hint
input-class
input-style
items-aligned
label
lazy-rules
mask
maxlength
outlined
rounded
rules
square
standout
unmasked-value

QInput方法

旧版v1
clear()
select()
togglePass()
resetValidation()
validate(value)

QInput插槽

旧版v1
prepend
append
before
after
error
hint
counter

QItem

QItem属性

旧版v1
event
highlight
inset-separator
link
multiline
separator
sparse
clickable
disabled
focused
inset-level
manual-focus
tabindex

QItem事件

旧版v1
@click(evt)
@keyup(evt)

QItemMain

QItemSeparator

QSeparator属性

旧版v1
color
dark
inset
spaced
vertical

QItemSide

QItemTile

QJumbotron

QKnob

QKnob属性

旧版v1
decimals
line-width
angle
center-color
font-size
show-value
tabindex
thickness

QLayout

QLayout属性

旧版v1
@resize()@resize(size)
@scroll()@scroll(details)
@scroll-height()@scroll-height(height)

QLayoutDrawer

  • 重命名为QDrawer

QDrawer属性

旧版v1
no-hide-on-route-change
bordered
elevated

QDrawer方法

旧版v1
on-layout
hide
show
toggle

QLayoutHeader和QLayoutFooter

QFooter属性

旧版v1
bordered
elevated
reveal

QHeader属性

旧版v1
bordered
elevated
reveal
reveal-offset

QList

QList属性

旧版v1
highlight
inset-separator
link
no-border
sparse
striped
striped-odd

QListHeader

QModal

QModalLayout

QOptionGroup

QOptionGroup属性

旧版v1
no-parent-group
readonly
dense

QPagination

QPagination方法

旧版v1
set(pageNumber)
setOffset(offset)

QParallax

QParallax事件

旧版v1
@scroll(percentage)

QParallax插槽

旧版v1
loading
content

QPopover

  • 被QMenu替换
  • anchor类型从object更改为string
  • self类型从object更改为string
  • offset类型从array of 2 numbers更改为array

QMenu属性

旧版v1
anchor-click
disabled
keep-on-screen
auto-close
context-class
context-menu
context-style
max-width
no-parent-event
target
transition-hide
transition-show

QMenu事件

旧版v1
@before-hide(evt)
@before-show(evt)
@escape-key

QMenu方法

旧版v1
hide(evt)
show(evt)
toggle(evt)
updatePosition()

QPopupEdit

QPopupEdit属性

旧版v1
keep-on-screen
validate

QPopupEdit方法

旧版v1
cancel()
set()

QPopupEdit插槽

旧版v1
title

QProgress

QLinearProgress属性

旧版v1
animate
height
keep-on-percentage
dark
query
reverse
rounded
track-color

QPullToRefresh

QPullToRefresh属性

旧版v1
handleruse refresh event
distance
inline
pull-message
release-message
refresh-icon
refresh-message
icon
no-mouse

QPullToRefresh事件

旧版v1
@refresh(done)

QRadio

QRadio属性

旧版v1
checked-icon
no-focus
readonly
unchecked-icon

QRange

QRange属性

旧版v1
decimals
error
fill-handle-always
square
warning

QRating

  • max类型从number更改为string|number

QResizeObservable

QRouteTab

  • name类型从string更改为string|number
  • alert类型从boolean更改为boolean|string
  • label类型从string更改为string|number
  • to类型从string|object更改为any
  • 再也不用在其上使用slot="title"

QRouteTab属性

旧版v1
color
count
hidden
hide

QRouteTab方法

旧版v1
select()

QScrollArea

  • delay类型从number更改为string|number

QScrollObservable

QSearch

  • 已删除， 使用带debounce属性的QInput (以及append或prepend插槽上的一些可选图标)

QSelect

  • stack-label类型从string更改为boolean
  • display-value类型从string更改为string|number
  • 当选项列表是一个对象数组（而不是简单的字符串或数字）时，升级程序可能希望打开emit-value和map-options标志以保留以前版本的行为。 在选择时，1.0默认会发出整个对象，而不仅仅是value属性。

QSelect属性

旧版v1
after
before
chips
chips-bg-color
chips-color
clear-value
filter
filter-placeholder
float-label
hide-underline
inverted
inverted-light
no-parent-field
popup-cover
popup-max-height
radio
separator
toggle
warning

QSelect插槽

旧版v1
prepend
append
before
after
error
hint
counter
selected
no-option
loading
selected-item
option

QSlider

QSlider属性

旧版v1
decimals
error
fill-handle-always
square
warning

QSpinnerMat

QStep

  • name类型从string|number更改为any

QStep属性

旧版v1
default
order
subtitle

QStepper

  • done-icon类型从boolean更改为string
  • active-icon类型从boolean更改为string
  • error-icon类型从boolean更改为string

QStepper属性

旧版v1
color
contractable
no-header-navigation

QStepper插槽

旧版v1
navigation

QTab

  • name类型从string更改为string|number
  • alert类型从boolean更改为boolean|string
  • label类型从string更改为string|number
  • tabindex类型从number更改为string
  • 再也不用在其上使用slot="title"

QTab属性

旧版v1
color
count
default
hidden
hide

QTab插槽

旧版v1
title

QTab方法

旧版v1
select()

QTable

filter - 类型String更改为String,Object

QTable属性

旧版v1
selected-rows-label
pagination-label
bordered
flat
wrap-cells

QTable事件

旧版v1
@fullscreen()
@request()@request(pagination, filter, getCellValue)
@update:pagination(newPagination)
@update:selected(newSelected)

QTable方法

旧版v1
clearSelection()
isRowSelected(key)
nextPage()
prevPage()
requestServerInteraction(props)
setPagination(pagination, forceServerRequest)
sort(col)
toggleFullscreen()

QTable插槽

旧版v1
body-cell
header-cell

QTableColumns

  • 已删除， 使用将列作为选项的QSelect（参见文档中的例子）

QTabPane

QTabs

从所有选项卡中删除slot="title"。 不再需要了。 如果将QTab与QTabPanes一起使用，请将其从QTab容器中取出，然后放入单独的QTabPanel容器中。 将v-model放在两个容器上，并将其指向相同的变量。 如果在某些选项卡上具有default，则将其名称作为模型的默认值。

QTabs属性

旧版v1
animated
color
glossy
inverted
panes-container-class
position
swipeable
text-color
two-lines
underline-colorindicator-color
no-pane-border
breakpoint
active-color
active-bg-color
indicator-color
left-icon
right-icon
switch-indicator
narrow-indicator
inline-label
no-caps
dense

QTab事件

旧版v1
select

QTabs方法

旧版v1
go(offset)
next()
previous()
selectTab(name)

QTimeline

QTimeline属性

旧版v1
no-hover
responsive

QTimelineEntry

QTimelineEntry插槽

旧版v1
subtitle
title

QTimePicker

QTime属性

旧版v1
color
dark
disable
format24h
hour-options
landscape
minute-options
now-btn
options
readonly
second-options
text-color
with-seconds

QToggle

  • val类型从object更改为any
  • 删除了checked-icon和indeterminate-icon，以使QCheckbox更符合Material标准。 如果仍然需要类似的功能，请考虑将QToggle与图标结合使用。

QToggle属性

旧版v1
no-focus
readonly
dense
tabindex

QToolbar

QToolbar属性

旧版v1
color
glossy
inverted
shrink
text-color
inset

QToolbar插槽

旧版v1
subtitle

QTooltip

QTooltip属性

旧版v1
disabled
content-class
content-style
max-width
target
transition-hide
transition-show

QTooltip事件

旧版v1
@before-hide(evt)
@before-show(evt)
@hide(evt)
@input(value)
@show(evt)

QTooltip方法

旧版v1
updatePosition()

QTree

QTree属性

旧版v1
selected-color

QTree事件

旧版v1
@lazy-load(details)
@update:expanded(expanded)
@update:selected(target)
@update:ticked(target)

QTree方法

旧版v1
setExpanded(key, state)
setTicked(keys, state)

QUploader

  • headers类型从object更改为function|array
  • url类型从string更改为function|string
  • method类型从string更改为function|string

QUploader属性

旧版v1
additional-fieldsform-fields
after
align
auto-expand
before
clear-value
clearable
error
expand-style
extensions
float-label
hide-underline
hide-upload-buttonhide-upload-btn
hide-upload-progress
inverted
inverted-light
name
no-content-type
no-parent-field
placeholder
prefix
stack-label
suffix
upload-factory
url-factory
warning
accept
auto-upload
factory
batch
bordered
field-name
label
flat
max-file-size
max-total-size
square
text-color

QUploader事件

旧版v1
@fail(file, xhr)@failed({ files, xhr })
@remove:abort(file)
@remove:cancel(file)
@remove:done(file)
@uploaded(file, xhr)@uploaded({ files, xhr })
@uploading({ files, xhr })

QUploader方法

旧版v1
add(files)addFiles(files)
pick()pickFiles()
removeFile(file)
removeQueuedFiles()
removeUploadedFiles()

QUploader插槽

旧版v1
header
list

QWindowResizeObservable

  • 已删除， 直接使用this.$q.screen.width和this.$q.screen.height（或在其上创建观察者）
阅读更多?
入门
路线图
入门
VS Code配置
发现错误? 联系站长
MIT LICENSE | 隐私政策 | Quasar艺术作品