1
This commit is contained in:
Leo
294
移动端适配说明.md
Normal file
294
移动端适配说明.md
Normal file
@@ -0,0 +1,294 @@
|
||||
# 移动端适配说明
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已全面适配移动端，提供了完整的移动端体验优化，包括：
|
||||
|
||||
1. **移动端专用组件**：卡片式列表、折叠搜索表单、底部导航等
|
||||
2. **响应式布局**：自动适配不同屏幕尺寸
|
||||
3. **触摸优化**：符合移动端交互规范
|
||||
4. **性能优化**：流畅的滚动和动画效果
|
||||
|
||||
## 核心组件
|
||||
|
||||
### 1. MobileTable - 移动端表格组件
|
||||
|
||||
移动端自动显示为卡片式列表，桌面端显示为表格。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:show-selection="true"
|
||||
:show-actions="true"
|
||||
:selected-rows="selectedRows"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
@action="handleAction"
|
||||
>
|
||||
<!-- 自定义卡片头部 -->
|
||||
<template #header="{ row }">
|
||||
{{ row.name }}
|
||||
</template>
|
||||
|
||||
<!-- 自定义列内容 -->
|
||||
<template #column-status="{ row, value }">
|
||||
<el-tag :type="value === '0' ? 'success' : 'danger'">
|
||||
{{ value === '0' ? '正常' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<!-- 自定义操作按钮 -->
|
||||
<template #actions="{ row }">
|
||||
<el-dropdown-item command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
|
||||
<el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
|
||||
</template>
|
||||
</mobile-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
columns: [
|
||||
{ prop: 'name', label: '名称', mobile: true },
|
||||
{ prop: 'status', label: '状态', dictType: 'sys_normal_disable' },
|
||||
{ prop: 'createTime', label: '创建时间', formatter: this.parseTime }
|
||||
],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(row, selected) {
|
||||
// 处理选择变化
|
||||
},
|
||||
handleRowClick(row) {
|
||||
// 处理行点击
|
||||
},
|
||||
handleAction(command, row) {
|
||||
// 处理操作
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 2. MobileSearchForm - 移动端搜索表单
|
||||
|
||||
移动端自动折叠为快速搜索，点击筛选按钮展开完整表单。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-search-form
|
||||
:model="queryParams"
|
||||
@search="handleSearch"
|
||||
@reset="handleReset"
|
||||
@quick-search="handleQuickSearch"
|
||||
>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择">
|
||||
<el-option label="正常" value="0" />
|
||||
<el-option label="停用" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</mobile-search-form>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 3. MobileButtonGroup - 移动端按钮组
|
||||
|
||||
移动端自动将按钮分组，主要按钮显示，其他按钮放入"更多"菜单。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-button-group
|
||||
:buttons="buttons"
|
||||
:primary-count="2"
|
||||
:sticky="true"
|
||||
@button-click="handleButtonClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
buttons: [
|
||||
{ key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: this.handleAdd },
|
||||
{ key: 'edit', label: '修改', type: 'success', icon: 'el-icon-edit', handler: this.handleEdit },
|
||||
{ key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: this.handleDelete },
|
||||
{ key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: this.handleExport }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 4. MobileBottomNav - 移动端底部导航
|
||||
|
||||
在移动端显示底部导航栏，方便快速切换页面。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<mobile-bottom-nav
|
||||
:items="navItems"
|
||||
:show="true"
|
||||
@nav-click="handleNavClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navItems: [
|
||||
{ path: '/index', label: '首页', icon: 'el-icon-s-home' },
|
||||
{ path: '/system/user', label: '用户', icon: 'el-icon-user' },
|
||||
{ path: '/system/menu', label: '菜单', icon: 'el-icon-menu' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 工具函数
|
||||
|
||||
### mobile.js
|
||||
|
||||
提供移动端检测和优化工具函数：
|
||||
|
||||
```javascript
|
||||
import { isMobile, isIOS, initMobile } from '@/utils/mobile'
|
||||
|
||||
// 检测是否为移动端
|
||||
if (isMobile()) {
|
||||
// 移动端逻辑
|
||||
}
|
||||
|
||||
// 初始化移动端优化
|
||||
initMobile()
|
||||
```
|
||||
|
||||
## 混入
|
||||
|
||||
### mobile.js mixin
|
||||
|
||||
提供移动端相关的计算属性和方法：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import mobileMixin from '@/mixins/mobile'
|
||||
|
||||
export default {
|
||||
mixins: [mobileMixin],
|
||||
methods: {
|
||||
someMethod() {
|
||||
// 使用移动端检测
|
||||
if (this.$isMobile) {
|
||||
// 移动端逻辑
|
||||
}
|
||||
|
||||
// 使用移动端提示
|
||||
this.$mobileToast('操作成功', 'success')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 样式优化
|
||||
|
||||
### 响应式断点
|
||||
|
||||
- **移动端**：`max-width: 768px`
|
||||
- **平板**：`769px - 1024px`
|
||||
- **桌面端**：`min-width: 1025px`
|
||||
|
||||
### 主要优化
|
||||
|
||||
1. **触摸目标**：所有可点击元素最小 44px × 44px
|
||||
2. **字体大小**：输入框字体 16px 防止 iOS 自动缩放
|
||||
3. **间距优化**：移动端使用更紧凑的间距
|
||||
4. **圆角优化**：使用更大的圆角值（8px-12px）
|
||||
5. **阴影优化**：使用更柔和的阴影效果
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 完整列表页面示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索表单 -->
|
||||
<mobile-search-form
|
||||
:model="queryParams"
|
||||
@search="getList"
|
||||
@reset="resetQuery"
|
||||
>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
|
||||
</el-form-item>
|
||||
</mobile-search-form>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<mobile-button-group
|
||||
:buttons="buttons"
|
||||
:primary-count="2"
|
||||
/>
|
||||
|
||||
<!-- 表格/卡片列表 -->
|
||||
<mobile-table
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:show-selection="true"
|
||||
:selected-rows="selectedRows"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template #column-status="{ value }">
|
||||
<dict-tag :options="dict.type.sys_normal_disable" :value="value" />
|
||||
</template>
|
||||
</mobile-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **组件注册**：移动端组件需要在使用前注册或导入
|
||||
2. **字典数据**：MobileTable 组件需要字典数据支持，确保字典已加载
|
||||
3. **路由配置**：底部导航需要配置正确的路由路径
|
||||
4. **性能优化**：大数据量时建议使用虚拟滚动或分页加载
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
- iOS Safari 12+
|
||||
- Android Chrome 70+
|
||||
- 微信内置浏览器
|
||||
- 其他现代移动浏览器
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0
|
||||
- 初始版本
|
||||
- 支持移动端卡片式列表
|
||||
- 支持移动端折叠搜索
|
||||
- 支持移动端底部导航
|
||||
- 完整的响应式适配
|
||||
|
||||
Reference in New Issue
Block a user