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