更新记录

1.0.3(2021-08-25)

  • 新增 适配 vue3

1.0.2(2021-07-07)

  • 修复 子组件 uni-menu-sidebar 内置图标样式,可在 uni-icons.css 中扩展图标
  • 修复 示例项目无法运行的问题

1.0.1(2021-04-30)

  • 修复 css 缺少变量的bug
  • HbuilderX/cli最低兼容版本 3.1.0
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

DataMenu 数据驱动的菜单组件

代码块: uDataMenu

<uni-data-menu> 是一个展示类datacom组件,自带查询的侧边栏菜单。

<uni-data-menu> 支持本地数据、云端静态数据(json),uniCloud云数据库数据。

<uni-data-menu> 可以通过JQL直连uniCloud云数据库。

在uniCloud数据表中新建表“opendb-admin-menus”,自动从“opendb-admin-menus”表查询包含的所有菜单。

为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。

  • 组件需要依赖 sass 插件 ,请自行手动安装
  • 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839

平台差异说明

暂不支持在nvue页面中使用

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册componets

如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55

API

DataMenu Props

属性名 类型 可选值 默认值 说明
v-model String 当前激活菜单的 url
active-text-color String 选中、激活文字的颜色
unique-opened Boolean true/false false 是否只保持一个子菜单的展开
localdata Array 数据,详情
collection String 表名。支持输入多个表名,用 , 分割
field String 查询字段,多个字段用 , 分割
where String 查询条件,内容较多,另见jql文档:详情
orderby String 排序字段及正序倒叙设置

collection/where/orderby<unicloud-db> 的用法一致,详情

DataMenu Events

事件称名 类型 说明
@select EventHandle 选择完成时触发返回被点击的菜单对象 {item}

基本用法

  • localdatacollection 同时配置时,localdata 优先

云端数据

  • 云端数据需要关联服务空间
  • 下面示例中使用的表 opendb-admin-menus(菜单表), 在uniCloud控制台使用opendb创建,详情
<template>
  <view>
    <uni-data-menu v-model="activeUrl" active-text-color="#409eff" collection="opendb-admin-menus" field="menu_id as value, name as text" orderby="value asc" @select=""></uni-data-menu>
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      (e) {
        const value = e.value
      }
    }
  }
</script>

本地数据

<template>
  <view>
    <uni-data-menu :localdata="localMenus" :unique-opened="true" :active="activeUrl" active-text-color="#409eff" @select=""></uni-data-menu>
  </view>
</template>

<script>
  export default {
    data() {
      return {
       activeUrl: '',
       localMenus: [{
            menu_id: "demo",
            text: '静态功能演示',
            icon: 'uni-icons-list',
            value: "",
            children: [{
                menu_id: "icons",
                text: '图标',
                icon: '',
                value: '/pages/demo/icons/icons',
            }, {
                menu_id: "table",
                text: '表格',
                icon: '',
                value: '/pages/demo/table/table',
            }]
        }]
      }
    },
    methods: {
      (e) {
        const value = e.url
      }
    }
  }
</script>

自定义solt

通过 slot 插入静态菜单

<template>
  <view>
    <uni-data-menu v-model="activeUrl" active-text-color="#409eff" collection="opendb-admin-menus" field="menu_id as value, name as text" orderby="value asc" @select="">
            <uni-menu-sidebar :data="staticMenu"></uni-menu-sidebar>
        </uni-data-menu>
  </view>
</template>

<script>
  export default {
    data() {
      return {
                staticMenu: [{
                    menu_id: "demo",
                    text: '静态功能演示',
                    icon: 'uni-icons-list',
                    value: "",
                    children: [{
                        menu_id: "icons",
                        text: '图标',
                        icon: '',
                        value: '/pages/demo/icons/icons',
                    }, {
                        menu_id: "table",
                        text: '表格',
                        icon: '',
                        value: '/pages/demo/table/table',
                    }]
                }]
      }
    },
    methods: {
      (e) {
        const value = e.url
      }
    }
  }
</script>

隐私、权限声明

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

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

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

许可协议

uni-data-menu(以下简称软件)源码使用许可协议

2022年10月

本许可协议,是数字天堂(北京)网络技术有限公司(以下简称DCloud)对其所拥有著作权的“软件”,提供的使用许可协议。

您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束,如您不接受本协议,则不能使用、复制、修改本软件。

授权许可范围

a) 授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可,您可以使用这些源码制作自己的应用。

b) 您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境,比如客户端脱离uni-app,或服务端脱离uniCloud(如涉及uniCloud)。

c) DCloud未向您授权商标使用许可。您在根据本软件源码制作自己的应用时,需以自己的名义发布软件,而不是以DCloud名义发布。

d) 本协议不构成代理关系。

DCloud的责任限制 “软件”在提供时不带任何明示或默示的担保。在任何情况下,DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。

您的责任限制

a) 您需要在授权许可范围内使用软件。

b) 您在分发自己的应用时,不得侵犯DCloud商标和名誉权利。

c) 您不得进行破解、反编译、套壳等侵害DCloud知识产权的行为。您不得利用DCloud系统漏洞谋利或侵害DCloud利益,如您发现DCloud系统漏洞应第一时间通知DCloud。您不得进行攻击DCloud的服务器、网络等妨碍DCloud运营的行为。未经书面许可,您不得利用DCloud的产品进行与DCloud争夺开发者的行为。

d) 如您违反本许可协议,需承担因此给DCloud造成的损失。

本协议签订地点为中华人民共和国北京市海淀区。

根据发展,DCloud可能会对本协议进行修改。修改时,DCloud会在产品或者网页中显著的位置发布相关信息以便及时通知到用户。如果您选择继续使用本框架,即表示您同意接受这些修改。

条款结束

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