Skip to content

U
uview-ui
Commit 9ebe74bb authored by wlxuqu's avatar wlxuqu
Browse files
Options

Merge branch 'yiruiwen' into dev

parents 09be3a97 6f963099
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 774 additions and 289 deletions
.editorconfig
View file @ 9ebe74bb
[*]
#缩进风格：空格
indent_style = space
indent_style = tab
#缩进大小2
indent_size = 4
#换行符lf
......
README.md
View file @ 9ebe74bb
......@@ -9,6 +9,8 @@
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
### **欢迎加群交流反馈：249718512**
## 特性
- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
......@@ -91,7 +93,7 @@ Vue.use(uView);
}
```
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 使用方法
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
......@@ -102,7 +104,7 @@ Vue.use(uView);
</template>
```
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 捐赠uView的研发
......
manifest.json
View file @ 9ebe74bb
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.4.0",
"versionName" : "1.4.4",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
pages.json
View file @ 9ebe74bb
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsC/test/index", //启动页面，必选
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
}]
},
// "condition": { //模式配置，仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsC/test/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
......@@ -649,6 +649,13 @@
{
"root": "pages/componentsB",
"pages": [
// tabbar-底部导航栏
{
"path": "tabbar/index",
"style": {
"navigationBarTitleText": "tabbar-底部导航栏"
}
},
// line-线条
{
"path": "line/index",
......
pages/componentsB/tabbar/index.vue 0 → 100644
View file @ 9ebe74bb
<template>
</template>
<script>
</script>
<style>
</style>
pages/componentsC/layout/index.vue
View file @ 9ebe74bb
......@@ -4,19 +4,19 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-row gutter="20" :justify="justify">
<u-col :span="span" :offset="offset">
<u-col :span="span" :offset="offset" @click="click">
<view class="demo-layout bg-purple-dark">
</view>
</u-col>
<u-col :span="span" :offset="offset">
<view class="demo-layout bg-purple-dark">
</view>
</u-col>
<u-col :span="span" :offset="offset">
<view class="demo-layout bg-purple-dark">
</view>
</u-col>
</u-row>
......@@ -125,7 +125,7 @@
.bg-purple-dark {
background: #99a9bf;
}
// H5中，电脑端文档演示时，可能会导致演示块挤出边界，特别处理。
// 真实使用环境不会产生此问题
/* #ifdef H5 */
......
pages/componentsC/test/index.vue
View file @ 9ebe74bb
<template>
<view>
<!-- 底部弹窗 -->
<u-popup v-model="show" mode="bottom">
<view style="padding-bottom: 60px;">出淤泥而不染，濯清涟而不妖</view>
<view class="container">
<view class="search-box">
<u-search @focus="getKeys" @blur="hideKey" bg-color='#ffffff' border-color='rgba(242, 242, 242, 1)' placeholder="日照香炉生紫烟" :clearabled="true" v-model="keyword"></u-search>
</view>
<view class="search-word">
<view class="search-hot" v-if="keys.length!==0">
热门搜索
</view>
<view class="search-key" v-if="keys.length!==0">
<view class="key-font" :key="" v-for="item in keys">
{{item.brand_name}}
</view>
</view>
</view>
<view class="search-end" v-if="keys.length==0">
<view class="">
全部
</view>
<view class="">
销量
</view>
<view class="" @click="showChoice = true">
筛选
</view>
</view>
<view class="guess-section">
<view v-for="(item, index) in mainData" :key="index" class="guess-item" @click="navToDetailPage(item)">
<view class="image-wrapper">
<image :src="item.goods_img"></image>
<text class="goods-tip" v-if="item.is_new==1">新品</text>
</view>
<view class="goods-info">
<text class="title clamp">{{item.goods_name}}</text>
<p><text class="price">￥{{item.promote_price}}</text><text class="price sell">¥{{item.market_price}}</text></p>
<view class="">
<u-rate count="count" gutter="6" size=3 inactive-icon="star-fill" :plain="true" active-color="#FBD14F" inactive-color="RGBA(251, 209, 79, 0.3)" current="2"></u-rate>
<text style="font-size:16upx;margin-left: 8upx; color: #363636;">4.5</text>
</view>
</view>
</view>
</view>
<u-popup v-model="showChoice" mode="right" width="404rpx" @close="closePopup">
<view class="choice">筛选</view>
<view class="choice-main">
<view class="choice-price">
价格区间(元）
</view>
<view class="choice-between">
<input type="text" v-model="higtPrice" placeholder="最低价"/>
<view class="line">
</view>
<input type="text" v-model="lowPrice" placeholder="最高价"/>
</view>
<view class="choice-price">
品牌
</view>
<view class="choice-brand">
<view class="choice-item" v-for="i in 5">
富安娜
</view>
</view>
<view class="choice-submit">
<view class="sub" @click="closePopup">
取消
</view>
<view class="sub confirm" @click="GetData">
确定
</view>
</view>
</view>
</u-popup>
<!-- 底部固定栏 -->
<view class="box-1"></view>
<!-- 模态框 -->
<u-modal v-model="show" :zoom="false"></u-modal>
</view>
</template>
......@@ -15,27 +84,240 @@
export default {
data() {
return {
s:false,
show:false
}
keyword: '',
keys:[],
page:1,
pageSize:10,
mainData:[],
showChoice:false,
higtPrice:'',
lowPrice:''
};
},
onReady() {
this.show = true;
created() {
this.GetData()
},
methods: {
methods:{
GetData() {
this.$request.get(`/v1/goods/getGoodsByType?page=${this.page}&pageSize=${this.pageSize}&type=1&higtPrice=${this.higtPrice}&lowPrice=${this.lowPrice}`).then((res) => {
this.mainData = res.data.list
console.log(3435333, this.mainData)
this.closePopup()
})
},
getKeys(){
this.$request.get(`/v1/brand/getBrandList`).then((res) => {
this.keys = res.data.list
console.log(3333, this.keys)
})
},
hideKey(){
this.keys = []
},
closePopup(){
this.higtPrice = ''
this.lowPrice = ''
this.showChoice = false
}
}
}
</script>
<style>
.box-1{
z-index: 999;
height: 50px;
background-color: #f00;
left: 0;
width: 100%;
position: fixed;
bottom: 0;
<style scoped>
page{
background-color: #ffffff;
}
.container{
background-color: #ffffff;
.search-box{
padding: 34upx 32upx;
/deep/ .u-action-active{
background:rgba(255,105,105,1);
border-radius:32upx;
border:2upx solid rgba(254,156,143,1);
padding: 10upx 22upx;
width: 108upx;
margin-left: 32upx;
color: #ffffff;
}
}
.search-word{
padding: 0 34upx;
margin-top: 12upx;
.search-hot{
font-size:32upx;
line-height:44upx;
margin-bottom: 24upx;
}
.search-key{
display: flex;
flex-wrap: wrap;
.key-font{
background-color: rgba(242, 242, 242, 1);
border-radius:24upx;
padding: 6upx 30upx;
font-size:28upx;
line-height:40upx;
color: #252A33;
margin-right: 32upx;
margin-bottom: 36upx;
}
}
}
.search-end{
display: flex;
padding: 0 65upx;
justify-content: space-between;
font-size:28upx;
line-height:80upx;
}
/* 精品推荐 */
.guess-section{
display:flex;
flex-wrap:wrap;
padding: 0 32upx;
padding-top: 24upx;
background: $page-color-base;
.guess-item{
display:flex;
flex-direction: column;
width: 47.5%;
margin-bottom: 40upx;
border-radius:8upx;
background-color: #ffffff;
&:nth-child(2n+1){
margin-right: 4.5%;
}
}
.image-wrapper{
width: 100%;
height: 330upx;
overflow: hidden;
position: relative;
image{
width: 100%;
height: 100%;
opacity: 1;
}
.goods-tip{
display: block;
position: absolute;
top: 20upx;
right: 32upx;
width: 56upx;
height: 56upx;
background-color: #000000;
line-height: 56upx;
text-align: center;
border-radius: 50%;
font-size:18upx!important;
color: #ffffff;
}
}
.goods-info{
padding: 8upx 20upx 22upx;
position: relative;
.title{
font-size: 24upx;
color: #202020;
line-height: 34upx;
}
.price{
font-size: 24upx;
color: $text-color-red;
line-height:28upx;
}
.sell{
flex-basis: 16upx;
color: #B1ADAD;
margin-left: 4upx;
}
.icon-buy{
position: absolute;
width: 44upx;
height: 44upx;
bottom: 24upx;
right: 24upx;
}
}
}
}
.choice{
width: 100%;
height: 88upx;
padding-left: 40upx;
background-color: #F2F2F2;
font-size:24upx;
color: #8E9299;
margin-bottom: 20upx;
}
.choice-main{
padding: 0upx 32upx;
.choice-price{
font-size:24upx;
line-height:34upx;
color: #252A33;
margin-bottom: 24upx;
}
.line{
width:24upx;
height:2upx;
background-color: #DADEE6;
margin: 0 12upx;
vertical-align: middle;
margin-top: 30upx;
}
.choice-between{
display: flex;
margin-bottom: 36upx;
input{
width: 136upx;
height: 64upx;
border: 2upx solid #DADEE6;
padding-left: 16upx;
}
}
.choice-brand{
display: flex;
flex-wrap: wrap;
.choice-item{
margin-right:32upx;
font-size:28upx;
line-height:40upx;
padding: 4upx 32upx;
background:linear-gradient(180deg,rgba(255,162,162,1) 0%,rgba(255,105,105,1) 100%);
border-radius:24upx;
margin-bottom: 44upx;
color: #ffffff;
&:nth-of-type(2n){
margin-right:0upx;
}
}
}
.choice-submit{
display: flex;
position: absolute;
bottom: 72upx;
.sub{
font-size:30upx;
height: 68upx;
line-height: 60upx;
color: #FF6969;
padding: 0upx 24upx;
border:2px solid #DADEE6;
border-radius:34upx;
color: #DADEE6;
}
.confirm{
border-color: #FF6969;
color: #FF6969;
margin-left: 32upx;
}
}
}
</style>
pages/template/keyboardPay/index.vue
View file @ 9ebe74bb
......@@ -5,11 +5,9 @@
<u-icon name="red-packet"></u-icon>
<text class="u-padding-left-10">发送1.00元红包</text>
</u-button>
</view>
</view>
<u-keyboard
default="778"
default=""
ref="uKeyboard"
mode="number"
:mask="true"
......@@ -19,8 +17,7 @@
:safe-area-inset-bottom="true"
:tooltip="false"
@change="onChange"
@backspace="onBackspace"
>
@backspace="onBackspace">
<view>
<view class="u-text-center u-padding-20 money">
<text>1.00</text>
......@@ -36,6 +33,7 @@
:dot-fill="true"
v-model="password"
:disabled-keyboard="true"
@finish="finish"
></u-message-input>
</view>
<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
......@@ -53,7 +51,7 @@
}
},
onLoad() {
console.log(this.$u.config.v)
},
methods: {
onChange(val){
......@@ -87,6 +85,9 @@
showPop(flag = true){
this.password = '';
this.show = flag;
},
finish(){
console.log(11111)
}
}
}
......@@ -109,4 +110,4 @@
.tips{
color:$u-tips-color;
}
</style>
</style>
\ No newline at end of file
pages/template/wxCenter/index.vue
View file @ 9ebe74bb
<template>
<view>
<u-navbar title="" :border-bottom="false">
<u-navbar :is-back="false" title="　" :border-bottom="false">
<view class="u-flex u-row-right" style="width: 100%;">
<view class="camera u-flex u-row-center">
<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
......@@ -23,20 +23,26 @@
</view>
</view>
<u-cell-group class="u-m-t-20">
<u-cell-item icon="rmb-circle" title="支付"></u-cell-item>
</u-cell-group>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item icon="rmb-circle" title="支付"></u-cell-item>
</u-cell-group>
</view>
<u-cell-group class="u-m-t-20">
<u-cell-item icon="star" title="收藏"></u-cell-item>
<u-cell-item icon="photo" title="相册"></u-cell-item>
<u-cell-item icon="coupon" title="卡券"></u-cell-item>
<u-cell-item icon="heart" title="关注"></u-cell-item>
</u-cell-group>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item icon="star" title="收藏"></u-cell-item>
<u-cell-item icon="photo" title="相册"></u-cell-item>
<u-cell-item icon="coupon" title="卡券"></u-cell-item>
<u-cell-item icon="heart" title="关注"></u-cell-item>
</u-cell-group>
</view>
<u-cell-group class="u-m-t-20">
<u-cell-item icon="setting" title="设置"></u-cell-item>
</u-cell-group>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item icon="setting" title="设置"></u-cell-item>
</u-cell-group>
</view>
</view>
</template>
......@@ -44,7 +50,8 @@
export default {
data() {
return {
pic:'https://uviewui.com/common/logo.png'
pic:'https://uviewui.com/common/logo.png',
show:true
}
},
onLoad() {
......@@ -59,7 +66,6 @@
<style lang="scss">
page{
background-color: #ededed;
min-height: 100vh;
}
.camera{
......
uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
View file @ 9ebe74bb
......@@ -116,7 +116,8 @@ export default {
// 裁剪框宽度，单位px
rectWidth: 200,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg'
fileType: 'jpg',
src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片
};
},
onLoad(option) {
......@@ -163,9 +164,9 @@ export default {
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
let src = res.tempFilePaths[0];
this.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
this.cropper.pushOrign(src);
this.cropper.pushOrign(this.src);
}
});
},
......@@ -180,6 +181,9 @@ export default {
this.cropper.touchEnd(e);
},
getCropperImage(isPre = false) {
console.log(this.src);
if(!this.src) return this.$u.toast('请先选择图片再裁剪');
let cropper_opt = {
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
destWidth: Number(this.destWidth),
......@@ -212,11 +216,11 @@ export default {
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
const src = res.tempFilePaths[0];
success: (res) => {
self.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
self.cropper.pushOrign(src);
self.cropper.pushOrign(this.src);
}
});
}
......@@ -237,7 +241,7 @@ export default {
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
z-index: 11;
}
.cropper-buttons {
......
uview-ui/components/u-avatar/u-avatar.vue
View file @ 9ebe74bb
<template>
<view class="u-avatar" :style="[wrapStyle]" @tap="click">
<image @error="loadError" :style="[imgStyle]" class="u-avatar-img" v-if="!text && defaultAvatar" :src="defaultAvatar" :mode="imgMode"></image>
<image
@error="loadError"
:style="[imgStyle]"
class="u-avatar-img"
v-if="!text && avatar"
:src="avatar"
:mode="mode"
></image>
<text class="u-line-1" v-else-if="text">{{text}}</text>
<slot v-else></slot>
</view>
......@@ -65,12 +72,20 @@
data() {
return {
error: false,
// 头像的地址，因为如果加载错误，需要赋值为默认图片，props值无法修改，所以需要一个中间值
avatar: this.src ? this.src : base64Avatar,
}
},
watch: {
src(n) {
// 用户可能会在头像加载失败时，再次修改头像值，所以需要重新赋值
this.avatar = n;
}
},
computed: {
wrapStyle() {
let style = {};
style.height = this.size == 'large' ? '120rpx' : this.size == 'default' ?
style.height = this.size == 'large' ? '120rpx' : this.size == 'default' ?
'90rpx' : this.size == 'mini' ? '70rpx' : this.size + 'rpx';
style.width = style.height;
style.flex = `0 0 ${style.height}`;
......@@ -79,21 +94,17 @@
if(this.text) style.padding = `0 6rpx`;
return style;
},
defaultAvatar() {
if(!this.src) return base64Avatar;
else if(this.src && this.error) return base64Avatar;
else return this.src;
},
imgStyle() {
let style = {};
style.borderRadius = this.mode == 'circle' ? '500px' : '5px';
return style;
}
},
},
methods: {
// 图片加载错误时，显示默认头像
loadError() {
this.error = true;
this.avatar = base64Avatar;
},
click() {
this.$emit('click', this.index);
......@@ -104,7 +115,7 @@
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-avatar {
display: inline-flex;
align-items: center;
......@@ -112,9 +123,9 @@
font-size: 28rpx;
color: $u-content-color;
border-radius: 10px;
overflow: hidden;
overflow: hidden;
}
.u-avatar-img {
width: 100%;
height: 100%;
......
uview-ui/components/u-cell-item/u-cell-item.vue
View file @ 9ebe74bb
......@@ -188,7 +188,7 @@ export default {
},
data() {
return {
};
},
computed: {
......@@ -267,6 +267,7 @@ export default {
font-size: 26rpx;
line-height: 36rpx;
color: $u-tips-color;
word-wrap: break-word;
}
.u-cell__value {
......
uview-ui/components/u-col/u-col.vue
View file @ 9ebe74bb
......@@ -4,7 +4,9 @@
]" :style="{
padding: `0 ${Number(gutter)/2 + 'rpx'}`,
marginLeft: 100 / 12 * offset + '%',
flex: `0 0 ${100 / 12 * span}%`
flex: `0 0 ${100 / 12 * span}%`,
alignItems: uAlignItem,
justifyContent: uJustify
}">
<slot></slot>
</view>
......@@ -32,8 +34,30 @@
type: [Number, String],
default: 0
},
// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
justify: {
type: String,
default: 'start'
},
// 垂直对齐方式，可选值为top、center、bottom
align: {
type: String,
default: 'center'
}
},
inject: ['gutter'],
computed: {
uJustify() {
if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
else return this.justify;
},
uAlignItem() {
if (this.align == 'top') return 'flex-start';
if (this.align == 'bottom') return 'flex-end';
else return this.align;
}
},
}
</script>
......
uview-ui/components/u-count-down/u-count-down.vue
View file @ 9ebe74bb
<template>
<view class="u-countdown">
<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays">
<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '0'))">
<view class="u-countdown-time" :style="[letterStyle]">
{{ d }}
</view>
......@@ -8,7 +8,7 @@
<view
class="u-countdown-colon"
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
v-if="showDays"
v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '0'))"
>
{{ separator == 'colon' ? ':' : '天' }}
</view>
......@@ -63,6 +63,7 @@
* @property {String} separator-color 分隔符的颜色（默认#303133）
* @property {String Number} font-size 倒计时字体大小，单位rpx（默认30）
* @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
* @property {Boolean} hide-zero-day 当"天"的部分为0时，隐藏该字段 （默认true）
* @property {String} border-color 数字边框的颜色（默认#303133）
* @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
* @property {String} color 倒计时数字的颜色（默认#303133）
......@@ -153,6 +154,11 @@ export default {
type: Boolean,
default: true
},
// 当"天"的部分为0时，不显示
hideZeroDay: {
type: Boolean,
default: false
}
},
watch: {
// 监听时间戳的变化
......@@ -263,12 +269,12 @@ export default {
<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
.u-countdown {
display: inline-flex;
align-items: center;
}
.u-countdown-item {
display: flex;
align-items: center;
......@@ -278,13 +284,13 @@ export default {
white-space: nowrap;
transform: translateZ(0);
}
.u-countdown-time {
margin: 0;
padding: 0;
line-height: 1;
}
.u-countdown-colon {
display: flex;
justify-content: center;
......@@ -293,7 +299,7 @@ export default {
align-items: center;
padding-bottom: 4rpx;
}
.u-countdown-scale {
transform: scale(0.9);
transform-origin: center center;
......
uview-ui/components/u-empty/icon.js deleted 100644 → 0
View file @ 09be3a97
This diff is collapsed.
uview-ui/components/u-empty/u-empty.vue
View file @ 9ebe74bb
......@@ -2,16 +2,17 @@
<view class="u-empty" v-if="show" :style="{
marginTop: marginTop + 'rpx'
}">
<image class="u-image" :src="src ? src : icons[mode].image" mode="widthFix" :style="{
width: imgWidth + 'rpx',
height: imgHeight == 'auto' ? 'auto' : imgHeight + 'rpx'
}"></image>
<text :style="{
color: color,
fontSize: fontSize + 'rpx',
}">
{{text ? text : icons[mode].text}}
</text>
<u-icon
:name="src ? src : 'empty-' + mode"
:custom-style="iconStyle"
:label="text ? text : icons[mode]"
label-pos="bottom"
:label-color="color"
:label-size="fontSize"
:size="iconSize"
:color="iconColor"
margin-top="14"
></u-icon>
<view class="u-slot-wrap">
<slot name="bottom"></slot>
</view>
......@@ -19,7 +20,6 @@
</template>
<script>
import icon from "./icon.js";
/**
* empty 内容为空
* @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
......@@ -55,6 +55,16 @@
type: String,
default: '#c0c4cc'
},
// 图标的颜色
iconColor: {
type: String,
default: '#c0c4cc'
},
// 图标的大小
iconSize: {
type: [String, Number],
default: 120
},
// 文字大小，单位rpx
fontSize: {
type: [String, Number],
......@@ -68,7 +78,7 @@
// 图标宽度，单位rpx
imgWidth: {
type: [String, Number],
default: 240
default: 120
},
// 图标高度，单位rpx
imgHeight: {
......@@ -84,19 +94,84 @@
marginTop: {
type: [String, Number],
default: 0
},
iconStyle: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
icons: icon
icons: {
car: '购物车为空',
page: '页面不存在',
search: '没有搜索结果',
address: '没有收货地址',
wifi: '没有WiFi',
order: '订单为空',
coupon: '没有优惠券',
favor: '暂无收藏',
permission: '无权限',
history: '无历史记录',
news: '无新闻列表',
message: '消息列表为空',
list: '列表为空',
data: '数据为空'
},
// icons: [{
// icon: 'car',
// text: '购物车为空'
// },{
// icon: 'page',
// text: '页面不存在'
// },{
// icon: 'search',
// text: '没有搜索结果'
// },{
// icon: 'address',
// text: '没有收货地址'
// },{
// icon: 'wifi',
// text: '没有WiFi'
// },{
// icon: 'order',
// text: '订单为空'
// },{
// icon: 'coupon',
// text: '没有优惠券'
// },{
// icon: 'favor',
// text: '暂无收藏'
// },{
// icon: 'permission',
// text: '无权限'
// },{
// icon: 'history',
// text: '无历史记录'
// },{
// icon: 'news',
// text: '无新闻列表'
// },{
// icon: 'message',
// text: '消息列表为空'
// },{
// icon: 'list',
// text: '列表为空'
// },{
// icon: 'data',
// text: '数据为空'
// }],
}
}
}
</script>
<style lang="scss" scoped>
<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
.u-empty {
display: flex;
flex-direction: column;
......
uview-ui/components/u-icon/u-icon.vue
View file @ 9ebe74bb
<template>
<view :style="[customStyle]" class="u-icon" @tap="click" :class="[labelPos == 'bottom' ? 'u-flex-col u-row-center' : 'u-flex u-col-center']">
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
<text v-if="label" class="u-icon__label" :style="{
......@@ -7,6 +7,8 @@
fontSize: labelSize + 'rpx',
marginLeft: labelPos == 'right' ? marginLeft + 'rpx' : 0,
marginTop: labelPos == 'bottom' ? marginTop + 'rpx' : 0,
marginRight: labelPos == 'left' ? marginRight + 'rpx' : 0,
marginBottom: labelPos == 'top' ? marginBottom + 'rpx' : 0,
}">{{label}}</text>
</view>
</template>
......@@ -26,6 +28,8 @@
* @property {Object} custom-style icon的样式，对象形式
* @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
* @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
* @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
* @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
* @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
* @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
......@@ -100,6 +104,16 @@ export default {
type: [String, Number],
default: '6'
},
// label与图标的距离(竖向排列)
marginRight: {
type: [String, Number],
default: '6'
},
// label与图标的距离(竖向排列)
marginBottom: {
type: [String, Number],
default: '6'
},
// 图片的mode
imgMode: {
type: String,
......@@ -167,32 +181,56 @@ export default {
.u-icon {
display: inline-flex;
align-items: center;
&--left {
flex-direction: row;
align-items: center;
}
&--right {
flex-direction: row-reverse;
align-items: center;
}
&--top {
flex-direction: column-reverse;
justify-content: center;
}
&--bottom {
flex-direction: column;
justify-content: center;
}
&__icon {
&--primary {
color: $u-type-primary;
}
&--success {
color: $u-type-success;
}
&--error {
color: $u-type-error;
}
&--warning {
color: $u-type-warning;
}
&--info {
color: $u-type-info;
}
}
&__img {
height: auto;
will-change: transform;
}
&__label {
line-height: 1;
}
}
</style>
uview-ui/components/u-image/u-image.vue
View file @ 9ebe74bb
<template>
<view
class="u-image"
@tap.stop.prevent="onClick"
:style="[wrapStyle]"
@tap="onClick"
:style="[wrapStyle, backgroundStyle]"
>
<image
v-if="!isError"
:src="src"
<image
v-if="!isError"
:src="src"
:mode="mode"
@error="onErrorHandler"
@load="onLoadHandler"
@error="onErrorHandler"
@load="onLoadHandler"
:lazy-load="lazyLoad"
class="u-image__image"
:style="{
......@@ -42,7 +42,7 @@ export default {
// 裁剪模式
mode: {
type: String,
default: 'widthFix'
default: 'aspectFill'
},
// 宽度，单位任意
width: {
......@@ -62,7 +62,7 @@ export default {
// 圆角，单位任意
borderRadius: {
type: [String, Number],
default: 10
default: 0
},
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
lazyLoad: {
......@@ -120,6 +120,8 @@ export default {
opacity: 1,
// 过渡时间，因为props的值无法修改，故需要一个中间值
durationTime: this.duration,
// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
backgroundStyle: {}
};
},
computed: {
......@@ -153,7 +155,7 @@ export default {
// 图片加载完成，标记loading结束
onLoadHandler() {
this.loading = false;
this.error = false;
this.isError = false;
this.$emit('load');
// 如果不需要动画效果，就不执行下方代码
if(!this.fade) return ;
......@@ -166,6 +168,12 @@ export default {
setTimeout(() => {
this.durationTime = this.duration;
this.opacity = 1;
setTimeout(() => {
// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
this.backgroundStyle = {
backgroundColor: 'transparent'
};
}, this.durationTime)
}, 50)
}
}
......@@ -184,7 +192,7 @@ export default {
width: 100%;
height: 100%;
}
&__loading, &__error {
position: absolute;
top: 0;
......
uview-ui/components/u-input/u-input.vue
View file @ 9ebe74bb
......@@ -42,6 +42,7 @@
:maxlength="inputMaxlength"
:focus="focus"
:confirmType="confirmType"
:cursor-spacing="getCursorSpacing"
@focus="onFocus"
@blur="handleBlur"
@input="handleInput"
......@@ -77,6 +78,7 @@ import Emitter from '../../libs/util/emitter.js';
* @property {String} placeholder placeholder显示值(默认 '请输入内容')
* @property {Boolean} disabled 是否禁用输入框(默认false)
* @property {String Number} maxlength 输入框的最大可输入长度(默认140)
* @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
* @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
* @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
* @property {Object} custom-style 自定义输入框的样式，对象形式
......@@ -178,6 +180,11 @@ export default {
type: Boolean,
default: true
},
// 指定光标与键盘的距离，单位 px
cursorSpacing: {
type: [Number, String],
default: 0
}
},
data() {
return {
......@@ -214,11 +221,15 @@ export default {
getStyle() {
let style = {};
// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
style.marginRight = this.marginRight + 'px';
style = Object.assign(style, this.customStyle);
return style;
},
//
getCursorSpacing() {
return Number(this.cursorSpacing);
}
},
created() {
......@@ -291,13 +302,13 @@ export default {
.u-input {
position: relative;
flex: 1;
&__input {
//height: $u-form-item-height;
font-size: 28rpx;
color: $u-main-color;
}
&__textarea {
width: auto;
font-size: 28rpx;
......@@ -311,25 +322,25 @@ export default {
border-radius: 4px;
border: 1px solid $u-form-item-border-color;
}
&--error {
border-color: $u-type-error!important;
}
&__right-icon {
position: absolute;
right: 0;
top: 50%;
z-index: 3;
transform: translateY(-50%);
&__item {
margin-left: 10rpx;
}
&--select {
transition: transform .4s;
&--reverse {
transform: rotate(-180deg);
}
......
uview-ui/components/u-line/u-line.vue
View file @ 9ebe74bb
......@@ -59,13 +59,13 @@
// 此处采用兼容分开写，兼容nvue的写法
style.borderBottomWidth = '1px';
style.borderBottomStyle = this.borderStyle;
style.width = this.length;
style.width = this.$u.addUnit(this.length);
if(this.hairLine) style.transform = 'scaleY(0.5)';
} else {
// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
style.borderLeftWidth = '1px';
style.borderLeftStyle = this.borderStyle;
style.height = this.length;
style.height = this.$u.addUnit(this.length);
if(this.hairLine) style.transform = 'scaleX(0.5)';
}
style.borderColor = this.color;
......
uview-ui/components/u-loadmore/u-loadmore.vue
View file @ 9ebe74bb
......@@ -2,7 +2,8 @@
<view class="u-load-more-wrap" :style="{
backgroundColor: bgColor,
marginBottom: marginBottom + 'rpx',
marginTop: marginTop + 'rpx'
marginTop: marginTop + 'rpx',
height: $u.addUnit(height)
}">
<!-- 加载中和没有更多的状态才显示两边的横线 -->
<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
......@@ -96,6 +97,11 @@
type: [String, Number],
default: 0
},
// 高度，单位rpx
height: {
type: [String, Number],
default: 'auto'
}
},
data() {
return {
......
uview-ui/components/u-modal/u-modal.vue
View file @ 9ebe74bb
<template>
<view>
<u-popup :zoom="zoom"
mode="center" :popup="false"
:z-index="uZIndex" v-model="value"
:length="width" :mask-close-able="maskCloseAble"
<u-popup :zoom="zoom"
mode="center" :popup="false"
:z-index="uZIndex" v-model="value"
:length="width" :mask-close-able="maskCloseAble"
:border-radius="borderRadius"
@close="popupClose"
:negative-top="negativeTop"
>
<view class="u-model">
<view v-if="showTitle" class="u-model-title u-line-1" :style="[titleStyle]">{{ title }}</view>
......@@ -30,7 +31,7 @@
<view
v-if="showConfirmButton"
:hover-stay-time="100"
:hover-class="asyncClose ? 'none' : 'btn-hover'"
:hover-class="asyncClose ? 'none' : 'btn-hover'"
class="u-model-footer-button hairline-left"
:style="[confirmBtnStyle]"
@tap="confirm"
......@@ -45,7 +46,7 @@
</u-popup>
</view>
</template>
<script>
/**
* modal 模态框
......@@ -59,6 +60,7 @@
* @property {Boolean} show-title 是否显示标题（默认true）
* @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
* @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
* @property {Stringr | Number} negative-top modal往上偏移的值
* @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
* @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
* @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
......@@ -185,6 +187,11 @@ export default {
maskCloseAble: {
type: Boolean,
default: false
},
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
negativeTop: {
type: [String, Number],
default: 0
}
},
data() {
......@@ -241,7 +248,7 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.btn-hover {
......
uview-ui/components/u-navbar/u-navbar.vue
View file @ 9ebe74bb
......@@ -275,7 +275,7 @@ export default {
}
.u-title {
line-height: 1;
line-height: 60rpx;
font-size: 32rpx;
flex: 1;
}
......
uview-ui/components/u-picker/u-picker.vue
View file @ 9ebe74bb
<template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-datetime-picker" @tap.stop>
<view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
<view class="u-picker-header" @touchmove.stop.prevent="">
<view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150" @tap="getResult('cancel')">取消</view>
<view class="u-picker__title">{{ title }}</view>
<view
......
uview-ui/components/u-popup/u-popup.vue
View file @ 9ebe74bb
......@@ -56,6 +56,7 @@
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
* @property {Object} custom-style 用户自定义样式
* @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值
* @property {Numberr | String} border-radius 弹窗圆角值（默认0）
* @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
* @property {Boolean} closeable 是否显示关闭图标（默认false）
......@@ -174,6 +175,11 @@ export default {
height: {
type: String,
default: ''
},
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
negativeTop: {
type: [String, Number],
default: 0
}
},
data() {
......@@ -181,7 +187,6 @@ export default {
visibleSync: false,
showDrawer: false,
timer: null,
style1: {}
};
},
computed: {
......@@ -232,6 +237,7 @@ export default {
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度
style.height = this.height ? this.getUnitValue(this.height) : 'auto';
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`;
if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}rpx`;
// 不加可能圆角无效
......@@ -249,7 +255,11 @@ export default {
}
}
},
methods: {
mounted() {
// 组件渲染完成时，检查value是否为true，如果是，弹出popup
this.value && this.open();
},
methods: {
// 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
getUnitValue(val) {
if(/(%|px|rpx|auto)$/.test(val)) return val;
......
uview-ui/components/u-row/u-row.vue
View file @ 9ebe74bb
<template>
<view class="u-row" :style="{
alignItems: uAlignItem,
justifyContent: uJustify
}">
alignItems: uAlignItem,
justifyContent: uJustify
}"
@tap.stop.prevent="click"
>
<slot />
</view>
</template>
......@@ -52,18 +54,24 @@
if (this.align == 'bottom') return 'flex-end';
else return this.align;
}
},
methods: {
click() {
this.$emit('click');
}
}
}
</script>
<style lang="scss">
@import "../../libs/css/style.components.scss";
.u-row {
// 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
/* #ifndef MP-WEIXIN */
display: flex;
/* #endif */
flex-wrap: wrap;
}
.u-row:after {
......
uview-ui/components/u-select/u-select.vue
View file @ 9ebe74bb
......@@ -11,7 +11,7 @@
</view> -->
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-select">
<view class="u-select__header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
<view class="u-select__header" @touchmove.stop.prevent="">
<view
class="u-select__header__cancel u-select__header__btn"
:style="{ color: cancelColor }"
......
uview-ui/components/u-tabbar/u-tabbar.vue 0 → 100644
View file @ 9ebe74bb
<template>
<view class="u-tabbar">
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.u-tabbar {
}
</style>
uview-ui/components/u-upload/u-upload.vue
View file @ 9ebe74bb
......@@ -255,14 +255,16 @@ export default {
!tmp && this.lists.push({ url: value.url, error: false, progress: 100 });
});
}
},
// 监听lists的变化，发出事件
lists(n) {
this.$emit('on-list-change', n);
}
},
methods: {
// 清除列表
clear() {
this.lists = [];
// 如果是清空形式的话，发出"on-list-change"事件
this.$emit('on-list-change', this.lists);
},
// 重新上传队列中上传失败的所有文件
reUpload() {
......@@ -305,8 +307,6 @@ export default {
progress: 0,
error: false
});
// 列表发生改变，发出事件，第二个参数为当前发生变化的项的索引
this.$emit('on-list-change', this.lists);
}
});
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
......@@ -437,8 +437,6 @@ export default {
this.$forceUpdate();
this.$emit('on-remove', index, this.lists);
this.showToast('移除成功');
// 列表发生改变，发出事件
this.$emit('on-list-change', this.lists);
}
}
});
......
uview-ui/iconfont.css
View file @ 9ebe74bb
This diff is collapsed.
uview-ui/libs/config/config.js
View file @ 9ebe74bb
// 此版本发布于2020-06-28
let version = '1.4.0';
// 此版本发布于2020-07-03
let version = '1.4.4';
export default {
v: version,
......
uview-ui/libs/css/common.scss
View file @ 9ebe74bb
......@@ -96,7 +96,7 @@
}
// 定义flex等分
@for $i from 1 through 12 {
@for $i from 0 through 12 {
.u-flex-#{$i} {
flex: $i;
}
......
uview-ui/libs/function/deepClone.js
View file @ 9ebe74bb
// 判断arr是否为一个数组，返回一个bool值
function isArray (arr) {
return Object.prototype.toString.call(arr) === '[object Array]';
return Object.prototype.toString.call(arr) === '[object Array]';
}
// 深度克隆
function deepClone (obj) {
function deepClone (obj) {
// 对常见的“非”值，直接返回原来值
if([null, undefined, NaN, false].includes(obj)) return obj;
if(typeof obj !== "object" && typeof obj !== 'function') {
//原始类型直接返回
return obj;
return obj;
}
var o = isArray(obj) ? [] : {};
for(let i in obj) {
if(obj.hasOwnProperty(i)){
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
}
}
var o = isArray(obj) ? [] : {};
for(let i in obj) {
if(obj.hasOwnProperty(i)){
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
}
}
return o;
}
......
uview-ui/libs/request/index.js
View file @ 9ebe74bb
......@@ -32,6 +32,7 @@ class Request {
uni.hideLoading();
// 清除定时器，如果请求回来了，就无需loading
clearTimeout(this.config.timer);
this.timer = null;
// 判断用户对拦截返回数据的要求，如果originalData为true，返回所有的数据(response)到拦截器，否则只返回response.data
if(this.config.originalData) {
// 判断是否存在拦截器
......
uview-ui/package.json
View file @ 9ebe74bb
{
"name": "uview-ui",
"version": "1.4.0",
"version": "1.4.4",
"description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
"main": "index.js",
"keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
......
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