CC/ruoyi-vue

Fork 0

Files

Leo a3291f7a31 1

2026-01-05 18:32:29 +08:00

6.9 KiB

Raw Permalink Blame History

移动端适配说明

概述

本项目已全面适配移动端，提供了完整的移动端体验优化，包括：

移动端专用组件：卡片式列表、折叠搜索表单、底部导航等
响应式布局：自动适配不同屏幕尺寸
触摸优化：符合移动端交互规范
性能优化：流畅的滚动和动画效果

核心组件

1. MobileTable - 移动端表格组件

移动端自动显示为卡片式列表，桌面端显示为表格。

<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 - 移动端搜索表单

移动端自动折叠为快速搜索，点击筛选按钮展开完整表单。

<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 - 移动端按钮组

移动端自动将按钮分组，主要按钮显示，其他按钮放入"更多"菜单。

<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 - 移动端底部导航

在移动端显示底部导航栏，方便快速切换页面。

<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

提供移动端检测和优化工具函数：

import { isMobile, isIOS, initMobile } from '@/utils/mobile'

// 检测是否为移动端
if (isMobile()) {
  // 移动端逻辑
}

// 初始化移动端优化
initMobile()

混入

mobile.js mixin

提供移动端相关的计算属性和方法：

<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

主要优化

触摸目标：所有可点击元素最小 44px × 44px
字体大小：输入框字体 16px 防止 iOS 自动缩放
间距优化：移动端使用更紧凑的间距
圆角优化：使用更大的圆角值（8px-12px）
阴影优化：使用更柔和的阴影效果

使用示例

完整列表页面示例

<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>

注意事项

组件注册：移动端组件需要在使用前注册或导入
字典数据：MobileTable 组件需要字典数据支持，确保字典已加载
路由配置：底部导航需要配置正确的路由路径
性能优化：大数据量时建议使用虚拟滚动或分页加载

浏览器支持

iOS Safari 12+
Android Chrome 70+
微信内置浏览器
其他现代移动浏览器

更新日志

v1.0.0

初始版本
支持移动端卡片式列表
支持移动端折叠搜索
支持移动端底部导航
完整的响应式适配

6.9 KiB Raw Permalink Blame History Unescape Escape