更新记录

1.0.3(2021-05-30)

新增 dx-el-images 多图预览
表格大小调整为mini
修复已知问题

1.0.2(2021-05-25)

新增菜单选择icon 新增远程选择组件 dx-select 支持简易代码生成

查看更多

平台兼容性

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

云函数类插件通用教程

使用云函数类插件的前提是:使用HBuilderX 2.9+


dx-uni-router-admin

基于 uniCloud-admin 和 elementui 的 dx-uni-router-admin 后台管理项目模板.

phper 转 unicloud 初来发布,不足之处请多多包涵!

已上架一键生成dx-admin 模块,快速开发!

安装说明:

Hbuilderx 导入插件后,在项目根目录,打开cmd

运行一下命令:

npm install element-ui --save

npm install vue-layer --save

注意事项:

项目依赖公共模块 dx-router-admin
项目依赖云函数模板 dx-func-admin
所以导入完后台模板后,需要导入公共模块 dx-router-admin 导入云函数模板dx-func-admin

默认会初始化账号为:admin 密码为 123456,登录后,请自行修改账号密码。

演示站点为:https://static-0463ff94-c5c8-452d-9de1-fb94396fc530.bspapp.com/

组件

  1. dx-array
    <dx-array v-model="value" :titles="['键','值']" :fields="['key','value']"></dx-array>
    //titles 显示的标题
    //fields 字段名称
  2. dx-el-images

    图片展示
    <dx-el-images images="http://image.png,http://image.png" separator="," width="40" height="40" margin-left="3"></dx-el-images>
    或
    <dx-el-images :images="['http://image.png','http://image.png']" width="40" height="40" margin-left="3"></dx-el-images>
    
  3. dx-icon
    <dx-icon name="kongzhitai" size="30" color="#000" isHoverRadius="true"></dx-icon>
  4. dx-select
    下拉选择【远程搜索】
    <dx-select v-model="value" placeholder="请输入关键词" multiple="false" url="admin/test/index" funcName="dx-func-admin" 
    where="{title:['like','关键词']}" primary="_id" label="title" formatCallback="function(){}">
    </dx-select>
  5. dx-table-header
    列表顶部操作
    <dx-table-header showTabs="true" showAdd="true" tabName="name" tabList="[{name:'测试1',_id:sdf},{name:'测试2',_id:sdff}]" tabValue="_id"
    tabSearch="title" tabOp="like" searchField="name,title" funcName="dx-func-admin"></dx-table-header>
    //showTabs 顶部的tabs选项卡
    //showAdd 添加按钮
    //tabName tabs选项卡显示的字段
    //tabList tabs 选项卡的数据
    //tabValue tabs 选项卡的取值字段
    //tabSearch tabs选项卡对应列表的搜索字段
    //tabOp tabs 搜索操作 = like > < 等
    //searchField 右侧input 模糊搜索的字段 多字段以逗号分隔
  6. dx-table-pages
    列表的底部分页
    <dx-table-pages page="1" total="100"></dx-table-pages>
  7. dx-table-switch
    表格开关字段的渲染,支持true/false 0/1
    <dx-table-switch active-color="#f3f3f3" inactive-color="000" :defVal="scope.row.enable" bfdUrl="admin/menu/edit_bfd" :_id="scope.row._id" 
    field="enable" funcName="dx-func-admin" @change="change"></dx-table-switch>
  8. dx-tinymce
    <dx-tinymce v-model="value" height="400" config="{}" filetype=""></dx-tinymce>
    //format html/text
    // config 配置项
    //filetyep ['.txt','.pdf'] 上传文件类型
  9. dx-upload
    <dx-upload v-model="value" show-select="" max-count="1" width="105" height="105" max-size="10" fileType="['.txt','.pdf']" separator=","></dx-upload>
    //show-select 是否可以选择远程图片
    //separator 多图时为字符串的分隔符,不填,默认是数组
    //max-count 默认1 上传一张图片,大于1为多图
    //max-size 默认10 允许上传的文件大小
    //fileType 文件类型

挂载了 this.$dx 对象函数集合

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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