更新记录

2.2.4(2020-09-25)

  • 不得不说 nvue 的布局,样式问题简直就是个黑盒子
  • 修复了 i-buttoni-iconi-imagei-pagei-nav-bar 几个小问题
  • 新增部分组件根元素默认拥有 custom-stylecustom-class属性,方便自定义样式

2.2.3(2020-09-22)

  • 支持微信小程序 (目前还只在模拟器上测试过)
  • 新增部分组件根元素默认拥有 custom-stylecustom-class属性,方便自定义样式
查看更多

iui - 一个基于 uni-app 的 UI 组件库(兼容NVUE)

介绍

iui 是适用于APP,兼容NVUE的UI组件库,非常适合面向app用户的跨端开发。

快速体验

Hello Iui 演示示例发布页面,点击跳转

记得帮我点点 start,鼓励鼓励我这个切图仔

快速上手

  1. 下载组件库

仅仅只需要拷贝下示例源码根目录下的 /components/iui,到你的项目/components,不会对现有项目有任何影响。

// 代码演示
<template>
    <view class="container">
        <i-button type="default">默认按钮</i-button>
    </view>
</template>


// 引入
import IButton  from '@/components/i-ui/i-button/i-button.vue'

export default {
    // 注册
    components: {
        IButton,
    }
    // 其他代码...
}
  1. 关于SCSS

iui 有依赖scss,请务必有安装 sass

  1. 配置easycom组件模式(无需引用、注册,即可直接在页面中使用)

在项目根目录下的 pages.json 中进行配置,完成后重启HX或者重新编译项目,即可正常使用。

// pages.json
"easycom": {
    "autoscan": true,
    "custom": {
        "uni-(.*)": "@/components/uni-ui/uni-$1/uni-$1.vue",
        "i-(.*)": "@/components/i-ui/i-$1/i-$1.vue"
    }
}

项目目录结构

...

设计思路

iui 的组件设计基本参考了uni-app官方组件库,vant-ui,weexui的实现,尽可能的保持各平台特色,力求打造高性能,高质量的组件库,上手简单,易于使用的目标。

后续强制遵循规范

如何设计一个前端通用组件

在一篇文章看到的,至于出处就不知道了

组件的形态(DOM结构)永远是千变万化的,但是其行为(逻辑)是固定的,因此通用组件的秘诀之一 就是将 DOM 结构的控制权交给开发者,组件只负责行为和最基本的 DOM 结构。

关于单位

在页面开发中,通常都是一水的使用rpx 单位进行布局的,这是不推荐的,更推荐的做法是 只有元素的单位要根据屏幕宽度大小变化时,才需要用rpx。而字体大小是没必要根据屏幕宽度变化。 因为屏幕更大是为了显示更多的内容,而不是显示更大,不是吗。

开源协议

MIT © 2020 Joeshu

隐私、权限声明

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

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

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

许可协议

MIT协议

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