vue连线 插件_DNVUE UI纯nvue组件库,新增阴影、单元行、可选、分割线组件

于嘉誉
2023-12-01

更新记录

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 开源协议,完全开源免费。

 类似资料: