更新记录

2.1.6(2020-09-25)

更新安装包,移除node_modules、package-lock.json等文件

2.1.5(2020-09-24)

更新uni-id版本,修复uni-id自动刷新token时获取错误token的bug

查看更多

云函数类插件通用教程

  1. 使用云函数类插件的前提是:使用HBuilderX 2.7+;已通过实名认证并开通了uniCloud。
  2. 如果下载的是完整项目,则需要在manifest.json的可视化界面获取appid。
  3. 需要对cloudfunctions目录点右键,绑定服务空间。如无服务空间,需先创建。建议在测试服务空间体验插件,避免对现网项目产生影响。
  4. 对cloudfunctions目录点右键上传所有云函数。在HBuilderX 2.7.8以前,如有common目录,还需单独对每个common目录下的公共模块上传。
  5. 如果cloudfunctions目录下有db_init.json,请点击右键,初始化云数据库。
  6. 通过以上步骤,完成uniCloud服务空间的初始化和云函数部署。然后就可以在HBuilderX的运行菜单里运行该项目,体验云端一体完整流程。

项目简介

BaseCloud是一套基于uniapp、uniCloud、uni-id的全栈开发框架,不依赖任何第三方框架,极度精简轻巧。

在开发前端界面时,除了适配移动端外,它对PC端也做了良好的适配;

在开发云函数时,它可以为您提供拦截器配置、路由管理、分页、列表、单数据快速查询等功能。除此之外,对于一些业务开发中的常用函数也已做好封装,拿来即用。

在BaseCloud的初始化项目模板中,为您实现了贯穿前后端的业务模块:管理员登录、用户管理、菜单管理、角色与权限管理、操作日志、系统参数配置等项目通用的基础后台管理功能,这一切全都基于云函数开发。

项目价值

基于BaseCloud的快速开发UI样式库,可以快速拼装前端界面,高还原度实现设计图效果,兼顾高效与灵活。

基于BaseCloud的云函数公用模块,你可以轻松实现单云函数、多云函数的路由管理、请求拦截管理与权限控制、常用业务函数快速开发。

基于BaseCloud的客户端缓存管理机制,你可以大幅度减少应用的云函数重复调用请求,未来云函数开始计费后,至少节省应用50%的流量费用。

基于BaseCloud的管理后台基础项目框架,你可以快速初始化一套自带用户、菜单、角色、权限、操作日志、系统参数管理的管理后台项目,在此基础上开始你的项目开发。

当然,这一切都只是刚刚开始,未来我们会基于BaseCloud推出更多贯穿前后端的业务模板,只要您的项目是基于BaseCloud框架,所有的业务模板拿来即用,5分钟快速集成到项目内,无需重复开发前端和后端。

对于开发者而言,基于BaseCloud的全栈快速开发框架,你可以封装自己的贯穿前后端的业务模块,发布到付费业务模块插件市场。 对于企业而言,基于BaseCloud的全栈快速开发框架,无需再费心招募不同工种不同技术栈的工程师,您只需要找到熟悉BaseCloud的工程师,让他们各自独立负责一个业务模块。 未来基于BaseCloud的项目,将会被拆分成几十个甚至上百个独立的模块,每个模块由一个工程师从前端到后端全链路负责,而他只需要懂一门开发语言:javascript,熟悉一个框架:BaseCloud。 项目交付后,您更无须担心后期维护与迭代更新,基于BaseCloud统一的开发规范,您可以很轻松找到随时能够接管您的项目的工程师。

使用说明文档

BaseCloud快速上手使用说明文档 <<

安装方式

方式一:插件市场使用HbuilderX导入示例项目。

方式二:从Gitee clone:Gitee链接,欢迎star、fork,关注最新动态 <<

https://gitee.com/phoooob/BaseCloud.git

方式三:从npm安装:npm地址 <<

npm i basecloud

业务模块快速集成 - 持续开发中

  1. 用户端-手机号码登录业务模块 <<
  2. 用户端-APP版本检测更新业务模块(含管理端功能) <<
  3. 管理端-数据字典业务模块 <<
  4. 统一下单支付业务模块 <<

BaseCloud项目构成

  1. common>base-cloud.scss 基础样式库,适配移动端和PC端,22kb。
  2. common>js>base-cloud-client.js 客户端SDK,14.2kb。
  3. cloudfunctions>common>base-cloud 云函数公共模块,13.9kb。
  4. components PC端常用业务组件目录

项目预览

管理后台演示项目地址:https://base-cloud.joiny.cn <<

账号:admin 密码:123123123

快速开始

  1. 请先下载BaseCloud管理后台项目模板,并导入到Hbuilder中
  2. 右键点击cloudfunctions目录,选择一个服务空间,支持阿里云、腾讯云。
  3. 找到cloudfunctions目录下的db_init.json数据库初始化文件,右键选择“初始化数据库”。
  4. 右键点击cloudfunctions目录,选择上传所有云函数以及公共模块。
  5. 点击运行到浏览器,运行成功后,在浏览器中进入登录页,初始账号:admin ,初始密码:123123123
  6. !!!!特别注意:如果您初次从插件市场导入项目,由于npm install创建的软链接失效,修改公共模块中的代码将不会同步更新到云函数中, 例如:修改common > base-cloud > config.js 中的拦截器配置信息,amdin函数中的node_modules > base-cloud > config.js 可能不会同步更改, 如果遇到这种情况请删除admin > node_modulesadmin > package-lock.json,然后重新安装admin函数的公共模块:

在要引入公用模块的云函数目录,执行npm init -y生成package.json文件。 执行npm install ../common/base-cloud引入base-cloud模块。

BaseCloud用户交流QQ群:

如果你想入手云开发,本框架是绝佳的学习素材和项目快速搭建方案,学习过程中有问题,快来群里提问,专业客服妹子秒回复。

群号:649807152

点击链接,直接加入qq群 <<

项目结构介绍

请务必对照仔细浏览项目目录介绍,您阅读本项目的文档将会事半功倍。

服务端项目目录

├── cloudfunctions───────────# 云函数目录
│       └── admin──────────────────# 管理后台业务函数
│             └── controller──────────────────# 管理后台业务函数根目录
│                   └── menu.js────────────────────────# 菜单管理业务函数
│                   └── operateLog.js──────────────────# 操作日志业务函数与接口
│                   └── paramConfig.js─────────────────# 系统参数配置业务函数
│                   └── role.js────────────────────────# 角色管理业务函数
│             └── node_modules──────────────────# admin函数依赖公共模块
│             └── index.js──────────────────────# admin函数入口文件
│       └── api────────────────────# 用户端业务函数
│       └── user-center────────────# 用户相关业务函数
            └── user.js────────────────────────# 用户管理业务函数
│       └── clearlogs──────────────# 过期操作日志清理定时任务函数
│       └── curl──────────────# URL化云函数
│       └── common─────────────────# 公共模块
│               └── base-cloud──────────────────# base-cloud公共模块
│                       └── intercepters──────────────────# 拦截器函数目录
│                               └── loginInter.js─────────────────# 用户登录状态拦截拦截函数
│                               └── authInter.js──────────────────# 用户权限拦截拦截函数
│                       └── base-cloud-config.js──────────────────# 公共模块配置文件,注册全局拦截器(重要!)       
│                       └── index.js──────────────────────# BaseCloud公共模块源码,开发阶段无需关心    
│       └── db_init.json───────────# 数据库初始化文件,包含数据表和初始化数据

客户端项目目录

├── cloudfunctions────────# 云函数目录...
├── common────────────────# 静态资源文件目录
│       └── js──────────────────# js文件目录
│             └── base-cloud-client.js─────────────────# BaseCloud客户端SDK
│             └── clipBoard.js─────────────────────────# 支持web端复制API
│             └── md5.js───────────────────────────────# MD5加密函数,用于密码加密传输,客户端数据缓存等场景
│       └── base-cloud.scss────────────────────# BaseCloud样式类库入口文件
│       └── base-cloud-font.scss───────────────# BaseCloud图标样式文件
│       └── base-cloud-mobile.scss─────────────# BaseCloud移动端样式文件
│       └── base-cloud-pc.scss─────────────────# BaseCloud适配PC端样式文件
├── pages────────────────# 页面
├── static───────────────# 图片静态资源文件目录
├── uni.scss─────────────# scss变量配置文件

管理后台业务模块云函数目录结构

├── cloudfunctions─────────────────# 云函数目录
        └── user-center──────────────────# 用户相关业务函数
│               └── controller──────────────────# 用户相关业务函数根目录
                        └── user.js────────────────────────# 用户管理业务函数
│                               └── login()──────────────────────────# 登录接口
│                               └── checkToken()─────────────────────# token验证接口
│                               └── logout()─────────────────────────# 退出登录接口
│                               └── changeStatus()───────────────────# 切换用户禁用状态接口
│                               └── info()───────────────────────────# 用户信息查询接口
│                               └── save()───────────────────────────# 保存、更新用户信息接口
│                               └── myInfo()─────────────────────────# 当前用户信息接口
│                               └── modify()─────────────────────────# 修改当前用户信息(含密码)接口
│                               └── list()───────────────────────────# 用户列表查询接口
│                               └── delete()─────────────────────────# 删除用户接口
│       └── admin──────────────────# 管理后台业务函数
│               └── controller──────────────────# 管理后台业务函数根目录
│                       └── menu.js────────────────────────# 菜单管理业务函数
│                               └── listByType()─────────────────────# 根据菜单类型查询菜单列表接口
│                               └── globalData()─────────────────────# 查询登录用户信息、权限菜单列表接口
│                               └── info()───────────────────────────# 查询菜单信息接口
│                               └── save()───────────────────────────# 保存、更新菜单信息接口
│                               └── delete()─────────────────────────# 删除菜单信息接口
│                               └── list()───────────────────────────# 菜单列表查询接口
│                       └── operateLog.js──────────────────# 操作日志业务函数与接口
│                       └── paramConfig.js─────────────────# 系统参数配置业务函数
│                               └── info()───────────────────────────# 查询参数配置项信息接口
│                               └── save()───────────────────────────# 保存、更新参数配置项信息接口
│                               └── delete()─────────────────────────# 删除参数配置项接口
│                               └── list()───────────────────────────# 参数配置项列表查询接口
│                       └── role.js────────────────────────# 角色管理业务函数
│                               └── info()───────────────────────────# 查询角色信息接口
│                               └── save()───────────────────────────# 保存、更新角色信息接口
│                               └── delete()─────────────────────────# 删除角色接口
│                               └── list()───────────────────────────# 角色列表查询接口
│                               └── options()────────────────────────# 角色选项列表查询接口(供用户角色选择时使用)
│                       
│               └── node_modules──────────────────# admin函数依赖公共模块
│               └── index.js──────────────────────# admin函数入口文件

PC端组件使用说明文档

【auth 组件】

用于用户权限控制,当用户拥有操作权限时展现,否则不展现该元素。

关于权限控制的业务逻辑:用户登录成功后,读取该用户所属角色拥有的权限菜单列表,存储到本地,键名为menuList,权限判断就是基于menuList进行的判断。

属性 必填 默认值 可选值 示例值 说明
url user-center/user/save 权限路径,该路径可包含参数,需在t_menu表中已添加数据
noAuth false true false 无权限时展现
isInline true true false 是否内联元素,如需以其他display方式展示时,设置为false,组件内部不再追加display:inline-block内联样式。
<auth url="user-center/user/save">

   <navigator url="/pages/user/userEdit">编辑</navigator> 

</auth>

【auth-btn 组件】

用于用户权限控制,当用户拥有操作权限时展现,否则不展现该元素。点击按钮时,会发送请求。

属性 必填 默认值 可选值 示例值 说明
url user-center/user/changeStatus?id=1 发送请求的路径,可以携带参数
params json类型 :params="{id:1}" 发送请求时携带的参数
noAuth false true false 无权限时展现
isInline true true false 是否内联元素,如需以其他display方式展示时,设置为false,组件内部不再追加display:inline-block内联样式。
confirm confirm="delete" 发送请求之前的确认文字,如果是删除类请求需要确认,可以简写为delete
alert 请求成功后弹窗的文字
showFail true 请求失败后,是否提示服务端返回的msg字段
@success 请求成功后回调函数
@fail 请求失败后回调函数
<auth-btn url="user-center/user/changeStatus" :params="{id:1}">
   禁用
</auth-btn>

【auth-nav 组件】

用于用户权限控制,当用户拥有操作权限时展现,否则不展现该元素。点击按钮时,会进行页面跳转。

属性 必填 默认值 可选值 示例值 说明
url user-center/user/changeStatus?id=1 是否具有权限的路径
noAuth false true false 无权限时展现
isInline true true false 是否内联元素,如需以其他display方式展示时,设置为false,组件内部不再追加display:inline-block内联样式。
href 要跳转的页面的链接,可以包含参数
<auth-nav :href="`/pages/user/userEdit?id=${item._id}`" url="user-center/user/save" >
   编辑
</auth-nav>

【switch-btn 组件】

用于权限控制的开关切换按钮,无权限仅展示,不可发送请求。

属性 类型 说明
url String 权限地址,也是点击切换时的请求地址,可以携带参数,如无地址或无权限,则不可点击
params json 请求参数,有权限时,点击切换即可发送请求
checked Boolean 开关是否打开
disabled Boolean 开关是否禁用
color String 颜色,默认#07c160

【switchs 组件】

属性 类型 说明
name String 表单的name
value Boolean 开关是否打开
tip String 开关右侧的提示文字
disabled Boolean 开关是否禁用
color String 颜色,默认#07c160
title String 表单标题,不要标题,请设置titleWidth=0
titleWidth Number 表单的左侧标题占位的宽度
isVertical Boolean 标题和开关是否垂直排列
@change checked 改变时触发 change 事件,event.detail={ value:checked}

【checkboxs 组件】

复选框组件,用于多选,支持v-model

属性 必填 默认值 可选值 示例值 说明
title 表单标题,不要标题,请设置titleWidth=0
titleWidth 90 数值即可 100 复选框表单的左侧标题占位的宽度
name 表单的name
titleName 如果需要选中选项的标题也传服务端,请定义该字段
value value='1,2,3,5' 表单的value,支持v-model绑定,可以是数组,也可以是用英文逗号分开的多个值
list [{title:"搞笑",value:1},{title:"言情",value:2}] 选项列表,数组
titleKey title 选项列表中,对用户展示的文字的键值对的键名
valueKey value 选项列表中,对作为选项值的键值对的键名
disabledKey disabled 选项列表中,表示当前选项禁用的键值对的键名
color #07c160 复选框的颜色
isVertical false 标题和复选框是否垂直排列
@change 当选项发生改变时触发的回调函数
<checkboxs title="角色" :list="roleList" name="x.roleIds|请选择角色" :value="data.roleIds" 
titleName="x.roleNames" titleKey="name" valueKey="_id"></checkboxs>

【radios 组件】

单选框组件,用于单选,支持v-model

属性 必填 默认值 可选值 示例值 说明
title 表单标题
titleWidth 90 数值即可 100 左侧标题的宽度
name 表单的name
titleName 如果需要选中选项的标题也传服务端,请定义该字段
value 表单的value,支持v-model绑定
list [{title:"搞笑",value:1},{title:"言情",value:2}] 选项列表,数组
titleKey title 选项列表中,对用户展示的文字的键值对的键名
valueKey value 选项列表中,对作为选项值的键值对的键名
disabledKey disabled 选项列表中,表示当前选项禁用的键值对的键名
color #07c160 复选框的颜色
isVertical false 标题和复选框是否垂直排列
defaultFirst true 当value无值时,是否默认选中第一个选项
@change 当选项发生改变时触发的回调函数
<radios title="菜单类型" :list="menuTypeList" :value="data.type" 
name="x.type|菜单类型" @change="chooseMenuType"></radios>

【multi-selects 组件】

下拉多选组件,用于多选,支持v-model,可以搜索关键字筛选

属性 必填 默认值 可选值 示例值 说明
title 表单标题
titleWidth 90 数值即可 100 左侧标题的宽度
name 表单的name
titleName 如果需要选中选项的标题也传服务端,请定义该字段
value value='1,2,3,5' 表单的value,支持v-model绑定,可以是数组,也可以是用英文逗号分开的多个值
list [{title:"搞笑",value:1},{title:"言情",value:2}] 选项列表,数组
titleKey title 选项列表中,对用户展示的文字的键值对的键名
valueKey value 选项列表中,对作为选项值的键值对的键名
remarkKey remark 选项列表中,对作为副标题的键值对的键名
disabledKey disabled 选项列表中,表示当前选项禁用的键值对的键名
color #07c160 颜色
isVertical false 标题和选择框是否垂直排列
@change 当选项发生改变时触发的回调函数
<multi-selects title="角色" :list="roleList" name="x.roleIds|请选择角色" 
:value="data.roleIds" titleName="x.roleNames" titleKey="name" valueKey="_id"></multi-selects>

【selects 组件】

下拉单选组件,用于单选,支持v-model,可以搜索关键字筛选

属性 必填 默认值 可选值 示例值 说明
title 表单标题
titleWidth 90 数值即可 100 左侧标题的宽度
name 表单的name
titleName 如果需要选中选项的标题也传服务端,请定义该字段
value 表单的value,支持v-model绑定
list [{title:"搞笑",value:1},{title:"言情",value:2}] 选项列表,数组
titleKey title 选项列表中,对用户展示的文字的键值对的键名
valueKey value 选项列表中,对作为选项值的键值对的键名
remarkKey remark 选项列表中,对作为副标题的键值对的键名
disabledKey disabled 选项列表中,表示当前选项禁用的键值对的键名
color #07c160 颜色
isVertical false 标题和选择框是否垂直排列
@change 当选项发生改变时触发的回调函数
<selects title="父级菜单" :list="parentMenuList" name="x.parentId" 
:value="data.parentId" titleKey="name" valueKey="_id"></selects>

【inputs 组件】

输入框组件,type支持hidden类型,输入框有内容时,可以点击清空图标清空。

属性 必填 默认值 可选值 示例值 说明
title 表单标题
titleWidth 90 数值即可 100 左侧标题的宽度
name 表单的name
value 表单的value,支持v-model绑定
hiddenValue 传入该值时,输入框将变为禁用状态,对用户展示value的值,hiddenValue将会传到服务端
type text text、number、hidden 表单类型,支持hidden
addOn 输入框右侧的文字块的文字
addOnLeft 输入框左侧的文字块的文字
isVertical false 标题和输入框是否垂直排列
showClearIcon true 是否显示清空图标
@tapAddOn 当点击输入框右侧文字块时触发的回调函数
@tapAddOnLeft 当点击输入框左侧文字块时触发的回调函数
其他属性与事件 与input组件一致
<inputs name="x.name|用户名" title="用户名" :value="data.name" :hiddenValue="data._id"></inputs>

【textareas 组件】

属性 必填 默认值 可选值 示例值 说明
title 表单标题
titleWidth 90 数值即可 100 左侧标题的宽度
name 表单的name
value 表单的value,支持v-model绑定
isVertical false 标题和文本框是否垂直排列
showClearIcon true 是否显示清空图标
autoHeight false 是否自适应高度
height 100 非自适应高度时的高度
其他属性与事件 与textarea组件一致
<textareas title="权限地址" @blur="inputBlur" name="x.url|权限地址" 
:value="data.url" placeholder="多个权限地址请用英文分号隔开"></textareas>

【datepicker 组件】

属性 类型 说明
showIcon Boolean 是否显示右侧的日历图标,默认true
name String 表单的name
endName String 表单的endName,如果是时间范围,表示结束时间的name
value String,Array 默认选中的日期,也是提交表单时的默认值,支持数组,如果是字符串的话,可以是用英文逗号分开的两个时间(开始和结束时间)
name String 表单的name
valueType String 表单的value的类型,string timestamp ,type为time时无效,默认为string
placeholder String 未选择日期时,显示的文字
color String 日历的颜色
showSeconds Boolean 是否显示秒
type String 时间类型:rangetime、range、time、date、datetime
format String 初始日期格式
showHoliday Boolean 显示公历节日
showTips Boolean 显示提示
beginText String 开始时间的文字,默认为:开始
endText String 结束时间的文字,默认为:结束
title String 表单标题
titleWidth Number 左侧标题的宽度
isVertical Boolean 标题和文本框是否垂直排列

【conditions 组件】

分页筛选条件组件

属性 必填 默认值 可选值 示例值 说明
list {title:"用户名",name:"name"},{title:"状态",name:"status",type:"select",list:[]} 筛选条件,数组,基本属性为:name、title、type、list,详见/pages/user/userList示例
conditions {} json 当前的筛选条件
confirmText 筛选 筛选按钮的文字
showFirst false 是否对外显示第一个筛选项
showCount 0 对外显示前面多少个筛选项
@confirm 确认筛选时的回调事件,e.conditions
<conditions :conditions="conditions" :list="conditonList" @confirm="submitSearch"></conditions>
data() {
    return {
        conditonList:[
            {title:"用户名",name:"name"}, //默认是输入框类型的,只需提供这两个属性即可
            //如果是下拉选择类型的,则需要提供list属性,两个键值对:title、value
            {title:"状态",name:"status",type:"select",list:[{title:"正常",value:0},{title:"禁用",value:1}]}, 
            //日期类型的筛选条件:可以配置name和endName,表示开始和结束时间,timeType是指日期格式,valueType可选为string字符串类型或timestamp时间戳类型(推荐):
            /**
             * rangetime 时间范围,精确到分钟
             * range 时间范围,精确到天
             * time 时间,小时:分钟
             * date 日期,年-月-日
             * datetime 日期时间,精确到分钟
             */
            //showSeconds属性表示是否显示秒,任何日期格式都可以搭配这个属性使用。
            {title:"时间",name:"startTime",endName:"endTime",type:"time",timeType:"rangetime",showSeconds:true,valueType:'timestamp'},
        ],
        conditions:{
            name : ""
        }
    }
},

【copy 组件】

一键复制的功能

属性 说明
text 要复制的文字内容
showIcon 文字右侧是否显示复制图标,默认true
<copy :text="data.text" :showIcon="false"></copy>

【empty 组件】

属性 类型 说明
list Array 列表数据,用于判断是否为空,展示数据为空的提示
loading Boolean 是否加载中,加载中的时候,会显示加载中的动画
tips String 当数据为空时的提示文字,默认:抱歉,暂无数据~
<empty :list="list" :loading="loading"></empty>

【images 组件 - 已废弃,由files组件替代】

图片显示、预览组件

属性 类型 说明
width Number 图片的宽度
isRound Boolean 是否是圆形图片,否则是方形图片,默认false
list String,Array 要展示的图片列表,可以是图片链接数组,也可以是英文逗号分开的多个图片链接,如果是json数组,需要指定valueKey
valueKey String 要展示的图片数据如果是json数组,可以通过该属性指定json数据中的哪个键名为图片链接
count Number 要展示的图片的数量,超出数量不展示,-1为不限制,默认-1
disabled Boolean 是否显示右上角的删除按钮,是否可以编辑,默认false
@remove 当删除图片时触发回调

【files 组件 】

文件显示、预览组件,支持图片、视频、音频三种类型的文件

属性 类型 说明
width Number 宽度
type String 类型:image、video、audio、pdf、apk、zip,默认为image
width Number 宽度,单位px,默认80
isRound Boolean 是否是圆形,否则是方形,默认false
list String,Array 要展示的文件列表,可以是文件链接数组,也可以是英文逗号分开的多个文件链接,如果是json数组,需要指定valueKey
valueKey String 要展示的文件数据如果是json数组,可以通过该属性指定json数据中的哪个键名为文件链接
count Number 要展示的文件的数量,超出数量不展示,-1为不限制,默认-1
disabled Boolean 是否显示右上角的删除按钮,是否可以编辑,默认false
@remove 当删除文件时触发回调

【labels 组件】

表单标题组件,主要为了对齐其他的表单布局使用

属性 必填 默认值 可选值 示例值 说明
title 表单标题
titleWidth 90 数值即可 100 左侧标题的宽度
isVertical false 标题和文本框是否垂直排列
isTop false 标题与右侧是否顶部对齐,否则垂直对齐

【layout 组件】

布局组件,所有页面使用

属性 类型 说明
title String 当前页面的标题
loading Boolean 是否加载中,加载中的时候,会显示加载中的动画
innerScroll Boolean 区域内容是否内部滚动,默认true
pageKey String 当前页面的唯一标识,用于左侧菜单显示选中状态
slot="titleLeft" 标题行左侧位置的插槽
slot="titleRight" 标题行右侧位置的插槽

【mores 组件】

当文本内容为多行时,只显示一行,点击该文字,可以展示显示全部,再次点击则收起。

<mores>{{item.content}}</mores>

【paginate 组件】

分页器组件,需要传入pageNumber(页码)属性和page(分页数据)属性。其中page属性详细结构如下,在BaseCloud的公共模块已对分页数据做了封装,直接调用即可返回该数据结构:

page: {
    pageNumber: 1, //页码
    lastPage: true, //是否最后一页
    totalPage: 1, //总页码
    list: [], //列表数据
    totalRow: 0, //总数据条数
    pageSize: 10 //每页条数
},

该组件会触发一个回调函数@switchPage,返回数据结构如下:

{
    pageSizeChanged : true , //每页数据条数是否切换
    pageNumber :  1 , //页码
    pageSize : 5 //每页数据条数
}

【tables 组件】

属性 类型 说明
list Array 列表数据
showEmpty Boolean 如果列表数据为空,是否展示暂无数据提示
slot="thead" 表格的标题栏,无须写tr
slot="tbody" 表格的内容
<tables :list="list">
    <block slot="thead">
        <th>角色名称</th>
        <th>类型</th>
        <th class="autoWidth">权限描述</th>
        <th>操作</th>
    </block>
    <block slot="tbody">
        <tr v-for="( x , index) in list" :key="index">
            <td>{{x.name}}</td>
            <td>{{x.typeStr}}</td>
            <td>{{x.remark}}</td>
            <td>
                <auth-nav :href="`/pages/role/roleEdit?id=${x._id}`" 
                url="admin/role/info" class="main bold plr5">
                    编辑
                </auth-nav>

                <auth-btn :url="`admin/role/delete?id=${x._id}`" confirm="delete" 
                @success="remove(index)" class="main bold plr5">
                    删除
                </auth-btn>
            </td>
        </tr>
    </block>
</tables>

【upload-images 组件,已废弃,由uploads组件替代】

图片上传组件,直接上传到云储存,支持多张图片上传

属性 类型 说明
count Number 最多可以上传多少张图片,默认不限制-1
name String 表单的name
value Array 默认显示的图片列表,可以是数组,也可以是英文逗号分割的图片地址,也可以通过valueKey来指定对象类型的图片数据的图片链接键名
valueKey String 如果value为数组并且每个图片对应的数据是一个json对象,可以通过valueKey来指定图片的链接对应的键名。指定了valueKey后,表单提交的value将会是一个JSON字符串型的数组。
deleteUrl String 当删除图片时,如果有配置删除的请求地址,则会向该地址发送请求,传入fileID参数,从云存储删掉该图片
@change 图片上传或删除时的回调,e.detail.value为图片链接数组,e.detail.files为包含图片详细信息的数组(不指定valueKey时默认图片链接为url字段)
@delete 图片删除成功的回调

【uploads 组件】

图片、音频、视频上传组件,直接上传到云储存,图片支持多张图片上传,其他文件每次只能上传一个,可以多次上传。

属性 类型 说明
type String 文件类型:image、video、audio、pdf、apk、zip,默认image
maxDuration Number 上传音频、视频的时长,单位:秒,默认600
count Number 最多可以上传多少个文件,默认不限制-1
width Number 宽度,单位px,默认80
name String 表单的name
value Array、String 默认显示的文件列表,可以是数组,也可以是英文逗号分割的文件地址,也可以通过valueKey来指定对象类型的文件数据的文件链接键名
valueKey String 如果value为数组并且每个文件对应的数据是一个json对象,可以通过valueKey来指定文件的链接对应的键名。指定了valueKey后,表单提交的value将会是一个JSON字符串型的数组。
parseArray boolean 未指定valueKey时,可通过设置parseArray:true来指定提交的value为数组类型,v2.1.4+支持
deleteUrl String 当删除文件时,如果有配置删除的请求地址,则会向该地址发送请求,传入fileID参数,从云存储删掉该文件
@change 文件上传或删除时的回调,e.detail.value为文件链接数组,e.detail.files为包含文件详细信息的数组(不指定valueKey时默认文件链接为url字段)
@delete 文件删除成功的回调,e.detail.value为文件链接,e.detail.index为文件在数组中的下标,e.detail.file为文件
//指定valueKey时,需要传入的value为一个数组或字符串数组,数组中每个元素为json对象
<uploads title="头像" name="x.avatar" valueKey="src" type="image" v-model="data.avatar" :count="1"></uploads>
export default {
    data() {
        return {
            data : {
                //可以为数组,也可以为字符串化的数组
                avatar : [
                    {
                        src : 'http://xxxx.com/xx.jpg' , //必填属性
                        size : 2501 //其他选填属性...
                    }
                ]
            }
        }
    },
}

【quote 组件】

一段引用语、提示语

属性 类型 说明
title String 标题
color String 颜色,默认主题色

【alerts 弹窗组件】

模态框,弹窗

属性 类型 说明
title String 标题
width String 弹窗宽度,支持px和%单位,默认50%。
height String 弹窗高度,支持px和%单位,默认80%。
slot="top" slot 插入弹窗顶部的内容,如果仅显示标题文字不满足需要,可以自定义这块的内容
slot="bottom" slot 插入弹窗底部的内容,一般按钮放这里

参考如下代码显示弹窗:

//定义弹窗的ref属性为alerts或其他自定义的名字
<alerts ref="alerts"></alerts>
showAlerts:function(){
    this.$refs.alerts.show(); //显示弹窗
    this.refs.alerts.hide();
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/

TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

  1. Definitions.

    "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.

    "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.

    "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.

    "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.

    "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.

    "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.

    "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).

    "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.

    "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."

    "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.

  2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.

  3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.

  4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:

    (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and

    (b) You must cause any modified files to carry prominent notices stating that You changed the files; and

    (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and

    (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.

    You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.

  5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.

  6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.

  7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.

  8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.

  9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.

    END OF TERMS AND CONDITIONS

    APPENDIX: How to apply the Apache License to your work.

    To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.

    Copyright [yyyy] [name of copyright owner]

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问