更新记录
1.1.1(2020-11-11)
新增组件
添加d-divider分割线组件
添加d-line单元行组件
添加d-shadow阴影组件
添加d-select-tags可选组件
优化组件
优化d-page组件出现页面级滚动条情况
优化d-row/d-colunm组件。1.添加属性 border-custom 自定义边框颜色,示例 [2rpx,#000000,left] || [2rpx,#000000],2.添加 @touchstart、@touchend、@touchcancel、@touchmove事件,3.添加 hover 属性,点击效果,默认false,4.添加 disabled 禁用效果,默认false,5.添加 delta 属性,当 open-type 为 navigateBack 时有效,表示回退的层数,默认为1,6.navigate 属性变更 open-type,7.添加 hover-rgba 属性,点击状态颜色,默认rgba(205,205,205,0.2),8.wh-uni 属性变更 unit ,radius、margin、padding 属性不参与单位置换,9.添加 bg-gradient 属性,自定义渐变背景色,示例:[left,#000000,#FFFFFF],10.添加 min-width(最小宽度)、max-width(最大宽度)、min-height(最小高度)、maxHeight(最大高度),11.添加 left、right、top、bottom 容器距离左、右、上、下边缘
优化d-button组件。1.添加style-custom 属性,自定义样式,2.移除form-type属性,3.添加 hover-rgba 属性,点击状态颜色,默认 rgba(0, 0, 0, 0.2),4.添加bg-gradient 自定义渐变颜色,示例 [left,#000000,#FFFFFF]
优化d-image组件。1.添加 is-gif 属性,判断当前是否为gif图,如果为gif需填写参数 true
优化d-rich-text组件。1.添加 style-custom 属性, 容器自定义样式
优化d-tabs组件。1.优化初始化显示底部bar错位的情况
优化d-text组件。1.添加 minWidth(最小宽度)、maxWidth(最大宽度)属性
1.1.0(2020-10-21)
DNVUE UI 1.1.0 正式版本
经过测试版本十来天的测试,收集反馈的信息,调整的正式版本1.1.0正式上线,欢迎小伙伴们体验。DNVUE UI 官方文档
交流反馈
DNVUE UI 交流群 : 871507982
目录结构
┌─dnvue-ui //dnvue ui 目录
│ ├─components //组件
│ ├─iconfont //字体图标.ttf文件目录
│ ├─dnvue-ui.scss //核心样式文件
│ └─tool //js工具库目录
│ ├─validate.js //表单验证/数据验证js
│ └─tools.js //常用js工具
├─static
├─App.vue //全局引入dnvue-ui.scss核心文件
├─main.js
├─manifest.json
├─pages.json
└─uni.scss //全局css样式配置
组件介绍
基础组件
页面组件(d-page)
用于整体页面的布局规划,分化了导航栏 ( nav ) 、头部 ( header ) 、中部、底部 ( footer ) 四部分,在复杂布局情况下更加便捷快速,可配合预加载,整体体验效果更佳
行布局(d-row)
用于构建页面内的行布局,只要使用行布局组件与列布局组件,一般不用再编写class样式,不再为去class名字而烦恼,一步到位。页面也将是全部组件构建而成,优雅简洁大方。
列布局(d-column)
用于构建页面内的行布局,只要使用行布局组件与列布局组件,一般不用再编写class样式,不再为去class名字而烦恼,一步到位。页面也将是全部组件构建而成,优雅简洁大方。
文本(d-text)
在nvue中,所有的文本显示都需要使用 text 组件进行展示,d-text 对 text 进行封装,包含常用的属性样式,解决重复写class样式。
图片(d-image)
该组件封装加强 组件,除了原有的功能外,添加圆角设置,加载失败,阻止事件冒泡等常用功能。
图标(d-icon)
收集 360+ 阿里字体图标,图标统一风格,满足大部分场景需求
按钮(d-button)
封装button组件,灵活控制宽度、高度、圆角尺寸、颜色
反馈组件
空展示(d-empty)
显示数据结果页,根据不同结果显示不同的展示
全屏加载(d-full-load)
用于整页数据未加载时的全屏加载动画
角标(d-full-load)
数字角标(徽章)组件,在元素周围展示消息提醒
上拉加载(d-full-load)
用于上拉加载更多数据时的反馈信息
弹出层(d-popup)
支持从多个方向弹出(上、下、左、右、中),带有动画效果
导航组件
选项卡(d-tabs)
带动画的选项卡,可均分,可超出滑动
其他组件
富文本解析(d-rich-text)
一般用于富文本解析,例如新闻内容、文章内容、评论显示、推广信息等各类HTMl标签内容显示
查看更多
DNVUE UI
介绍
基于uni-app平台开发的一套轻量便捷nvue组件库
特性
全页面组件化,让您无需再写class与style,美观简洁大方
360+ 阿里字体图标,图标统一风格,满足大部分场景需求
丰富的组件库,众多模板让您快速集成
详细的官方文档,分享 nvue 下好的插件与学习经验,避免踩坑
按需引入,精简打包体积
官方文档
交流反馈
DNVUE UI QQ交流群 : 871507982
码云地址
插件市场地址
安装教程
方式一(推荐)
在uni-app插件市场选择 使用Hbuilder X导入插件 或者 使用Hbuilder X导入示例项目,
导入时删除已存在的项目名称 DNVUE UI纯nvue组件库......,填写自己项目名称,然后创建即可得到已配置好 dnvue-ui 的uni-app空项目,直接上手开发。
方式二
DnVUE UI 配置方式
版权信息
DNVUE UI 遵循 MIT 开源协议,完全开源免费。