三、核心组件体系
3.1 布局组件
布局是应用的骨架，Quasar提供了灵活的布局组件系统。
QLayout布局容器
是Quasar布局系统的根容器，与、、q-drawer等组件配合使用：
<template>
<q-layout view="hHh Lpr lff">
<!-- 页眉 -->
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-btn flat round dense icon="menu" @click="drawerLeft = !drawerLeft" />
<q-toolbar-title>Quasar App</q-toolbar-title>
<q-btn flat round dense icon="more_vert" />
</q-toolbar>
</q-header>
<!-- 左侧抽屉 -->
<q-drawer v-model="drawerLeft" show-if-above bordered>
<q-list>
<q-item clickable v-ripple to="/">
<q-item-section avatar>
<q-icon name="home" />
</q-item-section>
<q-item-section>首页</q-item-section>
</q-item>
<q-item clickable v-ripple to="/about">
<q-item-section avatar>
<q-icon name="info" />
</q-item-section>
<q-item-section>关于</q-item-section>
</q-item>
</q-list>
</q-drawer>
<!-- 页面内容 -->
<q-page-container>
<router-view />
</q-page-container>
<!-- 页脚 -->
<q-footer class="bg-grey-8 text-white">
<q-toolbar>
<q-toolbar-title>© 2024 Quasar App</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>
布局组件的关键属性：
view属性：定义页眉、页脚、抽屉的排列方式，如"hHh Lpr lff"表示页眉在上、抽屉在左等
show-if-above：抽屉在屏幕足够宽时是否保持打开状态
elevated：是否添加阴影效果
3.2 按钮组件 QBtn
按钮是用户交互的基础，Quasar的按钮组件功能丰富：
<template>
<!-- 按钮类型 -->
<q-btn label="默认按钮" />
<q-btn label="主要按钮" color="primary" />
<q-btn label="成功按钮" color="positive" />
<q-btn label="警告按钮" color="warning" />
<q-btn label="危险按钮" color="negative" />
<!-- 按钮尺寸 -->
<q-btn label="超大" size="xl" />
<q-btn label="大" size="lg" />
<q-btn label="中" size="md" />
<q-btn label="小" size="sm" />
<q-btn label="超小" size="xs" />
<!-- 图标按钮 -->
<q-btn icon="home" label="首页" />
<q-btn icon="favorite" color="pink" round />
<q-btn icon="arrow_back" flat round />
<!-- 按钮状态 -->
<q-btn label="禁用" disable />
<q-btn label="加载中" loading />
<!-- 按钮组 -->
<q-btn-group>
<q-btn label="选项1" />
<q-btn label="选项2" />
<q-btn label="选项3" />
</q-btn-group>
</template>
3.3 表单组件
Quasar提供了完整的表单组件体系，包括输入框、选择器、复选框、单选框、开关、滑块等。
QInput输入框组件
<template>
<q-input
v-model="formData.username"
label="用户名"
hint="请输入3-20个字符"
:rules="[val => !!val || '用户名不能为空']"
outlined
clearable
/>
<q-input
v-model="formData.password"
type="password"
label="密码"
outlined
:rules="[
val => !!val || '密码不能为空',
val => val.length >= 6 || '密码至少6位'
]"
/>
<q-input
v-model="formData.bio"
type="textarea"
label="个人简介"
outlined
rows="3"
/>
<q-select
v-model="formData.city"
:options="cities"
label="城市"
outlined
emit-value
map-options
/>
<q-checkbox v-model="formData.agree" label="同意用户协议" />
<q-radio v-model="formData.gender" val="male" label="男" />
<q-radio v-model="formData.gender" val="female" label="女" />
<q-toggle v-model="formData.notifications" label="接收通知" />
<q-btn label="提交" color="primary" @click="handleSubmit" />
</template>
3.4 数据展示组件
QTable表格组件
Quasar的表格组件功能强大，支持排序、筛选、分页、自定义列、行选择等：
<template>
<q-table
title="用户列表"
:rows="rows"
:columns="columns"
row-key="id"
:pagination="pagination"
:loading="loading"
flat
bordered
>
<template #body-cell-status="{ row }">
<q-badge :color="row.status === 1 ? 'positive' : 'negative'">
{
{ row.status === 1 ? '启用' : '禁用' }}
</q-badge>
</template>
<template #body-cell-action="{ row }">
<q-btn flat round dense icon="edit" @click="handleEdit(row)" />
<q-btn flat round dense icon="delete" color="negative" @click="handleDelete(row)" />
</template>
</q-table>
</template>
<script setup>
const columns = [
{ name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
{ name: 'name', label: '姓名', field: 'name', sortable: true },
{ name: 'email', label: '邮箱', field: 'email' },
{ name: 'status', label: '状态', field: 'status' },
{ name: 'action', label: '操作', field: 'action' },
];
</script>
3.5 反馈组件
QDialog对话框组件
Quasar的对话框组件支持模态弹窗、确认框、提示框等多种形式：
<template>
<!-- 基础对话框 -->
<q-btn label="打开对话框" @click="dialogVisible = true" />
<q-dialog v-model="dialogVisible">
<q-card>
<q-card-section>
<div class="text-h6">对话框标题</div>
</q-card-section>
<q-card-section>
这是对话框的内容区域。
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="取消" v-close-popup />
<q-btn flat label="确认" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
<!-- 确认对话框插件 -->
<q-btn label="确认删除" @click="confirmDelete" />
<!-- 提示插件 -->
<q-btn label="显示通知" @click="showNotify" />
</template>
<script setup>
import { useQuasar } from 'quasar';
const $q = useQuasar();
function confirmDelete() {
$q.dialog({
title: '确认删除',
message: '确定要删除这条数据吗？此操作不可撤销。',
cancel: true,
persistent: true,
}).onOk(() => {
$q.notify({ type: 'positive', message: '删除成功' });
});
}
function showNotify() {
$q.notify({
type: 'positive',
message: '操作成功',
position: 'top-right',
timeout: 2000,
});
}
</script>
四、主题与样式系统
4.1 双主题设计
Quasar内置了两种主题风格，可以在同一套代码中无缝切换：
Material Theme：遵循Google Material Design规范，适合Android风格应用
iOS Theme：遵循Apple Human Interface Guidelines，适合iOS风格应用
这意味着同一个应用在Android设备上可以呈现Material风格，在iOS设备上自动切换为iOS风格，提供原生的用户体验。
4.2 深色模式
Quasar提供了完整的深色模式支持。深色模式是一种补充显示模式，可以减少屏幕发出的蓝光，缓解眼睛疲劳，同时也能降低OLED/AMOLED屏幕的功耗。
工作原理：
当深色模式启用时，页面会被设置一个默认的深色背景
所有Quasar组件会自动添加dark属性，自动适配深色主题
支持自动检测系统主题设置（通过prefers-color-scheme媒体查询）
使用方法：
<template>
<q-btn @click="toggleDarkMode">
切换深色模式
</q-btn>
</template>
<script setup>
import { useQuasar } from 'quasar';
const $q = useQuasar();
function toggleDarkMode() {
$q.dark.toggle();
}
// 判断当前模式
console.log($q.dark.isActive);
</script>
自定义深色模式样式：
/* 自定义深色模式样式 */
.body--light {
/* 亮色模式自定义样式 */
}
.body--dark {
/* 深色模式自定义样式 */
background: #121212;
}
4.3 品牌色定制
Quasar允许通过配置文件自定义品牌色：
// quasar.config.js
framework: {
config: {
brand: {
primary: '#1976D2',
secondary: '#26A69A',
accent: '#9C27B0',
positive: '#21BA45',
negative: '#C10015',
info: '#31CCEC',
warning: '#F2C037'
}
}
}
在组件中使用自定义颜色：
<q-btn color="primary">主要按钮</q-btn>
<q-btn color="secondary">次要按钮</q-btn>
<q-icon name="favorite" color="pink" />
4.4 响应式设计
Quasar的响应式系统基于断点，提供了丰富的响应式工具类：
<template>
<!-- 响应式栅格 -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
响应式列
</div>
</div>
<!-- 响应式显示/隐藏 -->
<div class="text-center">
<span class="lt-md">小屏显示</span>
<span class="gt-sm">大屏显示</span>
</div>
</template>
