# 全局组件

本项目中自定义的全局组件,其中文件夹以 M 开头的,是对 element-ui 一些组件的二次封装,以在使用上更加便捷。

# 组件说明

本项目主要的组件,会在组件文件中添加注释,如 m-pagintion 组件

/**
 * m-pagination
 * @module components/MPagination
 * @desc element-ui el-pagination 二次封装 传入pagination对象,接收方不需要再设置页码值
 * @param {string} [layout] - 同 element-ui
 * @param {object} pagination - 分页对象,支持 .sync 修饰符
 * @param {number} pagination.per_page - 每页显示条目个数
 * @param {number} pagination.page - 当前页数
 * @param {number} pagination.total - 总条目数
 * @param {array} [sizes] - 每页显示个数选择器的选项设置
 *
 * @example
 * <m-pagination :pagination.sync="pagination" @on-change="getData()" />
 */

# 目录结构

└─ src
   └─ components
      ├─ Bar                    # 
      │  ├─ HeaderBar.vue       # 头部导航栏   
      │  ├─ LeftBar.vue         # 左侧菜单栏   
      │  ├─ MiddleBar.vue       # 左侧菜单详情菜单栏   
      │  └─ components          # 组件 
      ├─ Card                   # 数据/图表统计卡片
      ├─ Comment                # 评论页及其组件
      ├─ DeleteModal            # 资源删除原因
      ├─ FormItemSwitch         # 
      ├─ HistoryModal           # 历史变更记录
      ├─ ImageUpload            # 单个图片上传
      ├─ Layout                 # 基础框架
      │  ├─ TabLayout           # 资源详情tab框架          
      │  └─ ContainerLayout     # 资源列表框架  
      ├─ MButton                # 按钮
      ├─ MInputNumber           # 计数器
      ├─ MPagination            # 分页
      ├─ MTable                 # 表格
      ├─ MTagGroup              # 添加标签
      ├─ Photo                  # 相册页及其组件
      │  ├─ Page                # 相册管理页面   
      │  ├─ PhotoStatusModal.vue # 照片状态设置   
      │  └─ UploadModal.vue     # 图片批量批量上传  
      ├─ PhotoUpload            # 图片批量上传
      ├─ PhotoWall              # 图片墙,用户选择封面
      ├─ Plug                   # 三方插件封装
      │  ├─ Editor.vue          # wangEditor 富文本编辑器封装          
      │  └─ MixSearch.vue       # 富文本外挂资源搜索插件  
      ├─ Popover                # 资源信息弹出框
      │  ├─ ActorPopover        # 影人信息          
      │  ├─ MoviePopover        # 影视信息          
      │  ├─ RolePopover         # 角色信息          
      │  └─ UserPopover         # 用户信息  
      ├─ Review             
      │  └─ ReviewDrawer        # 影评详情            
      ├─ Select             
      │  ├─ MSelect             # el-select 二次封装,简化传参              
      │  └─ RemoteSelect        # 资源远程搜索            
      ├─ StatusModal            # 资源状态管理
      └─ Video              
         ├─ VideoPlayer         # 播放器              
         ├─ VideoPreview        # 视频预览              
         └─ StatusModal.vue     # 视频状态设置              
上次更新: 6/22/2022, 12:09:31 AM