Giter VIP home page Giter VIP logo

uview's Introduction

logo

uView

多平台快速开发的UI框架

star fork stars forks issues Website release license

说明

uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水

官方1群:1042987248(已满)

官方2群:249718512(已满)

官方3群:1129077272(已满)

官方4群:1084514613(已满)

官方5群:863820668(已满)

官方6群:745721078(已满)

官方7群:627867855(已满)

官方8群:496409492(已满)

官方9群:828504448(已满)

特性

  • 兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序
  • 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
  • 众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨
  • 众多的常用页面和布局,让您专注逻辑,事半功倍
  • 详尽的文档支持,现代化的演示效果
  • 按需引入,精简打包体积

预览

您可以通过微信扫码,查看最佳的演示效果。

友情链接

vue-admin-beautiful —— 在线演示


链接

交流反馈

欢迎加入我们的QQ群交流反馈:点此跳转

关于PR

我们非常乐意接受各位的优质PR,但在此之前我希望您了解uView2.0是一个需要兼容多个平台的(小程序、h5、ios app、android app)包括nvue页面、vue页面。 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢!

安装

快速上手

  1. main.js引入uView库
// main.js
import uView from 'uview-ui';
Vue.use(uView);
  1. App.vue引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
  1. uni.scss引入全局scss变量文件
/* uni.scss */
@import "uview-ui/theme.scss";
  1. pages.json配置easycom规则(按需引入)
// pages.json
{
	"easycom": {
		// 下载安装的方式需要前面的"@/",npm安装的方式无需"@/"
		// 下载安装方式
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
		// npm安装方式
		// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

请通过快速上手了解更详细的内容

使用方法

配置easycom规则后,自动按需引入,无需import组件,直接引用即可。

<template>
	<u-button>按钮</u-button>
</template>

请通过快速上手了解更详细的内容

捐赠uView的研发

uView文档内容和框架源码全部开源免费,如果您认为uView帮到了您的开发工作,您可以捐赠uView的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。

版权信息

uView遵循MIT开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。

uview's People

Contributors

2460392754 avatar beiqiaot avatar dd-boom avatar iis8 avatar isxiaoxin avatar itcastwsy avatar jay-qianjue avatar likui628 avatar nadirvishun avatar nitmali avatar nottwoc avatar tsong-lc avatar tttao7 avatar walkingmoonwell avatar wlxuqu avatar xingsir1991 avatar yang4515 avatar yanxinnet avatar yatoku avatar zhong1998 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

uview's Issues

[BUG] Pikcer组件

picker 组件中 params 传入参数 pickerParams: {year: true, month: false, day: false }时
1、同时配置startYear、endYear会导致选择列表为空

<u-picker startYear="1960" 
          endYear="2030" 
          v-model="historyShow" 
          :params="pickerParams" 
          mode="time">
</u-picker>

2、仅配置startYear时,defaultTime传入年份无效,若defaultTime手动拼接'-'号到年份末尾,则可正常显示
直接传入年份

<u-picker startYear="1960" 
          default-time="2002" 
          v-model="historyShow" 
          :params="pickerParams" 
          mode="time">
</u-picker>

手动拼接‘-’到年份末尾

<u-picker startYear="1960" 
          default-time="2002-" 
          v-model="historyShow" 
          :params="pickerParams" 
          mode="time">
</u-picker>

3、仅配置endYear时,选择列表为空

<u-picker endYear="1960" 
          v-model="historyShow" 
          :params="pickerParams" 
          mode="time">
</u-picker>

Grid组件出问题

前面用的好好的,今天npm update一下,就出问题了。
gird-item没有宽度
gird组件里所有东西都挤到了一起
gird-item没有宽度
gird-item组件没有宽度,查看源码,发现
/lib/mixin/mixin.js中
Snipaste_2020-05-23_04-02-20
这。。。
写反了吧???
把它改回来就恢复正常了
Snipaste_2020-05-23_04-03-49
Snipaste_2020-05-23_04-05-17

HTTP组件get,post

设置了出现加载图标参数,第一次的时候能出现加载图标,但是后面如果请求的地址不存在,或者失败,再次点击请求方法的时候loadding图标就不再出现了;并且希望在出现加载图标的时候,是遮罩形式,屏幕其它地方希望是不能点击的!否则客户可能出现多次点击

导入错误

快速上手中的3

/* uni.scss */
@import "uview-ui/themb.scss";

应修改为

/* uni.scss */
@import "uview-ui/theme.scss";

indexlist 索引列表文档错误。

K(~WK7_VE25XU%%E7{B4FNB
文档中的highlight-color在实际运用过程中不起作用。查看了源码,源码中的props为activeColor,请修复文档或者更改源码。

Picker组件地区模式是否可以用6位的区域编码?

首先赞一下开源项目、的确很优秀。这里有个小建议:
Picker选择器的地区模式,使用的数据源的区域编码长度不一,是否考虑使用统一长度的编码格式
["13", "1303", "130304"] => ["130000", "130300", "130304"],后者的格式项目中好像看到的多一点。

使用uniapp的image组件,不设置高度,骨架屏组件报错

// 查询各节点的信息
selecterQueryInfo() {
// 获取整个父组件容器的高度,当做骨架屏的高度
uni.createSelectorQuery().selectAll('.u-skeleton').boundingClientRect().exec((res) => {
this.windowHeight = res[0][0].height;
this.windowWinth = res[0][0].width;
this.top = res[0][0].bottom - res[0][0].height;
this.left = res[0][0].left;
});
// 矩形骨架元素
this.getRectEls();
// 圆形骨架元素
this.getCircleEls();
// 圆角骨架元素
this.getFilletEls();
},
需要加一层非空判断

微信小程序报错


componentNormalizer.js:57 Uncaught TypeError: Cannot set property '_scopeId' of undefined
    at normalizeComponent (componentNormalizer.js:57)
    at Module._ (u-cell-item.vue?5442:11)
    at __webpack_require__ (bootstrap:90)
    at Object.nodeModulesUviewUiComponentsUCellItemUCellItemCreateComponent (u-cell-item.vue?ab08:7)
    at __webpack_require__ (bootstrap:90)
    at checkDeferredModules (bootstrap:47)
    at Array.webpackJsonpCallback [as push] (bootstrap:34)
    at u-cell-item.vue?ab08:7
    at require (VM17897 WAService.js:1)
    at <anonymous>:230:7

关于文档和案例微小的建议

平台端展示 Layout-布局 那块希望看到 flexwarpmarginpadding 相关的展示,还有 文本 相关的处理,后面是在PC端翻文档才找到的😂,原来放在开发指南的 内置样式 里面,怪我不够细心,差点就自己写css了。
希望把这些的案例也放在展示案例上,方便刚用你UI的新手查看,知道作者也做了这部分工作。
UI做得不错,加油 ~

如果两个页面都有Sticky 组件,来回撤回的时候,会弹出bottom错误

h5-nav-height这个属性惹的,困了几周了希望尽快解决~
index.umd.min.js?1c31:1 Uncaught TypeError: Cannot read property 'bottom' of null
at o (index.umd.min.js?1c31:1)
at eval (index.umd.min.js?1c31:1)
at Array.forEach ()
at IntersectionObserver.a..IntersectionObserver.root (index.umd.min.js?1c31:1)
o @ index.umd.min.js?1c31:1
eval @ index.umd.min.js?1c31:1
a..IntersectionObserver.root @ index.umd.min.js?1c31:1

建议:SwipeAction 滑动单元格 优化

在测试官方demo时候发现以下问题
1、在进行SwipeAction 滑动时,滑动一点会自动弹出,但是未弹出整个操作栏,隐藏了一些
2、在进行点击操作时,点击状态为 '打开' 时,操作栏未完全滑出,隐藏了部分操作栏(与第一栏问题一样)

CellItem Slot 文档错误

文档是下面这样

CellItem Slot
名称 | 说明
title | 自定义左侧标题部分的内容,如需使用,请勿定义title参数,或赋值null即可
icon | 自定义左侧的图标
right-icon | 自定义右侧图标内容,需设置arrow为false才起作用
label | 自定义label内容,需同时设置use-label-slot为true

但是代码是这样的

<template>
	<view @tap="click" class="u-cell-item-box" :class="{'u-cell-border': itemIndex > 0 }" hover-stay-time="150" :hover-class="hover ? 'u-hover-class' : ''" :style="{
		backgroundColor: bgColor
	}">
		<view class="u-cell-content">
			<view class="u-icon-wrap" v-if="icon">
				<u-icon size="32" :name="icon" class="u-icon"></u-icon>
			</view>
			<view class="u-icon-wrap">
				<slot name="icon"></slot>
			</view>
			<view class="u-cell-title" :style="[titleStyle]">
				<text class="u-title-text" v-if="title">{{title}}</text>
				<slot name="left"></slot>
			</view>
			<view class="u-cell-value" v-if="value">
				<text class="u-value-text" :style="[valueStyle]" v-if="value">{{value}}</text>
			</view>
			<view v-else class="u-slot-wrap">
				<slot name="right"></slot>
			</view>
			<view :style="[arrowStyle]" class="u-icon-wrap">
				<u-icon v-if="arrow" size="26" class="u-arror-right" color="#969799" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="u-cell-label" v-if="label" :style="[labelStyle]">
			{{label}}
		</view>
	</view>
</template>

1.2.6版本NumberBox 步进器无法减到0

版本:1.2.6
组件:NumberBox
问题:无法通过+、-将数字减到0;1.2.5版本正常
原因:
1.2.6版判断为:let tmp = /(^\d+$)/.test(v1) && String(v1)[0] != 0;
1.2.5版本判断为:let tmp = /(^\d+$)/.test(v1) && value[0] != 0;

建议: 给组件添加一个自定义class属性

添加这样一个属性能够方便开发者在小程序环境(例如微信小程序)中使用组件添加的class时候,能够直接添加在组件本身上,而不是在shadow-root的容器标签上

例如:

<u-button :custom-class="customClass">雪月夜</u-button>

http请求没法取消

使用http请求api,无法取消对应的请求,是否可以提供请求的cancelToken

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.