Commit 09be3a97 authored by wlxuqu's avatar wlxuqu

Merge branch 'yiruiwen' into dev

parents 51658bc1 fad8df8e
[*]
#缩进风格:空格
indent_style = space
#缩进大小2
indent_size = 4
#换行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
/* #ifndef APP-NVUE */
view,
text {
box-sizing: border-box;
}
/* #endif */
/* start--演示页面使用的统一样式--start */ /* start--演示页面使用的统一样式--start */
.u-demo { .u-demo {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name" : "uView", "name" : "uView",
"appid" : "__UNI__60F4B81", "appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架", "description" : "多平台快速开发的UI框架",
"versionName" : "1.3.8", "versionName" : "1.4.0",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
......
...@@ -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": [
// 演示-组件 // 演示-组件
{ {
...@@ -656,6 +656,13 @@ ...@@ -656,6 +656,13 @@
"navigationBarTitleText": "line-线条" "navigationBarTitleText": "line-线条"
} }
}, },
// image-图片
{
"path": "image/index",
"style": {
"navigationBarTitleText": "image-图片"
}
},
// card-卡片 // card-卡片
{ {
"path": "card/index", "path": "card/index",
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<view class="u-demo-wrap" style="background-color: #FFFFFF;"> <view class="u-demo-wrap" style="background-color: #FFFFFF;">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-cell-group>
<u-field <u-field
v-model="mobile" v-model="mobile"
label="手机号" label="手机号"
...@@ -23,7 +22,6 @@ ...@@ -23,7 +22,6 @@
> >
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button> <u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
</u-field> </u-field>
</u-cell-group>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
......
...@@ -628,7 +628,6 @@ ...@@ -628,7 +628,6 @@
flex: 0 0 33.33333333%; flex: 0 0 33.33333333%;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
padding: 0 6rpx;
} }
.u-icon-name { .u-icon-name {
......
...@@ -4,14 +4,11 @@ ...@@ -4,14 +4,11 @@
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode" <u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode" @close="close" @click="click" :show="show" :size="size" />
@close="close" @click="click" :show="show" :size="size"/>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
<view class="u-config-title u-border-bottom"> <view class="u-config-title u-border-bottom">参数配置</view>
参数配置
</view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">模式选择</view> <view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection> <u-subsection vibrateShort :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection>
...@@ -41,7 +38,7 @@ ...@@ -41,7 +38,7 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
text: '蒹葭苍苍', text: '蒹葭苍苍',
...@@ -51,7 +48,7 @@ ...@@ -51,7 +48,7 @@
shape: 'square', shape: 'square',
closeable: true, closeable: true,
show: true show: true
} };
}, },
methods: { methods: {
modeChange(index) { modeChange(index) {
...@@ -76,18 +73,19 @@ ...@@ -76,18 +73,19 @@
this.$refs.uToast.show({ this.$refs.uToast.show({
title: `第${index + 1}个标签被点击`, title: `第${index + 1}个标签被点击`,
type: 'success' type: 'success'
}) });
}, },
close(index) { close(index) {
this.$refs.uToast.show({ this.$refs.uToast.show({
title: `关闭图标被点击`, title: `关闭图标被点击`,
type: 'success' type: 'success'
}) });
},
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-demo {} .u-demo {
}
</style> </style>
<template> <template>
<view class="content u-skeleton"> <u-form
<view class="bg-white padding-10 banner u-skeleton-fillet"> :model="form"
<u-swiper :list="bannerList" :effect3d="true" @click='bannerClick' :title='true'></u-swiper> ref="uForm"
</view> >
<view class="bg-white radius-bbg padding-5 nav flex flex-row flex-nowrap align-center"> <u-form-item label="姓名">
<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"> <u-input v-model="form.name" />
<image :src="'/static/index/'+item+'.png'" style="width: 80rpx;height: 80rpx;"></image> </u-form-item>
<text class="grid-text">{{ tabs[index].name }}</text> <u-form-item label="简介">
</view> <u-input v-model="form.intro" />
</view> </u-form-item>
<view class="tab bg-gray "> <u-form-item label="性别">
<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> <u-input
</view> v-model="form.sex"
<swiper class="padding-10 bg-white radius-bbg" :style="{height: swiperHeight}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"> type="select"
<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)"> </u-form-item>
<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"> <u-form-item label="水果">
<view class="flex-1 u-skeleton-fillet"> <u-checkbox-group>
<image :src="'/static/source/'+item1.img+'.png'" style="width: 100rpx;height: 100rpx;"></image> <u-checkbox
</view> v-model="item.checked"
<view class="u-skeleton-rect flex-9 margin-left-sm flex flex-column justify-start justify-between"> v-for="(item, index) in checkboxList"
<view class="flex-7 text-format-2 text-black">{{item1.title}}</view> :key="index"
<view class="flex-3 flex flex-row align-center justify-between padding-top-sm margin-bottom-sm"> :name="item.name"
<view class="flex-7">{{item1.typename}}</view> >
<view class="flex-3">{{item1.time*1000 | date}}</view> {{ item.name }}
</view> </u-checkbox>
<view v-if='(index1+1)<swiperData[0].length' class="zise-line"></view> </u-checkbox-group>
</view> </u-form-item>
</view> <u-form-item label="味道">
</scroll-view> <u-radio-group v-model="radio">
</swiper-item> <u-radio
</swiper> v-for="(item, index) in radioList"
<u-top-tips ref="uTips"></u-top-tips> :key="index"
<u-skeleton :loading="loading" :animation="true" bgColor="#f1f1f1"></u-skeleton> :name="item.name"
<u-no-network></u-no-network> :disabled="item.disabled"
</view> >
{{ 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> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
bannerList: [ form: {
{ name: '',
id:1,type:'forum', intro: '',
image: '1', sex: ''
title: '蒹葭苍苍,白露为霜。所谓伊人,在水一方'
},
{
id:2,type:'book',
image: '2',
title: '溯洄从之,道阻且长。溯游从之,宛在水中央'
}, },
{ checkboxList: [{
id:3,type:'video', name: '苹果',
image: '3', checked: false,
title: '蒹葭萋萋,白露未晞。所谓伊人,在水之湄' disabled: false
}, },
{ {
id:4,type:'cartoon', name: '雪梨',
image: '4', checked: false,
title: '蒹葭萋萋,白露未晞。所谓伊人,在水之湄' disabled: false
}, },
{ {
id:5,type:'audio', name: '柠檬',
image: '5', checked: false,
title: '蒹葭萋萋,白露未晞。所谓伊人,在水之湄' disabled: false
} }
], ],
gridIconList: ['forum', 'book', 'video', 'cartoon', 'audio'], radioList: [{
tabs: [{name: '论坛'}, {name: '小说'}, {name: '视频'}, {name: '漫画'}, {name: '音频'}], name: '鲜甜',
current: 0, disabled: false
swiperCurrent: 0,
dx: 0,
swiperHeight:'800rpx',
scrollTop: 0,
old: {
scrollTop: 0
}, },
loading:true,
swiperData:[
[
{ {
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方', name: '麻辣',
typename:'蒹葭苍苍', disabled: false
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
},
} }
],
radio: '',
switchVal: false
};
} }
};
</script> </script>
<style scoped>
.grid-text {
color: #A87DFF;
font-size: 28rpx;
margin-top: 6rpx;
}
.grid-text {
font-size: 28rpx;
margin-top: 4rpx;
}
</style>
<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>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <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> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge> <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-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
</u-cell-item> </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="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
<u-icon slot="right-icon" size="34" name="calendar"></u-icon> <u-icon slot="right-icon" size="34" name="calendar"></u-icon>
<u-field slot="value"></u-field> <u-field slot="value"></u-field>
......
<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>
...@@ -8,6 +8,10 @@ export default [{ ...@@ -8,6 +8,10 @@ export default [{
path: '/pages/componentsA/icon/index', path: '/pages/componentsA/icon/index',
icon: 'icon', icon: 'icon',
title: 'Icon 图标', title: 'Icon 图标',
},{
path: '/pages/componentsB/image/index',
icon: 'image',
title: 'Image 图片',
}, { }, {
path: '/pages/componentsC/button/index', path: '/pages/componentsC/button/index',
icon: 'button', icon: 'button',
......
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
@tap.stop="click($event)" @tap.stop="click($event)"
:hover-class="getHoverClass" :hover-class="getHoverClass"
:loading="loading" :loading="loading"
data-name="dataName"
> >
<slot></slot> <slot></slot>
<view <view
......
...@@ -46,11 +46,6 @@ ...@@ -46,11 +46,6 @@
index: 0, index: 0,
} }
}, },
provide() {
return {
uCellGroup: this
}
},
} }
</script> </script>
......
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<view <view
@tap="click" @tap="click"
class="u-cell" 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-stay-time="150"
:hover-class="hoverClass" :hover-class="hoverClass"
:style="{ :style="{
backgroundColor: bgColor 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> <view class="u-flex" v-else>
<slot name="icon"></slot> <slot name="icon"></slot>
</view> </view>
...@@ -49,12 +49,14 @@ ...@@ -49,12 +49,14 @@
* @tutorial https://www.uviewui.com/components/cell.html * @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 左侧标题 * @property {String} title 左侧标题
* @property {String} icon 左侧图标名,只支持uView内置图标,见Icon 图标 * @property {String} icon 左侧图标名,只支持uView内置图标,见Icon 图标
* @property {Object} icon-style 左边图标的样式,对象形式
* @property {String} value 右侧内容 * @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息 * @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 {Boolean} center 是否使内容垂直居中(默认false)
* @property {String} hover-class 是否开启点击反馈,none为无效果(默认true) * @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} arrow 是否显示右侧箭头(默认true)
* @property {Boolean} required 箭头方向,可选值(默认right) * @property {Boolean} required 箭头方向,可选值(默认right)
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号(默认false) * @property {Boolean} arrow-direction 是否显示左边表示必填的星号(默认false)
...@@ -89,16 +91,22 @@ export default { ...@@ -89,16 +91,22 @@ export default {
type: [String, Number], type: [String, Number],
default: '' default: ''
}, },
// 是否显示边框 // 是否显示边框
borderBottom: { borderBottom: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 多个cell中,中间的cell显示下划线时,下划线是否给一个到左边的距离 // 是否显示上边框
borderGap: { borderTop: {
type: Boolean, type: Boolean,
default: true default: false
}, },
// 多个cell中,中间的cell显示下划线时,下划线是否给一个到左边的距离
// 1.4.0版本废除此参数,默认边框由border-top和border-bottom提供,此参数会造成干扰
// borderGap: {
// type: Boolean,
// default: true
// },
// 是否开启点击反馈,即点击时cell背景为灰色,none为无效果 // 是否开启点击反馈,即点击时cell背景为灰色,none为无效果
hoverClass: { hoverClass: {
type: String, type: String,
...@@ -169,26 +177,20 @@ export default { ...@@ -169,26 +177,20 @@ export default {
iconSize: { iconSize: {
type: [Number, String], type: [Number, String],
default: 34 default: 34
}
}, },
inject: { // 左边图标的样式,对象形式
uCellGroup: { iconStyle: {
// 添加默认值,是为了能让u-cell-item组件无需u-cell-group组件嵌套亦可单独使用 type: Object,
default() { default() {
return { return {}
index: 0
}
}
} }
}, },
},
data() { data() {
return { return {
itemIndex: 0
}; };
}, },
created() {
this.itemIndex = this.uCellGroup.index++;
},
computed: { computed: {
arrowStyle() { arrowStyle() {
let style = {}; let style = {};
...@@ -260,10 +262,6 @@ export default { ...@@ -260,10 +262,6 @@ export default {
position: relative; position: relative;
} }
.u-border-gap:after {
left: 32rpx !important;
}
.u-cell__label { .u-cell__label {
margin-top: 6rpx; margin-top: 6rpx;
font-size: 26rpx; font-size: 26rpx;
......
<template> <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-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
<view class="u-label" :class="[required ? 'u-required' : '']" :style="{ <view class="u-label" :class="[required ? 'u-required' : '']" :style="{
justifyContent: justifyContent, justifyContent: justifyContent,
flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1' flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1'
}"> }">
<view class="u-icon-wrap" v-if="icon"> <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> </view>
<slot name="icon"></slot> <slot name="icon"></slot>
<text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text> <text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
* @tutorial https://www.uviewui.com/components/field.html * @tutorial https://www.uviewui.com/components/field.html
* @property {String} type 输入框的类型(默认text) * @property {String} type 输入框的类型(默认text)
* @property {String} icon label左边的图标,限uView的图标名称 * @property {String} icon label左边的图标,限uView的图标名称
* @property {Object} icon-style 左边图标的样式,对象形式
* @property {Boolean} right-icon 输入框右边的图标名称,限uView的图标名称(默认false) * @property {Boolean} right-icon 输入框右边的图标名称,限uView的图标名称(默认false)
* @property {Boolean} required 是否必填,左边您显示红色"*"号(默认false) * @property {Boolean} required 是否必填,左边您显示红色"*"号(默认false)
* @property {String} label 输入框左边的文字提示 * @property {String} label 输入框左边的文字提示
...@@ -65,6 +66,8 @@ ...@@ -65,6 +66,8 @@
* @property {Object} field-style 自定义输入框的样式,对象形式 * @property {Object} field-style 自定义输入框的样式,对象形式
* @property {Number | String} clear-size 清除图标的大小,单位rpx(默认30) * @property {Number | String} clear-size 清除图标的大小,单位rpx(默认30)
* @property {String} input-align 输入框内容对齐方式(默认left) * @property {String} input-align 输入框内容对齐方式(默认left)
* @property {Boolean} border-bottom 是否显示field的下边框(默认true)
* @property {Boolean} border-top 是否显示field的上边框(默认false)
* @property {String} icon-color 左边通过icon配置的图标的颜色(默认#606266) * @property {String} icon-color 左边通过icon配置的图标的颜色(默认#606266)
* @property {Boolean} auto-height 是否自动增高输入区域,type为textarea时有效(默认true) * @property {Boolean} auto-height 是否自动增高输入区域,type为textarea时有效(默认true)
* @property {String Boolean} error-message 显示的错误提示内容,如果为空字符串或者false,则不显示错误信息 * @property {String Boolean} error-message 显示的错误提示内容,如果为空字符串或者false,则不显示错误信息
...@@ -162,20 +165,31 @@ export default { ...@@ -162,20 +165,31 @@ export default {
clearSize: { clearSize: {
type: [Number, String], type: [Number, String],
default: 30 default: 30
},
// lable左边的图标样式,对象形式
iconStyle: {
type: Object,
default() {
return {}
} }
}, },
inject: ['uCellGroup'], // 是否显示上边框
borderTop: {
type: Boolean,
default: false
},
// 是否显示下边框
borderBottom: {
type: Boolean,
default: true
},
},
data() { data() {
return { return {
focused: false, focused: false,
itemIndex: 0, itemIndex: 0,
}; };
}, },
created() {
if(this.uCellGroup) {
this.itemIndex = this.uCellGroup.index++;
}
},
computed: { computed: {
inputWrapStyle() { inputWrapStyle() {
let style = {}; let style = {};
...@@ -336,19 +350,6 @@ export default { ...@@ -336,19 +350,6 @@ export default {
align-items: center; 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 { .u-error-message {
color: $u-type-error; color: $u-type-error;
font-size: 26rpx; font-size: 26rpx;
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
* @property {String} label 图标右侧的label文字(默认28) * @property {String} label 图标右侧的label文字(默认28)
* @property {String} label-pos label文字相对于图标的位置,只能right或bottom(默认right) * @property {String} label-pos label文字相对于图标的位置,只能right或bottom(默认right)
* @property {String} label-color label字体颜色(默认#606266) * @property {String} label-color label字体颜色(默认#606266)
* @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} label-pos label相对于图标的位置,只能right或bottom(默认right) * @property {String} label-pos label相对于图标的位置,只能right或bottom(默认right)
......
<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>
...@@ -318,7 +318,7 @@ export default { ...@@ -318,7 +318,7 @@ export default {
&__right-icon { &__right-icon {
position: absolute; position: absolute;
right: 20rpx; right: 0;
top: 50%; top: 50%;
z-index: 3; z-index: 3;
transform: translateY(-50%); transform: translateY(-50%);
......
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
// 如果是不开启过渡效果,直接返回 // 如果是不开启过渡效果,直接返回
if (!this.isEffect) return; if (!this.isEffect) return;
this.time = 0; this.time = 0;
// 原来opacity为1(不透明,是为了显示占位图),改成0(透明, 意味着该元素显示的是背景颜色,默认的白色),再改成1,是为了获得过渡效果 // 原来opacity为1(不透明,是为了显示占位图),改成0(透明,意味着该元素显示的是背景颜色,默认的白色),再改成1,是为了获得过渡效果
this.opacity = 0; this.opacity = 0;
// 延时30ms,否则在浏览器H5,过渡效果无效 // 延时30ms,否则在浏览器H5,过渡效果无效
setTimeout(() => { setTimeout(() => {
......
...@@ -210,7 +210,7 @@ export default { ...@@ -210,7 +210,7 @@ export default {
// 如果自定义了点击返回按钮的函数,则执行,否则执行返回逻辑 // 如果自定义了点击返回按钮的函数,则执行,否则执行返回逻辑
if(typeof this.customBack === 'function') { if(typeof this.customBack === 'function') {
this.customBack(); this.customBack();
} { } else {
uni.navigateBack(); uni.navigateBack();
} }
} }
......
...@@ -181,31 +181,31 @@ ...@@ -181,31 +181,31 @@
.u-mode-light-primary { .u-mode-light-primary {
background-color: $u-type-primary-light; background-color: $u-type-primary-light;
color: $u-type-primary; color: $u-type-primary;
border: 1px solid rgb(215, 234, 254); border: 1px solid $u-type-primary-disabled;
} }
.u-mode-light-success { .u-mode-light-success {
background-color: $u-type-success-light; background-color: $u-type-success-light;
color: $u-type-success; color: $u-type-success;
border: 1px solid #BEF5C8; border: 1px solid $u-type-success-disabled;
} }
.u-mode-light-error { .u-mode-light-error {
background-color: $u-type-error-light; background-color: $u-type-error-light;
color: $u-type-error; color: $u-type-error;
border: 1px solid #fde2e2; border: 1px solid $u-type-error-disabled;
} }
.u-mode-light-warning { .u-mode-light-warning {
background-color: $u-type-warning-light; background-color: $u-type-warning-light;
color: $u-type-warning; color: $u-type-warning;
border: 1px solid #faecd8; border: 1px solid $u-type-warning-disabled;
} }
.u-mode-light-info { .u-mode-light-info {
background-color: $u-type-info-light; background-color: $u-type-info-light;
color: $u-type-info; color: $u-type-info;
border: 1px solid #ebeef5; border: 1px solid $u-type-info-disabled;
} }
.u-mode-dark-primary { .u-mode-dark-primary {
......
...@@ -37,10 +37,11 @@ ...@@ -37,10 +37,11 @@
type: '', // 主题类型,primary,success,error,warning,black type: '', // 主题类型,primary,success,error,warning,black
duration: 2000, // 显示的时间,毫秒 duration: 2000, // 显示的时间,毫秒
isTab: false, // 是否跳转tab页面 isTab: false, // 是否跳转tab页面
url: '', // toast消失后是否跳转页面,有则跳转 url: '', // toast消失后是否跳转页面,有则跳转,优先级高于back参数
icon: true, // 显示的图标 icon: true, // 显示的图标
position: 'center', // toast出现的位置 position: 'center', // toast出现的位置
callback: null, // 执行完后的回调函数 callback: null, // 执行完后的回调函数
back: false, // 结束toast是否自动返回上一页
} }
}; };
}, },
...@@ -117,6 +118,11 @@ ...@@ -117,6 +118,11 @@
url: this.config.url url: this.config.url
}); });
} }
} else if(this.config.back) {
// 回退到上一页
this.$u.route({
type: 'back'
})
} }
} }
} }
......
...@@ -245,7 +245,14 @@ export default { ...@@ -245,7 +245,14 @@ export default {
immediate: true, immediate: true,
handler(val) { handler(val) {
val.map(value => { 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 });
}); });
} }
} }
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
} }
/* #endif */ /* #endif */
/* 支付宝,百度,头条小程序目前读取大的本地字体文件,导致无法显示图标,故用在线加载的方式-2020-05-12 */ /* 支付宝,百度,头条,QQ小程序,以及H5在部分浏览器目前读取大的本地字体文件,导致无法显示图标,故用在线加载的方式-2020-06-24 */
/* #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || H5 */ /* #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || H5 || MP-QQ */
@font-face { @font-face {
font-family: "uicon-iconfont"; font-family: "uicon-iconfont";
src: url('//at.alicdn.com/t/font_1529455_k9eg3z8m98'); src: url('//at.alicdn.com/t/font_1529455_k9eg3z8m98');
......
// 引入全局mixin // 引入全局mixin
import mixin from './libs/mixin/mixin.js' import mixin from './libs/mixin/mixin.js'
// 引入关于是否mixin集成小程序分享的配置 // 引入关于是否mixin集成小程序分享的配置
import wxshare from './libs/mixin/mpShare.js' // import wxshare from './libs/mixin/mpShare.js'
// 全局挂载引入http相关请求拦截插件 // 全局挂载引入http相关请求拦截插件
import http from './libs/request' import http from './libs/request'
...@@ -45,6 +45,8 @@ import randomArray from './libs/function/randomArray.js' ...@@ -45,6 +45,8 @@ import randomArray from './libs/function/randomArray.js'
import deepClone from './libs/function/deepClone.js' import deepClone from './libs/function/deepClone.js'
// 对象深度拷贝 // 对象深度拷贝
import deepMerge from './libs/function/deepMerge.js' import deepMerge from './libs/function/deepMerge.js'
// 添加单位
import addUnit from './libs/function/addUnit.js'
// 规则检验 // 规则检验
import test from './libs/function/test.js' import test from './libs/function/test.js'
...@@ -86,6 +88,7 @@ const $u = { ...@@ -86,6 +88,7 @@ const $u = {
deepClone, deepClone,
deepMerge, deepMerge,
getParent, getParent,
addUnit,
trim, trim,
type: ['primary', 'success', 'error', 'warning', 'info'], type: ['primary', 'success', 'error', 'warning', 'info'],
http, http,
......
// 此版本发布于2020-06-19 // 此版本发布于2020-06-28
let version = '1.3.61'; let version = '1.4.0';
export default { export default {
v: version, v: version,
......
...@@ -6,9 +6,9 @@ image { ...@@ -6,9 +6,9 @@ image {
will-change: transform; will-change: transform;
} }
// 在weex,也即nvue中,所有元素默认为border-box
view, view,
text { text {
box-sizing: border-box; box-sizing: border-box;
flex-direction: row;
} }
/* #endif */ /* #endif */
\ No newline at end of file
...@@ -10,7 +10,7 @@ u-td, u-th { ...@@ -10,7 +10,7 @@ u-td, u-th {
} }
u-icon { u-icon {
display: flex; display: inline-flex;
align-items: center; align-items: center;
} }
......
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
...@@ -6,14 +6,18 @@ export default function getParent(name, keys) { ...@@ -6,14 +6,18 @@ export default function getParent(name, keys) {
while (parent) { while (parent) {
// 父组件 // 父组件
if (parent.$options.name !== name) { if (parent.$options.name !== name) {
// 如果组件的name不相等,继续上一级寻找
parent = parent.$parent; parent = parent.$parent;
} else { } else {
return keys.reduce((result, key) => { let data = {};
result[key] = parent[key]; // 历遍传过来的对象参数
return result; for(let i in keys) {
}, {}); // 如果父组件有此值则用,无此值则用默认值
data[i] = parent[i] ? parent[i] : keys[i];
}
return data;
} }
} }
return null; return {};
} }
\ No newline at end of file
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.3.8", "version": "1.4.0",
"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