Commit 6ef0ec4b authored by wlxuqu's avatar wlxuqu

项目从gitee转移到github

parent 1adea458
<p align="center">
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
<h3 align="center">多平台快速开发的UI框架</h3>
## 说明
uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
## 特性
- 兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序
- 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
- 众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨
- 众多的常用页面和布局,让您专注逻辑,事半功倍
- 详尽的文档支持,现代化的演示效果
- 按需引入,精简打包体积
## 安装
```bash
# npm方式安装
npm i uview-ui
```
## 快速上手
1. `main.js`引入uView库
```js
// main.js
import uView from 'uview-ui';
Vue.use(uView);
```
2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
```css
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
```
3. `uni.scss`引入全局scss变量文件
```css
/* uni.scss */
@import "uview-ui/themb.scss";
```
4. `pages.json`配置easycom规则(按需引入)
```js
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
```
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 使用方法
配置easycom规则后,自动按需引入,无需`import`组件,直接引用即可。
```html
<template>
<u-buton>按钮</u-buton>
</template>
```
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 链接
- [官方文档](https://uviewui.com/)
- [更新日志](https://uviewui.com/components/changelog.html)
- [升级指南](https://uviewui.com/components/changelog.html)
- [关于我们](https://uviewui.com/cooperation/about.html)
## 预览
您可以通过**微信**扫码,查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
<!-- ## 捐赠uView的研发
uView文档和源码全部开源免费,如果您认为uView帮到了您的开发工作,您可以捐赠uView的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
<img src="https://uviewui.com/common/wechat.png" width="220" >
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
-->
## 版权信息
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。
<template>
<view>
<view v-for="(Item,index) of dataList" >
<u-number-box :value="Item['num']" @change="valChanges"></u-number-box>
</view>
</view>
</template>
......
......@@ -12,8 +12,8 @@
* @property {Boolean} accordion 是否手风琴模式(默认true)
* @property {Boolean} arrow 是否显示标题右侧的箭头(默认true)
* @property {String} arrow-color 标题右侧箭头的颜色(默认#909399)
* @property {String} head-bg-color 标题的背景颜色(默认#ffffff)
* @property {String} body-bg-color 主体内容的背景颜色(默认#ffffff)
* @property {Object} head-style 标题自定义样式,对象形式
* @property {Object} body-style 主体自定义样式,对象形式
* @property {String} hover-class 样式类名,按下时有效(默认u-hover-class)
* @event {Function} change 当前激活面板展开时触发(如果是手风琴模式,参数activeNames类型为String,否则为Array)
* @example <u-collapse></u-collapse>
......
......@@ -7,7 +7,7 @@
}"
>
<view class="u-icon-wrap">
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="34" :color="computeColor"></u-icon>
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
</view>
<swiper :disable-touch="disableTouch" @change="change" :autoplay="autoplay && playState == 'play'" :vertical="vertical" circular :interval="duration" class="u-swiper">
<swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item">
......@@ -95,6 +95,11 @@ export default {
type: [Number, String],
default: 2000
},
// 音量喇叭的大小
volumeSize: {
type: [Number, String],
default: 34
},
// 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度
speed: {
type: Number,
......
......@@ -20,7 +20,7 @@
</view>
</view>
<!-- 解决fixed定位后导航栏塌陷的问题 -->
<view class="u-navbar-placeholder" v-if="isFixed" :style="{width: '100%',height: navbarHeight + statusBarHeight + 'px'}">
<view class="u-navbar-placeholder" v-if="isFixed" :style="{width: '100%',height: Number(navbarHeight) + statusBarHeight + 'px'}">
</view>
</view>
......
......@@ -10,6 +10,7 @@
:list="list"
:volumeIcon="volumeIcon"
:moreIcon="moreIcon"
:volumeSize="volumeSize"
:closeIcon="closeIcon"
:mode="mode"
:fontSize="fontSize"
......@@ -31,6 +32,7 @@
:moreIcon="moreIcon"
:closeIcon="closeIcon"
:mode="mode"
:volumeSize="volumeSize"
:disable-touch="disableTouch"
:fontSize="fontSize"
:duration="duration"
......@@ -60,6 +62,7 @@
* @property {String} mode 滚动模式(默认horizontal)
* @property {Boolean} show 是否显示(默认true)
* @property {String Number} font-size 字体大小,单位rpx(默认28)
* @property {String Number} volume-size 左边喇叭的大小(默认34)
* @property {String Number} duration 滚动周期时长,只对步进模式有效,横向衔接模式无效,单位ms(默认2000)
* @property {String Number} speed 水平滚动时的滚动速度,即每秒移动多少距离,只对水平衔接方式有效,单位rpx(默认160)
* @property {String Number} font-size 字体大小,单位rpx(默认28)
......@@ -95,6 +98,11 @@ export default {
type: Boolean,
default: true
},
// 音量喇叭的大小
volumeSize: {
type: [Number, String],
default: 34
},
// 是否显示右侧的右箭头图标
moreIcon: {
type: Boolean,
......
......@@ -35,32 +35,32 @@
<picker-view v-else :value="valueArr" @change="change" class="u-picker-view">
<picker-view-column v-if="!reset && params.year">
<view class="u-column-item" v-for="(item,index) in years" :key="index">
{{ item }}<text class="u-text"></text>
{{ item }}<text class="u-text" v-if="showTimeTag"></text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.month">
<view class="u-column-item" v-for="(item,index) in months" :key="index">
{{ formatNumber(item)}}<text class="u-text"></text>
{{ formatNumber(item)}}<text class="u-text" v-if="showTimeTag"></text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.day">
<view class="u-column-item" v-for="(item,index) in days" :key="index">
{{ formatNumber(item) }}<text class="u-text"></text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag"></text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.hour">
<view class="u-column-item" v-for="(item,index) in hours" :key="index">
{{ formatNumber(item) }}<text class="u-text"></text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag"></text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.minute">
<view class="u-column-item" v-for="(item,index) in minutes" :key="index">
{{ formatNumber(item) }}<text class="u-text"></text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag"></text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.second">
<view class="u-column-item" v-for="(item,index) in seconds" :key="index">
{{ formatNumber(item) }}<text class="u-text"></text>
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag"></text>
</view>
</picker-view-column>
</picker-view>
......@@ -83,6 +83,7 @@
* @property {String Number} start-year 可选的开始年份,mode=time时有效(默认1950)
* @property {String Number} end-year 可选的结束年份,mode=time时有效(默认2050)
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
* @property {Boolean} show-time-tag 时间模式时,是否显示后面的年月日中文提示
* @property {String} cancel-color 取消按钮的颜色(默认#606266)
* @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
* @property {String} default-time 默认选中的时间,mode=time时有效
......@@ -151,6 +152,11 @@
return [];
}
},
// 时间模式时,是否显示后面的年月日中文提示
showTimeTag: {
type: Boolean,
default: true
},
// 默认显示地区的编码,defaultRegion和areaCode同时存在,areaCode优先,可传类似["13", "1303", "130304"]
areaCode: {
type: Array,
......
......@@ -9,7 +9,7 @@
>
<view class="u-direction-row">
<view class="u-icon-wrap">
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="34" :color="computeColor"></u-icon>
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
</view>
<view class="u-notice-box" id="u-notice-box">
<view
......@@ -89,6 +89,11 @@ export default {
type: [Number, String],
default: 26
},
// 音量喇叭的大小
volumeSize: {
type: [Number, String],
default: 34
},
// 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度
speed: {
type: [Number, String],
......
......@@ -12,7 +12,7 @@
* @tutorial https://www.uviewui.com/components/topTips.html
* @property {String Number} navbar-height 导航栏高度(包含状态栏高度在内),单位PX
* @property {String Number} z-index z-index值(默认975)
* @example <u-top-tips ref="uTips" type="success" duration="1500"></u-top-tips>
* @example <u-top-tips ref="uTips"></u-top-tips>
*/
export default {
name: "u-top-tips",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment