更新记录

1.0.7(2021-04-14)

完善文档显示

1.0.6(2021-04-14)

取消页面渲染,直接返回数据,使用更灵活

修复多选出现的问题

增加标识符,便于富文本插件等模式的调用

增加示例及富文本使用的示例

完善文档

查看更多

平台兼容性

阿里云 腾讯云
Vue App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
vue2 3.1.0 × × × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

uniCloud admin插件通用教程:

uniCloud admin是一套基于uniCloud的开源应用管理端系统。详见:uniCloud admin 基础框架
本插件是uniCloud admin系统的扩展插件,为开发者的admin系统添加功能。
需先确保本机有uniCloud admin项目,然后将此插件导入到uniCloud admin项目下。
如本机没有uniCloud admin项目,需要先在HBuilderX中新建项目 -> uni-app项目 -> 选择uniCloud admin模板。
如本机的uniCloud admin项目版本过老,可能无法使用新插件,需及时升级本机的uniCloud admin项目。详见uniCloud admin项目更新日志


old-static-admin

注意:

1、本插件仅适用官网unicloud admin(需要其部分组件),其他管理后台暂未做兼容处理,可自行研究

2、右键插件安装unicloud-admin三方插件uni-file-picker(FilePicker插件)/ 或手动安装unicloud-admin三方插件uni-file-picker,并引用:https://ext.dcloud.net.cn/plugin?id=4079

3、增加了使用方式:区别不同模式的使用情况,需要在本地定一个String属性,在调用插件的chooseImg方法时传入:

this.$refs.old_static_admin.chooseImg(this.user_type)

安装

1、对已关联云服务空间的unicloud admin项目,导入本插件

2、找到/uni_modules/old-static-admin/uniCloud/cloudfunctions/files,右键上传部署

3、找到/uni_modules/old-static-admin/uniCloud/database/db_init.json,右键初始化数据库,并上传schema文件

4、在项目pages对应页面,使用组件:

<!-- 注意:此处limit需要配合数据库schema的maxLength -->
<old-static-admin ref="old_static_admin"  :use_limit="2"  :up_limit="3" file_type="image"  @selectedfile="confirmChoosefile"></old-static-admin>

5、或在函数中调用插件方法:chooseImg,调用时需传输string参数,用于标识 5、使用,返回object数组, 可按照所需获取对应的数据或文件url 格式:

[
    "_id": "数据库文件记录id"
    "file": {
        "name": "zhongzi.jpeg",
        "extname": "jpeg",
        "url": "https://xxx.jpeg",
        "size": 45231,
        "image": {},
        "fileType": "image"
    },
    "createTime": 1618306150448
]

6、运行项目到Chrome

注意:file_type,目前仅支持image和video,audio不支持单独使用,可使用all过滤,其他文件格式暂不支持

由于插件依赖一些官方组件,建议右键/uni_modules/old-static-admin安装一下第三方依赖,否则可能会出现一些问题

参数:

属性名 类型 默认值 可选值 说明
staticList array - 已废弃 当前选定使用文件
use_limit Number 5 需注意数据表schema文件的maxlength 单次最大使用数量
use_type String comm 任意字符串 不使用组件模式,调用chooseImg时传入,用于标识
up_limit Number 9 1-9 单次可上传的文件数量
file_type String all all、image、audio、video 目前支持管理的文件
@selectedfile 返回当前所选择的资源文件
/*说明
    `*`
    `* 1、staticList:当前已使用资源的数组`
    `* 2、use_limit:可使用资源的数量限制,默认:5;此处需要配合被使用数据表字段的最大值限制:schema的maxLength`
    `* 3、up_limit:单次上传最大数量,默认:9`
    `* 4、use_type:插件使用标识符:调用子组件chooseImg函数时传入(如富文本调用),组件模式不传入`
    `* 4、file_type:资源类型过滤:all、imgae、video`
    `*` 
    */

使用

1、在工程页面使用组件:staticList为已选定的数组内容

<old-static-admin ref="old_static_admin"  :use_limit="2"  :up_limit="3" file_type="image"  @selectedfile="confirmChoosefile"></old-static-admin>

2、点击添加图标可新增或修改数组内容

3、弹出浮窗:获取数据表资源文件:可进行搜索、新增和删除操作 批量删除和确认使用:需勾选复选框后进行操作

4、添加文件

官方富文本插件的图片使用,替换本插件示例

1、需要重写官方插件的@tap="insertImage",即富文本图片上传函数:

//调用文件管理模块,开始选择文件
insertImage() {
    //此处通过方法调用插件时,可在此传入模式
    this.$refs.old_static_admin.chooseImg("fuwenben")
}

2、向富文本赋值:

//获取最终选择结果,赋值编辑框
confirmChoosefile:function(e){
    console.log(e)
    e.data.map(item => {
        console.log(item)
        console.log(item.file.url)
        //此处判断调用时传入的表示符,再做处理
        if(e.use_type == "fuwenben"){
        //对编辑框赋值
        this.editorCtx.insertImage({
            src: item.file.url,
            alt: '图像',
            success: function() {
                console.log('insert image success')
            }
        })
        }else if(e.use_type == this.use_type){
            console.log("qw222")
        }
    })

}

项目示例包使用说明(含富文本使用):

1、下载示例包,使用Hbuilder X开发工具打开;

2、关联云服务空间,并运行云服务空间初始化向导

3、打开pages/index,页面即可体验插件

若存在后台账号密码:admin-123123

第一次发布插件,很多不熟悉,也是自己项目所需,就封装了一下,如存在问题,请留言,尽力第一时间完善

隐私、权限声明

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

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

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

许可协议

MIT协议

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