Skip to content

U
uview-ui
Commit 98ff106a authored by wlxuqu's avatar wlxuqu
Browse files
Options

Merge branch 'yiruiwen' into dev

parents 949abe51 2587cd14
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 534 additions and 129 deletions
.editorconfig
View file @ 98ff106a
......@@ -7,7 +7,5 @@ indent_size = 4
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
.eslintignore 0 → 100644
View file @ 98ff106a
unpackage
node_modules
uview-ui
manifest.json
View file @ 98ff106a
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.4.5",
"versionName" : "1.4.8",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
pages.json
View file @ 98ff106a
......@@ -6,7 +6,7 @@
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsB/checkbox/index", //启动页面，必选
// "path": "pages/componentsB/tabbar/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }]
// },
......
pages/componentsB/checkbox/index.vue
View file @ 98ff106a
......@@ -4,11 +4,16 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<view class="">
<u-checkbox-group :size="size" :width="width" :wrap="wrap" :max="max" @change="checkboxGroupChange" :activeColor="activeColor">
<u-checkbox-group :size="size" :width="width"
:wrap="wrap" :max="max"
@change="checkboxGroupChange"
:activeColor="activeColor"
>
<u-checkbox @change="checkboxChange"
v-model="item.checked" v-for="(item, index) in list"
:key="index" :name="item.name"
:shape="shape" :disabled="item.disabled"
:shape="shape"
:disabled="item.disabled"
>{{item.name}}</u-checkbox>
</u-checkbox-group>
</view>
......@@ -140,7 +145,6 @@
// 选中任一checkbox时，由checkbox-group触发
checkboxGroupChange(e) {
this.result = e;
// console.log(this.result);
},
widthChange(index) {
this.width = index == 0 ? '50%' : '';
......
pages/componentsB/tabbar/index.vue
View file @ 98ff106a
<template>
<view class="">
<view class="u-demo">
<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 vibrateShort :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">凸起按钮</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="minButtonChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">背景色</view>
<u-subsection vibrateShort :list="['#ffffff', '#1f1f1d']" @change="bgColorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">顶部边框</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="borderTopChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">提示角标</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="badgeChange"></u-subsection>
</view>
</view>
</view>
<u-tabbar
:beforeSwitch="beforeSwitch"
v-model="current"
:show="show"
:bg-color="bgColor"
:border-top="borderTop"
:list="list"
:mid-button="midButton"
:inactive-color="inactiveColor"
:activeColor="activeColor"
></u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
show: true,
bgColor: '#ffffff',
borderTop: true,
list: [{
iconPath: "home",
selectedIconPath: "home-fill",
text: '首页',
count: 2,
isDot: true,
customIcon: false,
},
{
iconPath: "photo",
selectedIconPath: "photo-fill",
text: '放映厅',
customIcon: false,
},
{
iconPath: "/static/uview/example/min_button.png",
selectedIconPath: "/static/uview/example/min_button_select.png",
text: '发布',
midButton: true,
customIcon: false,
},
{
iconPath: "play-right",
selectedIconPath: "play-right-fill",
text: '直播',
customIcon: false,
},
{
iconPath: "account",
selectedIconPath: "account-fill",
text: '我的',
count: 23,
isDot: false,
customIcon: false,
},
],
midButton: true,
inactiveColor: '#909399',
activeColor: '#5098FF'
}
},
methods: {
beforeSwitch(index) {
return true;
},
showChange(index) {
this.show = !index;
},
bgColorChange(index) {
if(index == 0) {
this.activeColor = '#5098FF';
this.inactiveColor = '#909399';
}
if(index == 1) {
this.activeColor = '#D0D0D0';
this.inactiveColor = '#5A5A5A';
}
this.bgColor = ['#ffffff', '#1f1f1d'][index];
},
borderTopChange(index) {
this.borderTop = !index;
},
badgeChange(index) {
if (index == 1) {
this.config[0].count = 0;
this.config[4].count = 0;
} else {
this.config[0].count = 2;
this.config[4].count = 23;
}
},
minButtonChange(index) {
this.midButton = !index;
}
}
}
</script>
<style>
<style scoped lang="scss">
.u-demo-area {
margin: 0 -40rpx;
}
</style>
pages/componentsC/test/index.vue
View file @ 98ff106a
<template>
<u-checkbox-group>
<u-checkbox v-model="checked">xxxx</u-checkbox>
</u-checkbox-group>
<view class="wrap">
<u-swiper :list="list"></u-swiper>
</view>
</template>
<script>
export default {
data() {
return {
checked: true,
list: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
}
},
methods: {
}
}
</script>
<style scoped>
</style>
</script>
\ No newline at end of file
uview-ui/components/u-cell-item/u-cell-item.vue
View file @ 98ff106a
......@@ -36,7 +36,7 @@
<slot v-else></slot>
</view>
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
<view class="u-flex" v-else>
<view class="u-flex" v-if="$slots['right-icon']">
<slot name="right-icon"></slot>
</view>
</view>
......
uview-ui/components/u-checkbox-group/u-checkbox-group.vue
View file @ 98ff106a
......@@ -45,6 +45,16 @@
type: [Boolean, String],
default: ''
},
// 是否禁止点击提示语选中复选框
labelDisabled: {
type: Boolean,
default: false
},
// 形状，square为方形，circle为原型
shape: {
type: String,
default: 'square'
},
// 选中状态下的颜色
activeColor: {
type: String,
......@@ -64,12 +74,12 @@
wrap: {
type: Boolean,
default: false
}
},
provide() {
return {
checkboxGroup: this
}
},
// 图标的大小，单位rpx
iconSize: {
type: [String, Number],
default: 20
},
},
data() {
return {
......
uview-ui/components/u-checkbox/u-checkbox.vue
View file @ 98ff106a
<template>
<view class="u-checkbox" :style="[checkboxStyle]">
<view class="u-checkbox__icon-wrap" @tap="toggle">
<u-icon :class="iconClass" name="checkbox-mark" :size="iconSize" :color="iconColor" class="u-checkbox__icon" :style="[iconStyle]" />
<u-icon :class="iconClass" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" class="u-checkbox__icon" :style="[iconStyle]" />
</view>
<view class="u-label-class u-checkbox__label" @tap="onClickLabel" :style="{
fontSize: labelSize + 'rpx'
......@@ -37,7 +37,7 @@
// 形状，square为方形，circle为原型
shape: {
type: String,
default: 'square'
default: ''
},
// 是否为选中状态
value: {
......@@ -62,86 +62,93 @@
// 图标的大小，单位rpx
iconSize: {
type: [String, Number],
default: 20
default: ''
},
// label的字体大小，rpx单位
labelSize: {
type: [String, Number],
default: 28
default: ''
},
// 组件的整体大小
size: {
type: [String, Number],
default: 34
default: ''
},
},
inject: {
checkboxGroup: {
// 添加默认值，是为了能让u-checkbox组件无需u-checkbox-group组件嵌套时单独使用
default() {
return {
disabled: false,
children: [],
size: 34,
activeColor: '#2979ff',
max: 999999,
emitEvent: () => {},
width: 'auto',
wrap: false
}
}
}
},
data() {
return {
parentDisabled: false,
newParams: {},
};
},
created() {
this.parentDisabled = this.checkboxGroup.disabled;
this.checkboxGroup.children.push(this);
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
this.parent = this.$u.$parent.call(this, 'u-checkbox-group');
// 如果存在u-checkbox-group，将本组件的this塞进父组件的children中
this.parent && this.parent.children.push(this);
},
computed: {
// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
isDisabled() {
return this.parent ? this.parent.disabled || this.disabled : this.disabled;
},
// 是否禁用label点击
isLabelDisabled() {
return this.parent ? this.parent.labelDisabled || this.labelDisabled : this.labelDisabled;
},
// 组件尺寸，对应size的值，默认值为34rpx
checkboxSize() {
return this.size ? this.size : (this.parent ? this.parent.size : 34);
},
// 组件的勾选图标的尺寸，默认20
checkboxIconSize() {
return this.iconSize ? this.iconSize : (this.parent ? this.parent.iconSize : 20);
},
// 组件选中激活时的颜色
elActiveColor() {
return this.activeColor ? this.activeColor : (this.parent ? this.parent.activeColor : 'primary');
},
// 组件的形状
elShape() {
return this.shape ? this.shape : (this.parent ? this.parent.shape : 'square');
},
iconStyle() {
let style = {};
if (this.checkboxActiveColor && this.value && !this.disabled && !this.parentDisabled) {
style.borderColor = this.checkboxActiveColor;
style.backgroundColor = this.checkboxActiveColor;
// 既要判断是否手动禁用，还要判断用户v-model绑定的值，如果绑定为false，那么也无法选中
if (this.elActiveColor && this.value && !this.isDisabled) {
style.borderColor = this.elActiveColor;
style.backgroundColor = this.elActiveColor;
}
style.width = this.checkboxGroup.size + 'rpx';
style.height = this.checkboxGroup.size + 'rpx';
style.width = this.$u.addUnit(this.checkboxSize);
style.height = this.$u.addUnit(this.checkboxSize);
return style;
},
// checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
iconColor() {
return this.value ? '#ffffff' : 'transparent';
},
iconClass() {
let classs = [];
classs.push('u-checkbox__icon--' + this.shape);
classs.push('u-checkbox__icon--' + this.elShape);
if (this.value == true) classs.push('u-checkbox__icon--checked');
if (this.disabled || this.parentDisabled) classs.push('u-checkbox__icon--disabled');
if (this.value && (this.disabled || this.parentDisabled)) classs.push('u-checkbox__icon--disabled--checked');
if (this.isDisabled) classs.push('u-checkbox__icon--disabled');
if (this.value && this.isDisabled) classs.push('u-checkbox__icon--disabled--checked');
return classs;
},
// 激活的颜色，可能受checkboxGroup和本组件的activeColor影响
// 本组件的activeColor值优先
checkboxActiveColor() {
return this.activeColor ? this.activeColor : this.checkboxGroup.activeColor;
},
checkboxStyle() {
let style = {};
if(this.checkboxGroup.width) {
style.width = this.checkboxGroup.width;
if(this.parent && this.parent.width) {
style.width = this.parent.width;
// #ifdef MP
// 各家小程序因为它们特殊的编译结构，使用float布局
style.float = 'left';
// #endif
// #ifndef MP
// H5和APP使用flex布局
style.flex = `0 0 ${this.checkboxGroup.width}`;
style.flex = `0 0 ${this.parent.width}`;
// #endif
}
if(this.checkboxGroup.wrap) {
if(this.parent && this.parent.wrap) {
style.width = '100%';
// #ifndef MP
// H5和APP使用flex布局，将宽度设置100%，即可自动换行
......@@ -153,12 +160,12 @@
},
methods: {
onClickLabel() {
if (!this.disabled && !this.labelDisabled && !this.parentDisabled) {
if (!this.isDisabled) {
this.setValue();
}
},
toggle() {
if (!this.disabled && !this.parentDisabled) {
if (!this.isDisabled) {
this.setValue();
}
},
......@@ -167,15 +174,19 @@
value: this.value,
name: this.name
})
this.checkboxGroup.emitEvent();
// 执行父组件u-checkbox-group的事件方法
if(this.parent && this.parent.emitEvent) this.parent.emitEvent();
},
// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
setValue() {
// 判断是否超过了可选的最大数量
let checkedNum = 0;
this.checkboxGroup.children.map(val => {
if (val.value) checkedNum++;
})
if(this.parent && this.parent.children) {
// 只要父组件的某一个子元素的value为true，就加1(已有的选中数量)
this.parent.children.map(val => {
if (val.value) checkedNum++;
})
}
// 如果原来为选中状态，那么可以取消
if (this.value == true) {
this.$emit('input', !this.value);
......@@ -183,7 +194,7 @@
this.$nextTick(function() {
this.emitEvent();
})
} else if (checkedNum < this.checkboxGroup.max && this.value == false) {
} else if ((this.parent && checkedNum < this.parent.max) || !this.parent) {
// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
this.$emit('input', !this.value);
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
......@@ -201,12 +212,9 @@
@import "../../libs/css/style.components.scss";
.u-checkbox {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
display: inline-flex;
align-items: center;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
line-height: 1.8;
}
......@@ -217,16 +225,13 @@
}
.u-checkbox__icon-wrap {
-webkit-flex: none;
flex: none;
}
.u-checkbox__icon {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
width: 42rpx;
......@@ -249,8 +254,8 @@
.u-checkbox__icon--checked {
color: #fff;
background-color: #2979ff;
border-color: #2979ff;
background-color: $u-type-primary;
border-color: $u-type-primary;
}
.u-checkbox__icon--disabled {
......
uview-ui/components/u-collapse-item/u-collapse-item.vue
View file @ 98ff106a
......@@ -141,11 +141,10 @@
this.isShow = !this.isShow;
// 触发本组件的事件
uni.$emit('change', {
this.$emit('change', {
index: this.index,
show: this.isShow
})
// 只有在打开时才发出事件
if (this.isShow) this.uCollapse.onChange();
this.$forceUpdate();
......
uview-ui/components/u-field/u-field.vue
View file @ 98ff106a
......@@ -37,7 +37,7 @@
@tap="fieldClick"
/>
</view>
<u-icon :size="clearSize" v-if="clearable && value && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @touchstart="onClear"/>
<u-icon :size="clearSize" v-if="clearable && value != '' && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @touchstart="onClear"/>
<view class="u-button-wrap"><slot name="right" /></view>
<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" />
</view>
......
uview-ui/components/u-form-item/u-form-item.vue
View file @ 98ff106a
......@@ -372,6 +372,8 @@ export default {
&__icon {
margin-left: 10rpx;
color: $u-light-color;
font-size: 30rpx;
}
}
}
......
uview-ui/components/u-form/u-form.vue
View file @ 98ff106a
......@@ -9,7 +9,7 @@
* @tutorial http://uviewui.com/components/form.html
* @property {Object} model 表单数据对象
* @property {Object} rules 通过ref设置，见官网说明
* @property {Array} errorType 错误的提示方式，数组形式，见上方说明(默认['message'])
* @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
* @example <u-form :model="form" ref="uForm"></u-form>
*/
......
uview-ui/components/u-icon/u-icon.vue
View file @ 98ff106a
......@@ -4,11 +4,11 @@
<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="{
color: labelColor,
fontSize: labelSize + 'rpx',
marginLeft: labelPos == 'right' ? marginLeft + 'rpx' : 0,
marginTop: labelPos == 'bottom' ? marginTop + 'rpx' : 0,
marginRight: labelPos == 'left' ? marginRight + 'rpx' : 0,
marginBottom: labelPos == 'top' ? marginBottom + 'rpx' : 0,
fontSize: $u.addUnit(labelSize),
marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
}">{{label}}</text>
</view>
</template>
......@@ -44,7 +44,7 @@ export default {
type: String,
default: ''
},
// 图标颜色，可接受主题色(组件内部使用，不对外)
// 图标颜色，可接受主题色
color: {
type: String,
default: ''
......@@ -146,7 +146,7 @@ export default {
iconStyle() {
let style = {};
style = {
fontSize: this.size == 'inherit' ? 'inherit' : this.size + 'rpx',
fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal'
};
// 非主题色值时，才当作颜色值
......@@ -159,7 +159,7 @@ export default {
},
imgStyle() {
let style = {};
style.width = this.size + 'rpx';
style.width = this.$u.addUnit(this.size);
return style;
}
},
......@@ -183,12 +183,12 @@ export default {
align-items: center;
&--left {
flex-direction: row;
flex-direction: row-reverse;
align-items: center;
}
&--right {
flex-direction: row-reverse;
flex-direction: row;
align-items: center;
}
......
uview-ui/components/u-input/u-input.vue
View file @ 98ff106a
......@@ -49,7 +49,7 @@
@confirm="onConfirm"
/>
<view class="u-input__right-icon u-flex">
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="clearable && value && focused">
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="clearable && value != '' && focused">
<u-icon size="32" name="close-circle-fill" color="#c0c4cc" @touchstart="onClear"/>
</view>
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
......@@ -96,7 +96,7 @@ export default {
mixins: [Emitter],
props: {
value: {
type: String,
type: [String, Number],
default: ''
},
// 输入框的类型，textarea，text，number
......@@ -206,6 +206,8 @@ export default {
value: nVal
}
})
// 值变化，且是右对齐时，计算右侧的清除图标的位置尺寸，避免input-align=right时文字与清除图标重合
if(oVal == '' && this.inputAlign == 'right') this.getMarginRight();
},
focused(nVal) {
if(this.clearable && this.value) {
......@@ -244,8 +246,7 @@ export default {
getMarginRight() {
this.$nextTick(() => {
this.$uGetRect('.u-input__right-icon').then(res => {
// 此处20rpx为图标绝对定位右侧的“right”
this.marginRight = res.width + uni.upx2px(20);
this.marginRight = res.width;
})
})
},
......
uview-ui/components/u-radio/u-radio.vue
View file @ 98ff106a
......@@ -37,7 +37,7 @@
// 形状，square为方形，circle为原型
shape: {
type: String,
default: 'square'
default: 'circle'
},
// 是否禁用
disabled: {
......
uview-ui/components/u-tabbar/u-tabbar.vue
View file @ 98ff106a
<template>
<view class="u-tabbar">
<view v-if="show" class="u-tabbar" @touchmove.stop.prevent>
<view class="u-tabbar__content safe-area-inset-bottom" :style="{
height: $u.addUnit(height),
backgroundColor: bgColor,
}" :class="{
'u-border-top': borderTop
}">
<view class="u-tabbar__content__item" v-for="(item, index) in list" :key="index" :class="{
'u-tabbar__content__circle': midButton &&item.midButton
}" @tap.stop="clickHandler(index)" :style="{
backgroundColor: bgColor
}">
<view :class="[
midButton && item.midButton ? 'u-tabbar__content__circle__button' : 'u-tabbar__content__item__button'
]">
<u-icon
:size="midButton && item.midButton ? midButtonSize : iconSize"
:name="index == value ? item.selectedIconPath : item.iconPath"
:color="index == value ? activeColor : inactiveColor"
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
></u-icon>
<u-badge :count="item.count" :is-dot="item.isDot"
v-if="item.count > 0"
:offset="[-2, getOffsetRight(item.count, item.isDot)]"
></u-badge>
</view>
<view class="u-tabbar__content__item__text" :style="{
color: index == value ? activeColor : inactiveColor
}">
<text class="u-line-1">{{item.text}}</text>
</view>
</view>
<view v-if="midButton" class="u-tabbar__content__circle__border" :class="{
'u-border': borderTop,
}" :style="{
backgroundColor: bgColor
}">
</view>
</view>
<!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
<view class="u-fixed-placeholder safe-area-inset-bottom" :style="{
height: `calc(${$u.addUnit(height)} + ${midButton ? 48 : 0}rpx)`,
}"></view>
</view>
</template>
<script>
export default {
props: {
// 显示与否
show: {
type: Boolean,
default: true
},
// 通过v-model绑定current值
value: {
type: [String, Number],
default: 0
},
// 整个tabbar的背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
// tabbar的高度，默认50px，单位任意，如果为数值，则为rpx单位
height: {
type: [String, Number],
default: '50px'
},
// 非凸起图标的大小，单位任意，数值默认rpx
iconSize: {
type: [String, Number],
default: 40
},
// 凸起的图标的大小，单位任意，数值默认rpx
midButtonSize: {
type: [String, Number],
default: 90
},
// 激活时的演示，包括字体图标，提示文字等的演示
activeColor: {
type: String,
default: '#303133'
},
// 未激活时的颜色
inactiveColor: {
type: String,
default: '#606266'
},
// 是否显示中部的凸起按钮
midButton: {
type: Boolean,
default: false
},
// 配置参数
list: {
type: Array,
default () {
return []
}
},
// 切换前的回调
beforeSwitch: {
type: Function,
default: null
},
// 是否显示顶部的横线
borderTop: {
type: Boolean,
default: true
},
},
data() {
return {
}
},
methods: {
async clickHandler(index) {
if(this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
// 执行回调，同时传入索引当作参数
let beforeSwitch = this.beforeSwitch(index);
// 判断是否返回了promise
if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
await beforeSwitch.then(res => {
// promise返回成功，
this.switchTab(index);
}).catch(err => {
})
} else if(beforeSwitch === true) {
// 如果返回true
this.switchTab(index);
}
} else {
this.switchTab(index);
}
},
// 切换tab
switchTab(index) {
// 发出事件和修改v-model绑定的值
this.$emit('change', index);
this.$emit('input', index);
},
// 计算角标的right值
getOffsetRight(count, isDot) {
// 点类型，count大于9(两位数)，分别设置不同的right值，避免位置太挤
if(isDot) {
return -20;
} else if(count > 9) {
return -40;
} else {
return -30;
}
}
}
}
</script>
<style scoped lang="scss">
.u-fixed-placeholder {
box-sizing: content-box;
}
.u-tabbar {
&__content {
display: flex;
align-items: center;
position: relative;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 998;
box-sizing: content-box;
&__circle__border {
border-radius: 100%;
width: 110rpx;
height: 110rpx;
top: -48rpx;
left: 50%;
transform: translateX(-50%);
position: absolute;
z-index: 4;
background-color: #ffffff;
&:after {
border-radius: 100px;
}
}
&__item {
flex: 1;
justify-content: center;
height: 100%;
padding: 12rpx 0;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
&__button {
position: absolute;
top: 10rpx;
}
&__text {
color: $u-content-color;
font-size: 26rpx;
line-height: 28rpx;
position: absolute;
bottom: 12rpx;
left: 50%;
transform: translateX(-50%);
}
}
&__circle {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 10;
height: calc(100% - 1px);
&__button {
width: 90rpx;
height: 90rpx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
background-color: #ffffff;
top: -40rpx;
left: 50%;
z-index: 6;
transform: translateX(-50%);
}
}
}
}
</style>
uview-ui/components/u-upload/u-upload.vue
View file @ 98ff106a
......@@ -521,6 +521,7 @@ export default {
.u-add-tips {
margin-top: 20rpx;
line-height: 40rpx;
}
.u-add-wrap__hover {
......
uview-ui/iconfont.css
View file @ 98ff106a
This diff is collapsed.
uview-ui/index.js
View file @ 98ff106a
......@@ -58,6 +58,8 @@ import trim from './libs/function/trim.js'
import toast from './libs/function/toast.js'
// 获取父组件参数
import getParent from './libs/function/getParent.js'
// 获取整个父组件
import $parent from './libs/function/$parent.js'
// 配置信息
......@@ -88,6 +90,7 @@ const $u = {
deepClone,
deepMerge,
getParent,
$parent,
addUnit,
trim,
type: ['primary', 'success', 'error', 'warning', 'info'],
......
uview-ui/libs/config/config.js
View file @ 98ff106a
// 此版本发布于2020-07-04
let version = '1.4.5';
// 此版本发布于2020-07-08
let version = '1.4.8';
export default {
v: version,
......
uview-ui/libs/css/common.scss
View file @ 98ff106a
......@@ -8,6 +8,21 @@
position: absolute;
}
// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
/* #ifndef APP-NVUE */
image {
display: inline-block;
// 解决图片加载时可能会瞬间变形的问题
will-change: transform;
}
// 在weex，也即nvue中，所有元素默认为border-box
view,
text {
box-sizing: border-box;
}
/* #endif */
.u-font-xs {
font-size: 22rpx;
}
......
uview-ui/libs/css/style.components.scss
View file @ 98ff106a
// nvue不能用标签命名样式
/* #ifndef APP-NVUE */
image {
display: inline-block;
// 解决图片加载时可能会瞬间变形的问题
will-change: transform;
}
// 在weex，也即nvue中，所有元素默认为border-box
view,
text {
box-sizing: border-box;
}
/* #endif */
\ No newline at end of file
.demo {
}
\ No newline at end of file
uview-ui/libs/function/$parent.js 0 → 100644
View file @ 98ff106a
// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
export default function $parent(name, keys) {
let parent = this.$parent;
// 通过while历遍，这里主要是为了H5需要多层解析的问题
while (parent) {
// 父组件
if (parent.$options.name !== name) {
// 如果组件的name不相等，继续上一级寻找
parent = parent.$parent;
} else {
return parent;
}
}
return false;
}
\ No newline at end of file
uview-ui/libs/function/test.js
View file @ 98ff106a
......@@ -78,7 +78,7 @@ function carNo(value) {
*/
function amount(value) {
//金额，只允许保留两位小数
return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/.test(value);
return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
}
/**
......
uview-ui/package.json
View file @ 98ff106a
{
"name": "uview-ui",
"version": "1.4.5",
"version": "1.4.8",
"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