Skip to content

U
uview-ui
Commit 09be3a97 authored by wlxuqu's avatar wlxuqu
Browse files
Options

Merge branch 'yiruiwen' into dev

parents 51658bc1 fad8df8e
Hide whitespace changes
Inline Side-by-side
Showing with 626 additions and 389 deletions
.editorconfig 0 → 100644
View file @ 09be3a97
[*]
#缩进风格：空格
indent_style = space
#缩进大小2
indent_size = 4
#换行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
common/demo.scss
View file @ 09be3a97
/* #ifndef APP-NVUE */
view,
text {
box-sizing: border-box;
}
/* #endif */
/* start--演示页面使用的统一样式--start */
.u-demo {
......
manifest.json
View file @ 09be3a97
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.3.8",
"versionName" : "1.4.0",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
pages.json
View file @ 09be3a97
......@@ -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": [
// 演示-组件
{
......@@ -656,6 +656,13 @@
"navigationBarTitleText": "line-线条"
}
},
// image-图片
{
"path": "image/index",
"style": {
"navigationBarTitleText": "image-图片"
}
},
// card-卡片
{
"path": "card/index",
......
pages/componentsA/field/index.vue
View file @ 09be3a97
......@@ -3,27 +3,25 @@
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-cell-group>
<u-field
v-model="mobile"
label="手机号"
:error-message="errorMessage"
placeholder="请填写手机号"
:required="required"
:icon="icon1"
:type="type"
>
</u-field>
<u-field
v-model="code"
label="验证码"
placeholder="请填写验证码"
:required="required"
:icon="icon2"
>
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
</u-field>
</u-cell-group>
<u-field
v-model="mobile"
label="手机号"
:error-message="errorMessage"
placeholder="请填写手机号"
:required="required"
:icon="icon1"
:type="type"
>
</u-field>
<u-field
v-model="code"
label="验证码"
placeholder="请填写验证码"
:required="required"
:icon="icon2"
>
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
</u-field>
</view>
</view>
<view class="u-config-wrap">
......
pages/componentsA/icon/index.vue
View file @ 09be3a97
......@@ -628,7 +628,6 @@
flex: 0 0 33.33333333%;
justify-content: center;
overflow: hidden;
padding: 0 6rpx;
}
.u-icon-name {
......
pages/componentsA/tag/index.vue
View file @ 09be3a97
......@@ -4,14 +4,11 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode"
@close="close" @click="click" :show="show" :size="size"/>
<u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode" @close="close" @click="click" :show="show" :size="size" />
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection>
......@@ -41,53 +38,54 @@
</template>
<script>
export default {
data() {
return {
text: '蒹葭苍苍',
mode: 'light',
type: 'error',
size: 'default',
shape: 'square',
closeable: true,
show: true
}
export default {
data() {
return {
text: '蒹葭苍苍',
mode: 'light',
type: 'error',
size: 'default',
shape: 'square',
closeable: true,
show: true
};
},
methods: {
modeChange(index) {
this.mode = index == 0 ? 'light' : index == 1 ? 'dark' : 'plain';
},
textChange(index) {
this.text = index == 0 ? '蒹葭苍苍' : index == 1 ? '白露为霜' : '在水一方';
},
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
},
shapeChange(index) {
this.shape = index == 0 ? 'square' : index == 1 ? 'circle' : index == 2 ? 'circleLeft' : 'circleRight';
},
sizeChange(index) {
this.size = index == 0 ? 'default' : 'mini';
},
closeableChange(index) {
this.closeable = index == 0 ? true : false;
},
click(index) {
this.$refs.uToast.show({
title: `第${index + 1}个标签被点击`,
type: 'success'
});
},
methods: {
modeChange(index) {
this.mode = index == 0 ? 'light' : index == 1 ? 'dark' : 'plain';
},
textChange(index) {
this.text = index == 0 ? '蒹葭苍苍' : index == 1 ? '白露为霜' : '在水一方';
},
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
},
shapeChange(index) {
this.shape = index == 0 ? 'square' : index == 1 ? 'circle' : index == 2 ? 'circleLeft' : 'circleRight';
},
sizeChange(index) {
this.size = index == 0 ? 'default' : 'mini';
},
closeableChange(index) {
this.closeable = index == 0 ? true : false;
},
click(index) {
this.$refs.uToast.show({
title: `第${index + 1}个标签被点击`,
type: 'success'
})
},
close(index) {
this.$refs.uToast.show({
title: `关闭图标被点击`,
type: 'success'
})
},
close(index) {
this.$refs.uToast.show({
title: `关闭图标被点击`,
type: 'success'
});
}
}
};
</script>
<style lang="scss" scoped>
.u-demo {}
</style>
\ No newline at end of file
.u-demo {
}
</style>
pages/componentsA/test/index.vue
View file @ 09be3a97
<template>
<view class="content u-skeleton">
<view class="bg-white padding-10 banner u-skeleton-fillet">
<u-swiper :list="bannerList" :effect3d="true" @click='bannerClick' :title='true'></u-swiper>
</view>
<view class="bg-white radius-bbg padding-5 nav flex flex-row flex-nowrap align-center">
<view v-for="(item, index) in gridIconList" @click="gridClick(item)" :key="index" class="u-skeleton-fillet padding-sm flex-1 flex flex-column align-center">
<image :src="'/static/index/'+item+'.png'" style="width: 80rpx;height: 80rpx;"></image>
<text class="grid-text">{{ tabs[index].name }}</text>
</view>
</view>
<view class="tab bg-gray ">
<u-tabs-swiper class='u-skeleton-fillet' bg-color='#f1f1f1' :isScroll="false" ref="uTabs" activeColor="#A87DFF" :list="tabs" :current="current" @change="tabsChange" :isScrool="false" swiperWidth="750"></u-tabs-swiper>
</view>
<swiper class="padding-10 bg-white radius-bbg" :style="{height: swiperHeight}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item v-for="(item, index) in tabs" :key="index" >
<scroll-view scroll-y :style="{height: swiperHeight,width: '100%'}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="onreachBottom(index)">
<view v-for="(item1,index1) in swiperData[0]" @click="dataClick(item1.id)" :key='index1' :class="index1==0?'margin-top-sm':''" class="flex flex-row align-center padding-5">
<view class="flex-1 u-skeleton-fillet">
<image :src="'/static/source/'+item1.img+'.png'" style="width: 100rpx;height: 100rpx;"></image>
</view>
<view class="u-skeleton-rect flex-9 margin-left-sm flex flex-column justify-start justify-between">
<view class="flex-7 text-format-2 text-black">{{item1.title}}</view>
<view class="flex-3 flex flex-row align-center justify-between padding-top-sm margin-bottom-sm">
<view class="flex-7">{{item1.typename}}</view>
<view class="flex-3">{{item1.time*1000 | date}}</view>
</view>
<view v-if='(index1+1)<swiperData[0].length' class="zise-line"></view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<u-top-tips ref="uTips"></u-top-tips>
<u-skeleton :loading="loading" :animation="true" bgColor="#f1f1f1"></u-skeleton>
<u-no-network></u-no-network>
</view>
<u-form
:model="form"
ref="uForm"
>
<u-form-item label="姓名">
<u-input v-model="form.name" />
</u-form-item>
<u-form-item label="简介">
<u-input v-model="form.intro" />
</u-form-item>
<u-form-item label="性别">
<u-input
v-model="form.sex"
type="select"
/>
</u-form-item>
<u-form-item label="水果">
<u-checkbox-group>
<u-checkbox
v-model="item.checked"
v-for="(item, index) in checkboxList"
:key="index"
:name="item.name"
>
{{ item.name }}
</u-checkbox>
</u-checkbox-group>
</u-form-item>
<u-form-item label="味道">
<u-radio-group v-model="radio">
<u-radio
v-for="(item, index) in radioList"
:key="index"
:name="item.name"
:disabled="item.disabled"
>
{{ item.name }}
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="开关">
<u-switch
slot="right"
v-model="switchVal"
></u-switch>
</u-form-item>
</u-form>
</template>
<script>
export default {
data() {
return {
bannerList: [
{
id:1,type:'forum',
image: '1',
title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
},
{
id:2,type:'book',
image: '2',
title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
},
{
id:3,type:'video',
image: '3',
title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
},
{
id:4,type:'cartoon',
image: '4',
title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
},
{
id:5,type:'audio',
image: '5',
title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
}
],
gridIconList: ['forum', 'book', 'video', 'cartoon', 'audio'],
tabs: [{name: '论坛'}, {name: '小说'}, {name: '视频'}, {name: '漫画'}, {name: '音频'}],
current: 0,
swiperCurrent: 0,
dx: 0,
swiperHeight:'800rpx',
scrollTop: 0,
old: {
scrollTop: 0
},
loading:true,
swiperData:[
[
{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:1,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:3,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:4,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:5,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:6,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:1,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍，白露为霜。所谓伊人，在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},
]
],
}
},
async onLoad() {
setTimeout(()=>{
this.loading = false;
},2000)
},
onReady() {
this.getSwiperHeight();
},
methods: {
async getSwiperHeight(){
let windowHeight = this.$until.height(1)
let banner = await this.$u.getRect('.banner');
let nav = await this.$u.getRect('.nav');
let tab = await this.$u.getRect('.tab');
this.swiperHeight = (windowHeight-banner.height-nav.height-tab.height)+'px'
},
bannerClick(index) {
this.$refs.uTips.show({
title: `点击了`+this.bannerList[index].id+',类型为'+this.bannerList[index].type,
type: 'success',
})
},
gridClick(index) {
switch(index){
case 'forum':
this.$u.route('/pages/forum/index');
break;
default:
this.$refs.uTips.show({
title: `点击了${index}按钮`,
type: 'success',
})
}
},
tabsChange(index) {
this.swiperCurrent = index;
this.scrollTop = this.old.scrollTop
this.$nextTick(()=>{
this.scrollTop = 0
});
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
this.scrollTop = this.old.scrollTop
this.$nextTick(()=>{
this.scrollTop = 0
});
},
// scroll-view到底部加载更多
onreachBottom(index) {
this.$refs.uTips.show({
title: `在${index}触发触底刷新`,
type: 'success',
})
},
scroll(e) {
this.old.scrollTop = e.detail.scrollTop
},
}
}
export default {
data() {
return {
form: {
name: '',
intro: '',
sex: ''
},
checkboxList: [{
name: '苹果',
checked: false,
disabled: false
},
{
name: '雪梨',
checked: false,
disabled: false
},
{
name: '柠檬',
checked: false,
disabled: false
}
],
radioList: [{
name: '鲜甜',
disabled: false
},
{
name: '麻辣',
disabled: false
}
],
radio: '',
switchVal: false
};
}
};
</script>
<style scoped>
.grid-text {
color: #A87DFF;
font-size: 28rpx;
margin-top: 6rpx;
}
.grid-text {
font-size: 28rpx;
margin-top: 4rpx;
}
</style>
pages/componentsB/image/index.vue 0 → 100644
View file @ 09be3a97
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area u-flex u-row-center">
<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
</u-image>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection :current="statusCurrent" vibrateShort :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">加载中状态</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">加载失败状态</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="errorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">形状</view>
<u-subsection vibrateShort :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
width: '200',
height: '200',
loadingSlot: false,
statusCurrent: 0,
errorSlot: false,
shape: 'square'
};
},
computed: {
// statusCurrent() {
// }
},
methods: {
statusChange(index) {
// 此处通过ref操作组件内部状态，仅是为了演示使用，实际中无需这些操作，由内部的图片加载事件自动完成
if (index == 0) {
this.src = 'http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg';
this.$refs.uImage.loading = false;
this.$refs.uImage.isError = false;
} else if (index == 1) {
this.$refs.uImage.loading = true;
} else {
this.$refs.uImage.loading = false;
this.$refs.uImage.isError = true;
}
},
loadingChange(index) {
this.statusCurrent = 1;
this.statusChange(1);
if (index == 0) {
this.loadingSlot = false;
} else {
this.loadingSlot = true;
}
},
errorChange(index) {
this.statusCurrent = 2;
this.statusChange(2);
if (index == 0) {
this.errorSlot = false;
} else {
this.errorSlot = true;
}
},
shapeChange(index) {
this.shape = index == 0 ? 'square' : 'circle';
}
}
};
</script>
<style scoped lang="scss">
.u-demo-area {
}
</style>
pages/componentsC/button/index.vue
View file @ 09be3a97
......@@ -3,7 +3,7 @@
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-button @click="btnClick" :loading="loading" :plain="plain" :shape="shape" :size="size" :ripple="ripple" :hairLine="hairLine" :type="type">山川异域，风月同天</u-button>
<u-button @click="btnClick" data-name="3333" :loading="loading" :plain="plain" :shape="shape" :size="size" :ripple="ripple" :hairLine="hairLine" :type="type">山川异域，风月同天</u-button>
</view>
</view>
<view class="u-config-wrap">
......
pages/componentsC/cell/index.vue
View file @ 09be3a97
......@@ -12,7 +12,7 @@
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
</u-cell-item>
<u-cell-item value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
<u-cell-item :border-bottom="false" value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
<u-field slot="value"></u-field>
......
pages/componentsC/test/index.vue
View file @ 09be3a97
<template>
<view>
<!-- 底部弹窗 -->
<u-popup v-model="show" mode="bottom">
<view style="padding-bottom: 60px;">出淤泥而不染，濯清涟而不妖</view>
</u-popup>
<!-- 底部固定栏 -->
<view class="box-1"></view>
<!-- 模态框 -->
<u-modal v-model="show" :zoom="false"></u-modal>
</view>
</template>
<script>
export default {
data() {
return {
s:false,
show:false
}
},
onReady() {
this.show = true;
},
methods: {
}
}
</script>
<style>
.box-1{
z-index: 999;
height: 50px;
background-color: #f00;
left: 0;
width: 100%;
position: fixed;
bottom: 0;
}
</style>
pages/example/components.config.js
View file @ 09be3a97
......@@ -8,6 +8,10 @@ export default [{
path: '/pages/componentsA/icon/index',
icon: 'icon',
title: 'Icon 图标',
},{
path: '/pages/componentsB/image/index',
icon: 'image',
title: 'Image 图片',
}, {
path: '/pages/componentsC/button/index',
icon: 'button',
......
uview-ui/components/u-button/u-button.vue
View file @ 09be3a97
......@@ -33,7 +33,6 @@
@tap.stop="click($event)"
:hover-class="getHoverClass"
:loading="loading"
data-name="dataName"
>
<slot></slot>
<view
......
uview-ui/components/u-cell-group/u-cell-group.vue
View file @ 09be3a97
......@@ -46,11 +46,6 @@
index: 0,
}
},
provide() {
return {
uCellGroup: this
}
},
}
</script>
......
uview-ui/components/u-cell-item/u-cell-item.vue
View file @ 09be3a97
......@@ -2,14 +2,14 @@
<view
@tap="click"
class="u-cell"
:class="{ 'u-cell-border': itemIndex > 0 && borderBottom, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
hover-stay-time="150"
:hover-class="hoverClass"
:style="{
backgroundColor: bgColor
}"
>
<u-icon :size="iconSize" :name="icon" v-if="icon" class="u-cell__left-icon-wrap"></u-icon>
<u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
<view class="u-flex" v-else>
<slot name="icon"></slot>
</view>
......@@ -49,12 +49,14 @@
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 左侧标题
* @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
* @property {Object} icon-style 左边图标的样式，对象形式
* @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息
* @property {Boolean} border-bottom 是否显示每个cell的下边框（默认true）
* @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
* @property {Boolean} border-top 是否显示cell的上边框（默认false）
* @property {Boolean} center 是否使内容垂直居中（默认false）
* @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
* @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
* // @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
* @property {Boolean} arrow 是否显示右侧箭头（默认true）
* @property {Boolean} required 箭头方向，可选值（默认right）
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
......@@ -89,16 +91,22 @@ export default {
type: [String, Number],
default: ''
},
// 是否显示内边框
// 是否显示下边框
borderBottom: {
type: Boolean,
default: true
},
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
borderGap: {
// 是否显示上边框
borderTop: {
type: Boolean,
default: true
default: false
},
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
// 1.4.0版本废除此参数，默认边框由border-top和border-bottom提供，此参数会造成干扰
// borderGap: {
// type: Boolean,
// default: true
// },
// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
hoverClass: {
type: String,
......@@ -169,26 +177,20 @@ export default {
iconSize: {
type: [Number, String],
default: 34
}
},
inject: {
uCellGroup: {
// 添加默认值，是为了能让u-cell-item组件无需u-cell-group组件嵌套亦可单独使用
},
// 左边图标的样式，对象形式
iconStyle: {
type: Object,
default() {
return {
index: 0
}
return {}
}
}
},
},
data() {
return {
itemIndex: 0
};
},
created() {
this.itemIndex = this.uCellGroup.index++;
},
computed: {
arrowStyle() {
let style = {};
......@@ -260,10 +262,6 @@ export default {
position: relative;
}
.u-border-gap:after {
left: 32rpx !important;
}
.u-cell__label {
margin-top: 6rpx;
font-size: 26rpx;
......
uview-ui/components/u-field/u-field.vue
View file @ 09be3a97
<template>
<view class="u-field" :class="{'u-field-border': itemIndex > 0 }">
<view class="u-field" :class="{'u-border-top': borderTop, 'u-border-bottom': borderBottom }">
<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
justifyContent: justifyContent,
flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1'
}">
<view class="u-icon-wrap" v-if="icon">
<u-icon size="32" :name="icon" :color="iconColor" class="u-icon"></u-icon>
<u-icon size="32" :custom-style="iconStyle" :name="icon" :color="iconColor" class="u-icon"></u-icon>
</view>
<slot name="icon"></slot>
<text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
......@@ -55,6 +55,7 @@
* @tutorial https://www.uviewui.com/components/field.html
* @property {String} type 输入框的类型（默认text）
* @property {String} icon label左边的图标，限uView的图标名称
* @property {Object} icon-style 左边图标的样式，对象形式
* @property {Boolean} right-icon 输入框右边的图标名称，限uView的图标名称（默认false）
* @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false）
* @property {String} label 输入框左边的文字提示
......@@ -65,6 +66,8 @@
* @property {Object} field-style 自定义输入框的样式，对象形式
* @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
* @property {String} input-align 输入框内容对齐方式（默认left）
* @property {Boolean} border-bottom 是否显示field的下边框（默认true）
* @property {Boolean} border-top 是否显示field的上边框（默认false）
* @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
* @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
* @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
......@@ -162,20 +165,31 @@ export default {
clearSize: {
type: [Number, String],
default: 30
}
},
// lable左边的图标样式，对象形式
iconStyle: {
type: Object,
default() {
return {}
}
},
// 是否显示上边框
borderTop: {
type: Boolean,
default: false
},
// 是否显示下边框
borderBottom: {
type: Boolean,
default: true
},
},
inject: ['uCellGroup'],
data() {
return {
focused: false,
itemIndex: 0,
};
},
created() {
if(this.uCellGroup) {
this.itemIndex = this.uCellGroup.index++;
}
},
computed: {
inputWrapStyle() {
let style = {};
......@@ -336,19 +350,6 @@ export default {
align-items: center;
}
.u-field-border:after {
left: 32rpx!important;
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
top: 0;
border-bottom: 1px solid $u-border-color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.u-error-message {
color: $u-type-error;
font-size: 26rpx;
......
uview-ui/components/u-icon/u-icon.vue
View file @ 09be3a97
......@@ -23,6 +23,7 @@
* @property {String} label 图标右侧的label文字（默认28）
* @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
* @property {String} label-color label字体颜色（默认#606266）
* @property {Object} custom-style icon的样式，对象形式
* @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
* @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
......
uview-ui/components/u-image/u-image.vue 0 → 100644
View file @ 09be3a97
<template>
<view
class="u-image"
@tap.stop.prevent="onClick"
:style="[wrapStyle]"
>
<image
v-if="!isError"
:src="src"
:mode="mode"
@error="onErrorHandler"
@load="onLoadHandler"
:lazy-load="lazyLoad"
class="u-image__image"
:style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx',
}"
></image>
<view v-if="showLoading && loading" class="u-image__loading" :style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx',
}">
<slot v-if="$slots.loading" name="loading" />
<u-icon v-else :name="loadingIcon"></u-icon>
</view>
<view v-if="showError && isError && !loading" class="u-image__error" :style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx',
}">
<slot v-if="$slots.error" name="error" />
<u-icon v-else :name="errorIcon"></u-icon>
</view>
</view>
</template>
<script>
export default {
props: {
// 图片地址
src: {
type: String,
default: ''
},
// 裁剪模式
mode: {
type: String,
default: 'widthFix'
},
// 宽度，单位任意
width: {
type: [String, Number],
default: '100%'
},
// 高度，单位任意
height: {
type: [String, Number],
default: 'auto'
},
// 图片形状，circle-圆形，square-方形
shape: {
type: String,
default: 'square'
},
// 圆角，单位任意
borderRadius: {
type: [String, Number],
default: 10
},
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
lazyLoad: {
type: Boolean,
default: true
},
// 开启长按图片显示识别微信小程序码菜单
showMenuByLongpress: {
type: Boolean,
default: true
},
// 加载中的图标，或者小图片
loadingIcon: {
type: String,
default: 'photo'
},
// 加载失败的图标，或者小图片
errorIcon: {
type: String,
default: 'error-circle'
},
// 是否显示加载中的图标或者自定义的slot
showLoading: {
type: Boolean,
default: true
},
// 是否显示加载错误的图标或者自定义的slot
showError: {
type: Boolean,
default: true
},
// 是否需要淡入效果
fade: {
type: Boolean,
default: true
},
// 只支持网络资源，只对微信小程序有效
webp: {
type: Boolean,
default: false
},
// 过渡时间，单位ms
duration: {
type: [String, Number],
default: 500
}
},
data() {
return {
// 图片是否加载错误，如果是，则显示错误占位图
isError: false,
// 初始化组件时，默认为加载中状态
loading: true,
// 不透明度，为了实现淡入淡出的效果
opacity: 1,
// 过渡时间，因为props的值无法修改，故需要一个中间值
durationTime: this.duration,
};
},
computed: {
wrapStyle() {
let style = {};
// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
style.width = this.$u.addUnit(this.width);
style.height = this.$u.addUnit(this.height);
// 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值
style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
// 如果设置圆角，必须要有hidden，否则可能圆角无效
style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
if(this.fade) {
style.opacity = this.opacity;
style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
}
return style;
}
},
methods: {
// 点击图片
onClick() {
this.$emit('click');
},
// 图片加载失败
onErrorHandler() {
this.loading = false;
this.isError = true;
this.$emit('error');
},
// 图片加载完成，标记loading结束
onLoadHandler() {
this.loading = false;
this.error = false;
this.$emit('load');
// 如果不需要动画效果，就不执行下方代码
if(!this.fade) return ;
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
this.opacity = 0;
// 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
// 到图片展示的过程中的淡入效果
this.durationTime = 0;
// 延时50ms，否则在浏览器H5，过渡效果无效
setTimeout(() => {
this.durationTime = this.duration;
this.opacity = 1;
}, 50)
}
}
};
</script>
<style scoped lang="scss">
@import '../../libs/css/style.components.scss';
.u-image {
background-color: $u-bg-color;
position: relative;
transition: opacity 0.5s ease-in-out;
&__image {
width: 100%;
height: 100%;
}
&__loading, &__error {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: $u-bg-color;
color: $u-tips-color;
font-size: 46rpx;
}
}
</style>
uview-ui/components/u-input/u-input.vue
View file @ 09be3a97
......@@ -318,7 +318,7 @@ export default {
&__right-icon {
position: absolute;
right: 20rpx;
right: 0;
top: 50%;
z-index: 3;
transform: translateY(-50%);
......
uview-ui/components/u-lazy-load/u-lazy-load.vue
View file @ 09be3a97
......@@ -126,7 +126,7 @@
// 如果是不开启过渡效果，直接返回
if (!this.isEffect) return;
this.time = 0;
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明， 意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
this.opacity = 0;
// 延时30ms，否则在浏览器H5，过渡效果无效
setTimeout(() => {
......
uview-ui/components/u-navbar/u-navbar.vue
View file @ 09be3a97
......@@ -210,7 +210,7 @@ export default {
// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
if(typeof this.customBack === 'function') {
this.customBack();
} {
} else {
uni.navigateBack();
}
}
......
uview-ui/components/u-tag/u-tag.vue
View file @ 09be3a97
......@@ -181,31 +181,31 @@
.u-mode-light-primary {
background-color: $u-type-primary-light;
color: $u-type-primary;
border: 1px solid rgb(215, 234, 254);
border: 1px solid $u-type-primary-disabled;
}
.u-mode-light-success {
background-color: $u-type-success-light;
color: $u-type-success;
border: 1px solid #BEF5C8;
border: 1px solid $u-type-success-disabled;
}
.u-mode-light-error {
background-color: $u-type-error-light;
color: $u-type-error;
border: 1px solid #fde2e2;
border: 1px solid $u-type-error-disabled;
}
.u-mode-light-warning {
background-color: $u-type-warning-light;
color: $u-type-warning;
border: 1px solid #faecd8;
border: 1px solid $u-type-warning-disabled;
}
.u-mode-light-info {
background-color: $u-type-info-light;
color: $u-type-info;
border: 1px solid #ebeef5;
border: 1px solid $u-type-info-disabled;
}
.u-mode-dark-primary {
......
uview-ui/components/u-toast/u-toast.vue
View file @ 09be3a97
......@@ -37,10 +37,11 @@
type: '', // 主题类型，primary，success，error，warning，black
duration: 2000, // 显示的时间，毫秒
isTab: false, // 是否跳转tab页面
url: '', // toast消失后是否跳转页面，有则跳转
url: '', // toast消失后是否跳转页面，有则跳转，优先级高于back参数
icon: true, // 显示的图标
position: 'center', // toast出现的位置
callback: null, // 执行完后的回调函数
back: false, // 结束toast是否自动返回上一页
}
};
},
......@@ -117,6 +118,11 @@
url: this.config.url
});
}
} else if(this.config.back) {
// 回退到上一页
this.$u.route({
type: 'back'
})
}
}
}
......
uview-ui/components/u-upload/u-upload.vue
View file @ 09be3a97
......@@ -245,7 +245,14 @@ export default {
immediate: true,
handler(val) {
val.map(value => {
this.lists.push({ url: value.url, error: false, progress: 100 });
// 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList
// 时，会触发watch，导致重新把原来的图片再次添加到this.lists
// 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
let tmp = this.lists.some(val => {
return val.url == value.url;
})
// 如果内部没有这个图片(tmp为false)，则添加到内部
!tmp && this.lists.push({ url: value.url, error: false, progress: 100 });
});
}
}
......
uview-ui/iconfont.css
View file @ 09be3a97
......@@ -8,8 +8,8 @@
}
/* #endif */
/* 支付宝，百度，头条小程序目前读取大的本地字体文件，导致无法显示图标，故用在线加载的方式-2020-05-12 */
/* #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || H5 */
/* 支付宝，百度，头条，QQ小程序，以及H5在部分浏览器目前读取大的本地字体文件，导致无法显示图标，故用在线加载的方式-2020-06-24 */
/* #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || H5 || MP-QQ */
@font-face {
font-family: "uicon-iconfont";
src: url('//at.alicdn.com/t/font_1529455_k9eg3z8m98');
......
uview-ui/index.js
View file @ 09be3a97
// 引入全局mixin
import mixin from './libs/mixin/mixin.js'
// 引入关于是否mixin集成小程序分享的配置
import wxshare from './libs/mixin/mpShare.js'
// import wxshare from './libs/mixin/mpShare.js'
// 全局挂载引入http相关请求拦截插件
import http from './libs/request'
......@@ -45,6 +45,8 @@ import randomArray from './libs/function/randomArray.js'
import deepClone from './libs/function/deepClone.js'
// 对象深度拷贝
import deepMerge from './libs/function/deepMerge.js'
// 添加单位
import addUnit from './libs/function/addUnit.js'
// 规则检验
import test from './libs/function/test.js'
......@@ -86,6 +88,7 @@ const $u = {
deepClone,
deepMerge,
getParent,
addUnit,
trim,
type: ['primary', 'success', 'error', 'warning', 'info'],
http,
......
uview-ui/libs/config/config.js
View file @ 09be3a97
// 此版本发布于2020-06-19
let version = '1.3.61';
// 此版本发布于2020-06-28
let version = '1.4.0';
export default {
v: version,
......
uview-ui/libs/css/style.components.scss
View file @ 09be3a97
......@@ -6,9 +6,9 @@ image {
will-change: transform;
}
// 在weex，也即nvue中，所有元素默认为border-box
view,
text {
box-sizing: border-box;
flex-direction: row;
}
/* #endif */
\ No newline at end of file
uview-ui/libs/css/style.mp.scss
View file @ 09be3a97
......@@ -10,7 +10,7 @@ u-td, u-th {
}
u-icon {
display: flex;
display: inline-flex;
align-items: center;
}
......
uview-ui/libs/function/addUnit.js 0 → 100644
View file @ 09be3a97
import validation from './test.js';
// 添加单位，如果有rpx，%，px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾
export default function addUnit(value = 'auto', unit = 'rpx') {
value = String(value);
// 用uView内置验证规则中的number判断是否为数值
return validation.number(value) ? `${value}${unit}` : value;
}
\ No newline at end of file
uview-ui/libs/function/getParent.js
View file @ 09be3a97
......@@ -6,14 +6,18 @@ export default function getParent(name, keys) {
while (parent) {
// 父组件
if (parent.$options.name !== name) {
// 如果组件的name不相等，继续上一级寻找
parent = parent.$parent;
} else {
return keys.reduce((result, key) => {
result[key] = parent[key];
return result;
}, {});
let data = {};
// 历遍传过来的对象参数
for(let i in keys) {
// 如果父组件有此值则用，无此值则用默认值
data[i] = parent[i] ? parent[i] : keys[i];
}
return data;
}
}
return null;
return {};
}
\ No newline at end of file
uview-ui/package.json
View file @ 09be3a97
{
"name": "uview-ui",
"version": "1.3.8",
"version": "1.4.0",
"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