Skip to content

U
uview-ui
Commit 5e5b3da2 authored by wlxuqu's avatar wlxuqu
Browse files
Options

1. 修复select和picker组件在微信小程序滑动过快，快速点击确定按钮时选择值可能不对的问题 

2. 废弃color.js文件，颜色值全部改由css提供，为自定义主题做准备
3. 修复form表单综合演示中，switch没有垂直居中的问题
parent b6fac515
Hide whitespace changes
Inline Side-by-side
Showing with 1548 additions and 1412 deletions
pages.json
View file @ 5e5b3da2
......@@ -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/componentsA/select/index", //启动页面，必选
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
}]
},
"pages": [
// 演示-组件
{
......
pages/componentsA/select/index.vue
View file @ 5e5b3da2
......@@ -32,32 +32,32 @@ export default {
list: [],
list1: [
{
id: '江',
name: '江'
value: '江',
label: '江'
},
{
id: '湖',
name: '湖'
value: '湖',
label: '湖'
},
{
id: '夜',
name: '夜'
value: '夜',
label: '夜'
},
{
id: '雨',
name: '雨'
value: '雨',
label: '雨'
},
{
id: '十',
name: '十'
value: '十',
label: '十'
},
{
id: '年',
name: '年'
value: '年',
label: '年'
},
{
id: '灯',
name: '灯'
value: '灯',
label: '灯'
}
],
list2: [
......
pages/componentsB/steps/index.vue
View file @ 5e5b3da2
......@@ -3,7 +3,7 @@
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-steps :current="current" :list="steps" :mode="mode" :type="type"></u-steps>
<u-steps :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps>
</view>
</view>
<view class="u-config-wrap">
......@@ -15,8 +15,8 @@
<u-subsection vibrateShort :list="['number', 'dot']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">主题选择</view>
<u-subsection vibrateShort :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
<view class="u-item-title">自定义图标</view>
<u-subsection vibrateShort :list="['否', '是']" @change="iconChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">当前步值</view>
......@@ -40,7 +40,7 @@
name: '签收'
}, ],
current: 0,
type: 'primary',
icon: 'checkmark',
mode: 'number'
}
},
......@@ -48,11 +48,11 @@
modeChange(index) {
this.mode = index == 0 ? 'number' : 'dot';
},
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
},
stepChange(index) {
this.current = index == 0 ? 0 : index == 1 ? 1 : index == 2 ? 2 : 3;
},
iconChange(index) {
this.icon = index == 0 ? 'checkmark' : 'map-fill';
}
}
}
......
pages/componentsC/button/index.vue
View file @ 5e5b3da2
......@@ -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 disabled @click="btnClick" :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/test/index.vue
View file @ 5e5b3da2
<template>
<view>
<view class="wed">
<!-- 单选日期 -->
<text @click="WE=!WE">开始</text>
<input type="text" v-model="result" />
<u-calendar v-model="WE" :mode="WEmode" @change="WEchange" start-text="开始" end-text="结束"></u-calendar>
</view>
<view class="wed">
<!-- 多选日期 -->
<text @click="WED=!WED">开始</text>
<input type="text" v-model="startDate" />
<text@click="WED=!WED">结束</text>
<input type="text" v-model="endDate" />
<u-calendar v-model="WED" :mode="WEDmode" @change="WEDchange" start-text="开始" end-text="结束"></u-calendar>
</view>
<view class="">
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-text="更多" :shadow-style="shadowStyle">
<rich-text :nodes="content"></rich-text>
</u-read-more>
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-tex t="更多" :shadow-style="shadowStyle">
<rich-text :nodes="content"></rich-text>
</u-read-more>
</view>
<view>
<!-- 字段少的表格 -->
<u-table>
<u-tr>
<u-th width="30%">学校</u-th>
<u-th>班级</u-th>
<u-th>年龄</u-th>
<u-th>爱好</u-th>
</u-tr>
<u-tr v-for="(item, index) in itemList" :key="index">
<u-td width="6%">
<u-checkbox-group @change="checkboxGroupChange1(index)">
<u-checkbox @change="checkboxChange" v-model="item.checked"></u-checkbox>
</u-checkbox-group>
</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.desc}}</u-td>
<u-td>{{item.desc}}</u-td>
</u-tr>
</u-table>
</view>
<view>
<u-table>
<u-tr>
<u-th width="38%">名称</u-th>
<u-th>别名</u-th>
<u-th>座右铭</u-th>
</u-tr>
<u-tr v-for="(item, index) in itemList" :key="index">
<u-td width="6%">
<u-radio-group v-model="value" label-disabled="true" @change="radioGroupChange(index)">
<u-radio @change="radioChange" :name="item.warehouseid">
</u-radio>
</u-radio-group>
</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.desc}}</u-td>
</u-tr>
</u-table>
</view>
<view class="wrap">
<u-swiper :list="list"></u-swiper>
</view>
</template>
<script>
export default {
data() {
return {
// ----单选------------
WE: false,
WEmode: "date",
result: '',
// ---------------------
// ----多选--------------
WED: false,
WEDmode: 'range',
startDate: "",
endDate: '',
// ----------------------
content: `客户:山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
shadowStyle: {
// backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
paddingTop: "300rpx",
marginTop: "-300rpx",
},
//-------------单选框
checked: false,
checked1: false,
currentSort: 0,
itemList: {},
value: 'orange',
bangkList: [{
name: '英雄联盟',
alias: '撸啊撸',
else: '玩你**',
list: [{
image: '/static/uView/swiper/swiper1.jpg',
title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
},
{
name: '守望先锋',
alias: '守望屁股',
else: '打你**',
image: '/static/uView/swiper/swiper2.jpg',
title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
},
{
name: '炉石传说',
alias: '非酋玩家',
else: '冲你**',
image: '/static/uView/swiper/swiper3.jpg',
title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
}
],
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
// value: false,
]
}
},
created() {
//页面一进来就发送请求
uni.request({
url: 'http://47.99.173.114:9999/wms/wmmdwarehouse/list',
method: 'GET',
success: res => {
this.itemList = res.data
}
})
onLoad() {
setTimeout(() => {
this.list.pop();
}, 2000)
},
methods: {
// 选中某个单选框时，由radio时触发
radioChange(e) {
// console.log(e);
},
// 选中任一radio时，由radio-group触发
radioGroupChange(index) {
console.log(index);
},
checkboxGroupChange1(index) {
console.log("下标为:" + index);
},
// 选中某个复选框时，由checkbox时触发
checkboxChange(e) {
console.log(e);
},
// 选中任一checkbox时，由checkbox-group触发
checkboxGroupChange(e) {
console.log("全部选按钮" + e);
},
WEchange(e) {
console.log(e); //打印出来的值
// ----------时间单选-----------
this.result = e.result
},
WEDchange(e) {
console.log(e); //打印出来的值
// ----------时间多选择-----------
this.startDate = e.startDate //赋值
this.endDate = e.endDate //赋值
},
}
}
</script>
<style lang="scss">
.u-read-more {
border: 1px solid #007AFF;
margin-top: 10rpx;
}
.u-content {
font-size: 12;
}
.wed {
rich-text {
font-size: 12rpx;
color: #0066CC
}
text {
width: 100rpx;
height: 100%;
}
width: 100%;
height: 100%;
display: flex;
border: 2rpx solid #007AFF;
// justify-content: center;
.red {
uni-view,
uni-text {
border: 1px solid #007aff;
}
}
<style lang="scss" scoped>
.wrap {
padding: 40rpx;
}
</style>
</style>
\ No newline at end of file
store/index.js
View file @ 5e5b3da2
......@@ -43,7 +43,7 @@ const store = new Vuex.Store({
let nameArr = payload.name.split('.');
let saveKey = '';
let len = nameArr.length;
if(nameArr.length >= 2) {
if(len >= 2) {
let obj = state[nameArr[0]];
for(let i = 1; i < len - 1; i ++) {
obj = obj[nameArr[i]];
......
uview-ui/components/u-alert-tips/u-alert-tips.vue
View file @ 5e5b3da2
<template>
<view class="u-alert-tips" v-if="show" :class="{'u-close-alert-tips': !show}" :style="{
backgroundColor: computeBgColor,
borderColor: computeBorderColor
<view class="u-alert-tips" v-if="show" :class="[
!show ? 'u-close-alert-tips': '',
type ? 'u-alert-tips--bg--' + type + '-light' : '',
type ? 'u-alert-tips--border--' + type + '-disabled' : '',
]" :style="{
backgroundColor: borderColor,
borderColor: bgColor
}">
<view class="u-icon-wrap">
<u-icon v-if="showIcon" :name="$u.type2icon(type)" :size="description ? 40 : 32" class="u-icon" :color="computeColor"></u-icon>
<u-icon v-if="showIcon" :name="$u.type2icon(type)" :size="description ? 40 : 32" class="u-icon" :color="type"></u-icon>
</view>
<view class="u-alert-content" @tap.stop="click">
<view class="u-alert-title" :style="{fontWeight: description ? 500 : 'normal'}">
......@@ -98,22 +102,6 @@
return {
}
},
computed: {
// 计算字体颜色，如果没有自定义的，就用uview主题颜色
computeColor() {
if (this.color) return this.color;
else return this.$u.color[this.type];
},
// 计算背景颜色
computeBgColor() {
if (this.bgColor) return this.bgColor;
return this.$u.color[this.type + 'Light'];
},
computeBorderColor() {
if (this.borderColor) return this.borderColor;
return this.$u.color[this.type + 'Disabled'];
}
},
methods: {
// 点击内容
click() {
......@@ -138,6 +126,46 @@
position: relative;
transition: all 0.3s linear;
border: 1px solid #fff;
&--bg--primary-light {
background-color: $u-type-primary-light;
}
&--bg--info-light {
background-color: $u-type-info-light;
}
&--bg--success-light {
background-color: $u-type-success-light;
}
&--bg--warning-light {
background-color: $u-type-warning-light;
}
&--bg--error-light {
background-color: $u-type-error-light;
}
&--border--primary-disabled {
border-color: $u-type-primary-disabled;
}
&--border--success-disabled {
border-color: $u-type-success-disabled;
}
&--border--error-disabled {
border-color: $u-type-error-disabled;
}
&--border--warning-disabled {
border-color: $u-type-warning-disabled;
}
&--border--info-disabled {
border-color: $u-type-info-disabled;
}
}
.u-close-alert-tips {
......
uview-ui/components/u-badge/u-badge.vue
View file @ 5e5b3da2
<template>
<view v-if="show" class="u-badge-box" :class="[isDot ? 'u-badge-dot' : 'u-badge', size == 'mini' ? 'u-badge-mini' : '']" :style="[{
top: offset[0] + 'rpx',
right: offset[1] + 'rpx',
fontSize: fontSize + 'rpx',
position: absolute ? 'absolute' : 'static',
color: color,
backgroundColor: backgroundColor
}, boxStyle]">
<view v-if="show" class="u-badge" :class="[
isDot ? 'u-badge-dot' : '',
size == 'mini' ? 'u-badge-mini' : '',
type ? 'u-badge--bg--' + type : ''
]" :style="[{
top: offset[0] + 'rpx',
right: offset[1] + 'rpx',
fontSize: fontSize + 'rpx',
position: absolute ? 'absolute' : 'static',
color: color,
backgroundColor: bgColor
}, boxStyle]"
>
{{showText}}
</view>
</template>
......@@ -127,10 +132,6 @@
// 如果count的值为0，并且showZero设置为false，不显示组件
if(this.count == 0 && this.showZero == false) return false;
else return true;
},
// 获取背景颜色，如果定义了bgColor参数，就放弃type主题色
backgroundColor() {
return this.bgColor ? this.bgColor : this.$u.color[this.type];
}
}
}
......@@ -139,16 +140,33 @@
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-badge-box {
.u-badge {
display: inline-flex;
justify-content: center;
align-items: center;
}
.u-badge {
line-height: 24rpx;
padding: 4rpx 8rpx;
border-radius: 100rpx;
&--bg--primary {
background-color: $u-type-primary;
}
&--bg--error {
background-color: $u-type-error;
}
&--bg--success {
background-color: $u-type-success;
}
&--bg--info {
background-color: $u-type-info;
}
&--bg--warning {
background-color: $u-type-warning;
}
}
.u-badge-dot {
......
uview-ui/components/u-button/u-button.vue
View file @ 5e5b3da2
......@@ -4,10 +4,13 @@
class="u-btn u-line-1 u-fix-ios-appearance"
:class="[
'u-size-' + size,
plain ? 'u-' + type + '-plain' : '',
plain ? 'u-btn--' + type + '--plain' : '',
loading ? 'u-loading' : '',
shape == 'circle' ? 'u-round-circle' : '',
hairLine ? showHairLineBorder : 'u-bold-border'
hairLine ? showHairLineBorder : 'u-bold-border',
'u-btn--' + type,
disabled ? `u-btn--${type}--disabled` : '',
]"
:disabled="disabled"
:form-type="formType"
......@@ -209,39 +212,39 @@ export default {
// 按钮主题
buttonStyle() {
let style = {};
if (this.type == 'default') {
if (this.disabled) {
style.color = '#c0c4cc';
style.backgroundColor = '#ffffff';
style.borderColor = '#e4e7ed';
} else {
style.color = this.$u.color['contentColor'];
style.backgroundColor = '#ffffff';
style.borderColor = '#c0c4cc';
}
} else {
if (this.disabled) {
if (this.plain) {
style.color = this.$u.color[this.type + 'Disabled'];
style.backgroundColor = this.$u.color[this.type + 'Light'];
style.borderColor = this.$u.color[this.type + 'Disabled'];
} else {
style.color = '#ffffff';
style.backgroundColor = this.$u.color[this.type + 'Disabled'];
style.borderColor = this.$u.color[this.type + 'Disabled'];
}
} else {
if (this.plain) {
style.color = this.$u.color[this.type];
style.backgroundColor = this.$u.color[this.type + 'Light'];
style.borderColor = this.$u.color[this.type + 'Disabled'];
} else {
style.color = '#ffffff';
style.backgroundColor = this.$u.color[this.type];
style.borderColor = this.$u.color[this.type];
}
}
}
// if (this.type == 'default') {
// if (this.disabled) {
// style.color = '#c0c4cc';
// style.backgroundColor = '#ffffff';
// style.borderColor = '#e4e7ed';
// } else {
// style.color = this.$u.color['contentColor'];
// style.backgroundColor = '#ffffff';
// style.borderColor = '#c0c4cc';
// }
// } else {
// if (this.disabled) {
// if (this.plain) {
// style.color = this.$u.color[this.type + 'Disabled'];
// style.backgroundColor = this.$u.color[this.type + 'Light'];
// style.borderColor = this.$u.color[this.type + 'Disabled'];
// } else {
// style.color = '#ffffff';
// style.backgroundColor = this.$u.color[this.type + 'Disabled'];
// style.borderColor = this.$u.color[this.type + 'Disabled'];
// }
// } else {
// if (this.plain) {
// style.color = this.$u.color[this.type];
// style.backgroundColor = this.$u.color[this.type + 'Light'];
// style.borderColor = this.$u.color[this.type + 'Disabled'];
// } else {
// style.color = '#ffffff';
// style.backgroundColor = this.$u.color[this.type];
// style.borderColor = this.$u.color[this.type];
// }
// }
// }
return Object.assign(style, this.customStyle);
},
......@@ -370,6 +373,90 @@ export default {
z-index: 1;
box-sizing: border-box;
transition: all 0.15s;
&--default {
color: $u-content-color;
border-color: $u-type-warning;
background-color: #ffffff;
}
&--primary {
color: #ffffff;
border-color: $u-type-primary;
background-color: $u-type-primary;
}
&--success {
color: #ffffff;
border-color: $u-type-success;
background-color: $u-type-success;
}
&--error {
color: #ffffff;
border-color: $u-type-error;
background-color: $u-type-error;
}
&--warning {
color: #ffffff;
border-color: $u-type-warning;
background-color: $u-type-warning;
}
&--default--disabled {
color: #ffffff;
border-color: #e4e7ed;
background-color: #ffffff;
}
&--primary--disabled {
color: #ffffff!important;
border-color: $u-type-primary-disabled!important;
background-color: $u-type-primary-disabled!important;
}
&--success--disabled {
color: #ffffff!important;
border-color: $u-type-success-disabled!important;
background-color: $u-type-success-disabled!important;
}
&--error--disabled {
color: #ffffff!important;
border-color: $u-type-error-disabled!important;
background-color: $u-type-error-disabled!important;
}
&--warning--disabled {
color: #ffffff!important;
border-color: $u-type-warning-disabled!important;
background-color: $u-type-warning-disabled!important;
}
&--primary--plain {
color: $u-type-primary!important;
border-color: $u-type-primary-disabled!important;
background-color: $u-type-primary-light!important;
}
&--success--plain {
color: $u-type-success!important;
border-color: $u-type-success-disabled!important;
background-color: $u-type-success-light!important;
}
&--error--plain {
color: $u-type-error!important;
border-color: $u-type-error-disabled!important;
background-color: $u-type-error-light!important;
}
&--warning--plain {
color: $u-type-warning!important;
border-color: $u-type-warning-disabled!important;
background-color: $u-type-warning-light!important;
}
}
.u-hairline-border:after {
......
uview-ui/components/u-collapse-item/u-collapse-item.vue
View file @ 5e5b3da2
......@@ -8,7 +8,7 @@
</view>
<slot v-else name="title" />
<view class="u-icon-wrap">
<u-icon v-if="arrow" :color="arrowColor ? arrowColor : $u.color.tipsColor" :class="{ 'u-arrow-down-icon-active': isShow }"
<u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }"
class="u-arrow-down-icon" name="arrow-down"></u-icon>
</view>
</block>
......
uview-ui/components/u-collapse/u-collapse.vue
View file @ 5e5b3da2
......@@ -55,7 +55,7 @@
// 箭头的颜色
arrowColor: {
type: String,
default: ''
default: '#909399'
},
// 标题部分按压时的样式类，"none"为无效果
hoverClass: {
......
uview-ui/components/u-column-notice/u-column-notice.vue
View file @ 5e5b3da2
......@@ -5,6 +5,9 @@
background: computeBgColor,
padding: padding
}"
:class="[
type ? `u-type-${type}-light-bg` : ''
]"
>
<view class="u-icon-wrap">
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
......@@ -13,11 +16,9 @@
<swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item">
<view
class="u-news-item u-line-1"
:style="{
color: computeColor,
fontSize: fontSize + 'rpx'
}"
:style="[textStyle]"
@tap="click(index)"
:class="['u-type-' + type]"
>
{{ item }}
</view>
......@@ -136,8 +137,17 @@ export default {
// 计算字体颜色，如果没有自定义的，就用uview主题颜色
computeColor() {
if (this.color) return this.color;
else if(this.type == 'none') return this.$u.color['contentColor'];
else return this.$u.color[this.type];
// 如果是无主题，就默认使用content-color
else if(this.type == 'none') return '#606266';
else return this.type;
},
// 文字内容的样式
textStyle() {
let style = {};
if (this.color) style.color = this.color;
else if(this.type == 'none') style.color = '#606266';
style.fontSize = this.fontSize + 'rpx';
return style;
},
// 垂直或者水平滚动
vertical() {
......@@ -148,7 +158,6 @@ export default {
computeBgColor() {
if (this.bgColor) return this.bgColor;
else if(this.type == 'none') return 'transparent';
else return this.$u.color[this.type + 'Light'];
}
},
data() {
......
uview-ui/components/u-divider/u-divider.vue
View file @ 5e5b3da2
......@@ -5,12 +5,12 @@
marginBottom: marginBottom + 'rpx',
marginTop: marginTop + 'rpx'
}" @tap="click">
<view class="u-divider-line" :style="[lineStyle]"></view>
<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
<view v-if="useSlot" class="u-divider-text" :style="{
color: color,
fontSize: fontSize + 'rpx'
}"><slot /></view>
<view class="u-divider-line" :style="[lineStyle]"></view>
<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
</view>
</template>
......@@ -93,7 +93,6 @@ export default {
else style.width = this.halfWidth + 'rpx';
// borderColor优先级高于type值
if(this.borderColor) style.borderColor = this.borderColor;
else style.borderColor = this.$u.color[this.type];
return style;
}
},
......@@ -122,6 +121,26 @@ export default {
border-bottom: 1px solid $u-border-color;
transform: scale(1, 0.5);
transform-origin: center;
&--bordercolor--primary {
border-color: $u-type-primary;
}
&--bordercolor--success {
border-color: $u-type-success;
}
&--bordercolor--error {
border-color: $u-type-primary;
}
&--bordercolor--info {
border-color: $u-type-info;
}
&--bordercolor--warning {
border-color: $u-type-warning;
}
}
.u-divider-text {
......
uview-ui/components/u-icon/u-icon.vue
View file @ 5e5b3da2
......@@ -39,7 +39,7 @@ export default {
type: String,
default: ''
},
// 图标颜色
// 图标颜色，可接受主题色(组件内部使用，不对外)
color: {
type: String,
default: ''
......@@ -110,10 +110,7 @@ export default {
default() {
return {}
}
}
},
data() {
return {};
},
},
computed: {
customClass() {
......@@ -122,6 +119,8 @@ export default {
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') classes.push('u-iconfont');
else classes.push(this.customPrefix);
// 主题色，通过类配置
if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color);
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
......@@ -135,7 +134,8 @@ export default {
fontSize: this.size == 'inherit' ? 'inherit' : this.size + 'rpx',
fontWeight: this.bold ? 'bold' : 'normal'
};
if (this.color) style.color = this.color;
// 非主题色值时，才当作颜色值
if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
return style;
},
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
......@@ -166,10 +166,32 @@ export default {
.u-icon {
display: inline-flex;
align-items: center;
}
.u-icon__img {
height: auto;
will-change: transform;
&__icon {
&--primary {
color: $u-type-primary;
}
&--success {
color: $u-type-success;
}
&--error {
color: $u-type-error;
}
&--warning {
color: $u-type-warning;
}
&--info {
color: $u-type-info;
}
}
&__img {
height: auto;
will-change: transform;
}
}
</style>
uview-ui/components/u-line-progress/u-line-progress.vue
View file @ 5e5b3da2
......@@ -4,7 +4,12 @@
height: height + 'rpx',
backgroundColor: inactiveColor
}">
<view :class="{'u-striped': striped, 'u-striped-active': striped && stripedActive}" class="u-active" :style="[progressStyle]">{{showPercent ? percent + '%' : ''}}</view>
<view :class="[
type ? `u-type-${type}-bg` : '',
striped ? 'u-striped' : '',
striped && stripedActive ? 'u-striped-active' : ''
]" class="u-active" :style="[progressStyle]">{{showPercent ? percent + '%' : ''}}
</view>
</view>
</template>
......@@ -81,9 +86,7 @@
progressStyle() {
let style = {};
style.width = this.percent + '%';
if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) style.backgroundColor = this.$u.color[
this.type];
else style.backgroundColor = this.activeColor;
if(this.activeColor) style.backgroundColor = this.activeColor;
return style;
}
},
......
uview-ui/components/u-picker/u-picker.vue
View file @ 5e5b3da2
<template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-datetime-picker" @tap.stop>
<view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
<view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150"
@tap="getResult('cancel')">取消</view>
<view class="u-btn-picker u-btn-picker--primary" :style="{ color: confirmColor }" hover-class="u-opacity" :hover-stay-time="150"
@touchmove.stop="" @tap.stop="getResult('confirm')">确定</view>
<view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150" @tap="getResult('cancel')">取消</view>
<view class="u-picker__title">{{ title }}</view>
<view
class="u-btn-picker u-btn-picker--primary"
:style="{ color: moving ? cancelColor : confirmColor }"
hover-class="u-opacity"
:hover-stay-time="150"
@touchmove.stop=""
@tap.stop="getResult('confirm')"
>
确定
</view>
</view>
<view class="u-picker-body">
<picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view">
<picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
<picker-view-column v-if="params.province">
<view class="u-column-item" v-for="(item,index) in provinces" :key="index">
<view class="u-line-1">
{{item.label}}
</view>
<view class="u-column-item" v-for="(item, index) in provinces" :key="index">
<view class="u-line-1">{{ item.label }}</view>
</view>
</picker-view-column>
<picker-view-column v-if="params.city">
<view class="u-column-item" v-for="(item,index) in citys" :key="index">
<view class="u-line-1">
{{item.label}}
</view>
<view class="u-column-item" v-for="(item, index) in citys" :key="index">
<view class="u-line-1">{{ item.label }}</view>
</view>
</picker-view-column>
<picker-view-column v-if="params.area">
<view class="u-column-item" v-for="(item,index) in areas" :key="index">
<view class="u-line-1">
{{item.label}}
</view>
<view class="u-column-item" v-for="(item, index) in areas" :key="index">
<view class="u-line-1">{{ item.label }}</view>
</view>
</picker-view-column>
</picker-view>
<picker-view v-else-if="mode == 'time'" :value="valueArr" @change="change" class="u-picker-view">
<picker-view v-else-if="mode == 'time'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
<picker-view-column v-if="!reset && params.year">
<view class="u-column-item" v-for="(item,index) in years" :key="index">
{{ item }}<text class="u-text" v-if="showTimeTag">年</text>
<view class="u-column-item" v-for="(item, index) in years" :key="index">
{{ item }}
<text class="u-text" v-if="showTimeTag">年</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.month">
<view class="u-column-item" v-for="(item,index) in months" :key="index">
{{ formatNumber(item)}}<text class="u-text" v-if="showTimeTag">月</text>
<view class="u-column-item" v-for="(item, index) in months" :key="index">
{{ formatNumber(item) }}
<text class="u-text" v-if="showTimeTag">月</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.day">
<view class="u-column-item" v-for="(item,index) in days" :key="index">
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">日</text>
<view class="u-column-item" v-for="(item, index) in days" :key="index">
{{ formatNumber(item) }}
<text class="u-text" v-if="showTimeTag">日</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.hour">
<view class="u-column-item" v-for="(item,index) in hours" :key="index">
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">时</text>
<view class="u-column-item" v-for="(item, index) in hours" :key="index">
{{ formatNumber(item) }}
<text class="u-text" v-if="showTimeTag">时</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.minute">
<view class="u-column-item" v-for="(item,index) in minutes" :key="index">
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">分</text>
<view class="u-column-item" v-for="(item, index) in minutes" :key="index">
{{ formatNumber(item) }}
<text class="u-text" v-if="showTimeTag">分</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.second">
<view class="u-column-item" v-for="(item,index) in seconds" :key="index">
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">秒</text>
<view class="u-column-item" v-for="(item, index) in seconds" :key="index">
{{ formatNumber(item) }}
<text class="u-text" v-if="showTimeTag">秒</text>
</view>
</picker-view-column>
</picker-view>
<picker-view v-else-if="mode == 'selector'" :value="defaultSelector" @change="change" class="u-picker-view">
<picker-view v-else-if="mode == 'selector'" :value="defaultSelector" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
<picker-view-column>
<view class="u-column-item" v-for="(item,index) in range" :key="index">
<view class="u-line-1">
{{getItemValue(item, 'selector')}}
</view>
<view class="u-column-item" v-for="(item, index) in range" :key="index">
<view class="u-line-1">{{ getItemValue(item, 'selector') }}</view>
</view>
</picker-view-column>
</picker-view>
<picker-view v-else-if="mode == 'multiSelector'" :value="defaultSelector" @change="change" class="u-picker-view">
<picker-view-column v-for="(item,index) in range" :key="index">
<view class="u-column-item" v-for="(item1,index1) in item" :key="index1">
<view class="u-line-1">
{{getItemValue(item1, 'multiSelector')}}
</view>
<picker-view v-else-if="mode == 'multiSelector'" :value="defaultSelector" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
<picker-view-column v-for="(item, index) in range" :key="index">
<view class="u-column-item" v-for="(item1, index1) in item" :key="index1">
<view class="u-line-1">{{ getItemValue(item1, 'multiSelector') }}</view>
</view>
</picker-view-column>
</picker-view>
......@@ -88,532 +91,555 @@
</template>
<script>
import provinces from '../../libs/util/province.js';
import citys from '../../libs/util/city.js';
import areas from '../../libs/util/area.js';
import provinces from '../../libs/util/province.js';
import citys from '../../libs/util/city.js';
import areas from '../../libs/util/area.js';
/**
* picker picker弹出选择器
* @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数
* @tutorial https://www.uviewui.com/components/picker.html
* @property {Object} params 需要显示的参数，见官网说明
* @property {String} mode 模式选择，region-地区类型，time-时间类型（默认time）
* @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950）
* @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
* @property {String} cancel-color 取消按钮的颜色（默认#606266）
* @property {String} confirm-color 确认按钮的颜色（默认#2979ff）
* @property {String} default-time 默认选中的时间，mode=time时有效
* @property {String} default-region 默认选中的地区，中文形式，mode=region时有效
* @property {String} default-code 默认选中的地区，编号形式，mode=region时有效
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String Number} z-index 弹出时的z-index值（默认1075）
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
* @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
* @event {Function} confirm 点击确定按钮，返回当前选择的值
* @event {Function} cancel 点击取消按钮，返回当前选择的值
* @example <u-picker v-model="show" mode="time"></u-picker>
*/
export default {
name: "u-picker",
props: {
// picker中需要显示的参数
params: {
type: Object,
default () {
return {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false,
province: true,
city: true,
area: true
}
}
},
// 当mode=selector或者mode=multiSelector时，提供的数组
range: {
type: Array,
default() {
return []
}
},
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
defaultSelector: {
type: Array,
default() {
return [0]
}
},
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
rangeKey: {
type: String,
default: ''
},
// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
mode: {
type: String,
default: 'time'
},
// 年份开始时间
startYear: {
type: [String, Number],
default: 1950
},
// 年份结束时间
endYear: {
type: [String, Number],
default: 2050
},
// "取消"按钮的颜色
cancelColor: {
type: String,
default: '#606266'
},
// "确定"按钮的颜色
confirmColor: {
type: String,
default: '#2979ff'
},
// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
defaultTime: {
type: String,
default: ''
},
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
defaultRegion: {
type: Array,
default () {
return [];
}
},
// 时间模式时，是否显示后面的年月日中文提示
showTimeTag: {
type: Boolean,
default: true
},
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
areaCode: {
type: Array,
default () {
return [];
}
},
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否允许通过点击遮罩关闭Picker
maskCloseAble: {
type: Boolean,
default: true
},
// 通过双向绑定控制组件的弹出与收起
value: {
type: Boolean,
default: false
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
/**
* picker picker弹出选择器
* @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数
* @tutorial https://www.uviewui.com/components/picker.html
* @property {Object} params 需要显示的参数，见官网说明
* @property {String} mode 模式选择，region-地区类型，time-时间类型（默认time）
* @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950）
* @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
* @property {String} cancel-color 取消按钮的颜色（默认#606266）
* @property {String} confirm-color 确认按钮的颜色（默认#2979ff）
* @property {String} default-time 默认选中的时间，mode=time时有效
* @property {String} default-region 默认选中的地区，中文形式，mode=region时有效
* @property {String} default-code 默认选中的地区，编号形式，mode=region时有效
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String Number} z-index 弹出时的z-index值（默认1075）
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
* @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
* @event {Function} confirm 点击确定按钮，返回当前选择的值
* @event {Function} cancel 点击取消按钮，返回当前选择的值
* @example <u-picker v-model="show" mode="time"></u-picker>
*/
export default {
name: 'u-picker',
props: {
// picker中需要显示的参数
params: {
type: Object,
default() {
return {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false,
province: true,
city: true,
area: true
};
}
},
data() {
return {
years: [],
months: [],
days: [],
hours: [],
minutes: [],
seconds: [],
year: 0,
month: 0,
day: 0,
hour: 0,
minute: 0,
second: 0,
startDate: "",
endDate: "",
valueArr: [],
reset: false,
provinces: provinces,
citys: citys[0],
areas: areas[0][0],
province: 0,
city: 0,
area: 0,
// 当mode=selector或者mode=multiSelector时，提供的数组
range: {
type: Array,
default() {
return [];
}
},
mounted() {
this.init();
},
computed: {
propsChange() {
// 引用这几个变量，是为了监听其变化
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}`;
},
regionChange() {
// 引用这几个变量，是为了监听其变化
return `${this.province}-${this.city}`;
},
yearAndMonth() {
return `${this.year}-${this.month}`;
},
uZIndex() {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
defaultSelector: {
type: Array,
default() {
return [0];
}
},
watch: {
propsChange() {
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
rangeKey: {
type: String,
default: ''
},
// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
mode: {
type: String,
default: 'time'
},
// 年份开始时间
startYear: {
type: [String, Number],
default: 1950
},
// 年份结束时间
endYear: {
type: [String, Number],
default: 2050
},
// "取消"按钮的颜色
cancelColor: {
type: String,
default: '#606266'
},
// "确定"按钮的颜色
confirmColor: {
type: String,
default: '#2979ff'
},
// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
defaultTime: {
type: String,
default: ''
},
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
defaultRegion: {
type: Array,
default() {
return [];
}
},
// 时间模式时，是否显示后面的年月日中文提示
showTimeTag: {
type: Boolean,
default: true
},
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
areaCode: {
type: Array,
default() {
return [];
}
},
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否允许通过点击遮罩关闭Picker
maskCloseAble: {
type: Boolean,
default: true
},
// 通过双向绑定控制组件的弹出与收起
value: {
type: Boolean,
default: false
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
},
// 顶部标题
title: {
type: String,
default: ''
}
},
data() {
return {
years: [],
months: [],
days: [],
hours: [],
minutes: [],
seconds: [],
year: 0,
month: 0,
day: 0,
hour: 0,
minute: 0,
second: 0,
startDate: '',
endDate: '',
valueArr: [],
reset: false,
provinces: provinces,
citys: citys[0],
areas: areas[0][0],
province: 0,
city: 0,
area: 0,
moving: false // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
};
},
mounted() {
this.init();
},
computed: {
propsChange() {
// 引用这几个变量，是为了监听其变化
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}`;
},
regionChange() {
// 引用这几个变量，是为了监听其变化
return `${this.province}-${this.city}`;
},
yearAndMonth() {
return `${this.year}-${this.month}`;
},
uZIndex() {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
}
},
watch: {
propsChange() {
this.reset = true;
setTimeout(() => this.init(), 10);
},
// 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
regionChange(val) {
this.citys = citys[this.province];
this.areas = areas[this.province][this.city];
},
// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样
// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
yearAndMonth(val) {
if (this.params.year) this.setDays();
},
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
value(n) {
if (n) {
this.reset = true;
setTimeout(() => this.init(), 10);
},
// 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
regionChange(val) {
this.citys = citys[this.province];
this.areas = areas[this.province][this.city];
},
// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样
// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
yearAndMonth(val) {
if (this.params.year) this.setDays();
},
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
value(n) {
if (n) {
this.reset = true;
setTimeout(() => this.init(), 10);
}
}
},
methods: {
// 标识滑动开始，只有微信小程序才有这样的事件
pickstart() {
// #ifdef MP-WEIXIN
this.moving = true;
// #endif
},
// 标识滑动结束
pickend() {
// #ifdef MP-WEIXIN
this.moving = false;
// #endif
},
// 对单列和多列形式的判断是否有传入变量的情况
getItemValue(item, mode) {
// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致
// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
if (this.mode == mode) {
return typeof item == 'object' ? item[this.rangeKey] : item;
}
},
// 小于10前面补0，用于月份，日期，时分秒等
formatNumber(num) {
return +num < 10 ? '0' + num : String(num);
},
// 生成递进的数组
generateArray: function(start, end) {
end = end > start ? end : start;
// 生成数组，获取其中的索引，并剪出来
return [...Array(end + 1).keys()].slice(start);
},
getIndex: function(arr, val) {
let index = arr.indexOf(val);
// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0，导致条件不成立
return ~index ? index : 0;
},
//日期时间处理
initTimeValue() {
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
let fdate = this.defaultTime.replace(/\-/g, '/');
fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
let time = null;
if (fdate) time = new Date(fdate);
else time = new Date();
// 获取年日月时分秒
this.year = time.getFullYear();
this.month = Number(time.getMonth()) + 1;
this.day = time.getDate();
this.hour = time.getHours();
this.minute = time.getMinutes();
this.second = time.getSeconds();
},
init() {
this.valueArr = [];
this.reset = false;
if (this.mode == 'time') {
this.initTimeValue();
if (this.params.year) {
this.valueArr.push(0);
this.setYears();
}
if (this.params.month) {
this.valueArr.push(0);
this.setMonths();
}
if (this.params.day) {
this.valueArr.push(0);
this.setDays();
}
if (this.params.hour) {
this.valueArr.push(0);
this.setHours();
}
if (this.params.minute) {
this.valueArr.push(0);
this.setMinutes();
}
if (this.params.second) {
this.valueArr.push(0);
this.setSeconds();
}
} else if (this.mode == 'region') {
if (this.params.province) {
this.valueArr.push(0);
this.setProvinces();
}
if (this.params.city) {
this.valueArr.push(0);
this.setCitys();
}
if (this.params.area) {
this.valueArr.push(0);
this.setAreas();
}
} else if (this.mode == 'selector') {
this.valueArr = this.defaultSelector;
} else if (this.mode == 'multiSelector') {
this.valueArr = this.defaultSelector;
this.multiSelectorValue = this.defaultSelector;
}
this.$forceUpdate();
},
// 设置picker的某一列值
setYears() {
// 获取年份集合
this.years = this.generateArray(this.startYear, this.endYear);
// 设置this.valueArr某一项的值，是为了让picker预选中某一个值
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
},
methods: {
// 对单列和多列形式的判断是否有传入变量的情况
getItemValue(item, mode) {
// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致
// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
if(this.mode == mode) {
return typeof item == 'object' ? item[this.rangeKey] : item
setMonths() {
this.months = this.generateArray(1, 12);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
},
setDays() {
let totalDays = new Date(this.year, this.month, 0).getDate();
this.days = this.generateArray(1, totalDays);
let index = 0;
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
if (this.params.year && this.params.month) index = 2;
else if (this.params.month) index = 1;
else if (this.params.year) index = 1;
else index = 0;
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
},
setHours() {
this.hours = this.generateArray(0, 23);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
},
setMinutes() {
this.minutes = this.generateArray(0, 59);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
},
setSeconds() {
this.seconds = this.generateArray(0, 59);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
},
setProvinces() {
// 判断是否需要province参数
if (!this.params.province) return;
let tmp = '';
let useCode = false;
// 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
if (this.areaCode.length) {
tmp = this.areaCode[0];
useCode = true;
} else if (this.defaultRegion.length) tmp = this.defaultRegion[0];
else tmp = 0;
// 历遍省份数组匹配
provinces.map((v, k) => {
if (useCode ? v.value == tmp : v.label == tmp) {
tmp = k;
}
},
// 小于10前面补0，用于月份，日期，时分秒等
formatNumber(num) {
return +num < 10 ? '0' + num : String(num);
},
// 生成递进的数组
generateArray: function(start, end) {
end = end > start ? end : start;
// 生成数组，获取其中的索引，并剪出来
return [...Array(end + 1).keys()].slice(start);
},
getIndex: function(arr, val) {
let index = arr.indexOf(val);
// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0，导致条件不成立
return ~index ? index : 0;
},
//日期时间处理
initTimeValue() {
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
let fdate = this.defaultTime.replace(/\-/g, '/');
fdate = fdate && fdate.indexOf("/") == -1 ? `2020/01/01 ${fdate}` : fdate
let time = null;
if (fdate)
time = new Date(fdate);
else
time = new Date();
// 获取年日月时分秒
this.year = time.getFullYear()
this.month = Number(time.getMonth()) + 1;
this.day = time.getDate();
this.hour = time.getHours();
this.minute = time.getMinutes();
this.second = time.getSeconds();
},
init() {
this.valueArr = [];
this.reset = false;
if (this.mode == 'time') {
this.initTimeValue();
if (this.params.year) {
this.valueArr.push(0);
this.setYears();
}
if (this.params.month) {
this.valueArr.push(0);
this.setMonths();
}
if (this.params.day) {
this.valueArr.push(0);
this.setDays();
}
if (this.params.hour) {
this.valueArr.push(0);
this.setHours();
}
if (this.params.minute) {
this.valueArr.push(0);
this.setMinutes();
}
if (this.params.second) {
this.valueArr.push(0);
this.setSeconds();
}
} else if(this.mode == 'region') {
if (this.params.province) {
this.valueArr.push(0);
this.setProvinces();
}
if (this.params.city) {
this.valueArr.push(0);
this.setCitys();
}
if (this.params.area) {
this.valueArr.push(0);
this.setAreas();
}
} else if(this.mode == 'selector') {
this.valueArr = this.defaultSelector;
} else if(this.mode == 'multiSelector') {
this.valueArr = this.defaultSelector;
this.multiSelectorValue = this.defaultSelector;
});
this.province = tmp;
this.provinces = provinces;
// 设置默认省份的值
this.valueArr.splice(0, 1, this.province);
},
setCitys() {
if (!this.params.city) return;
let tmp = '';
let useCode = false;
if (this.areaCode.length) {
tmp = this.areaCode[1];
useCode = true;
} else if (this.defaultRegion.length) tmp = this.defaultRegion[1];
else tmp = 0;
citys[this.province].map((v, k) => {
if (useCode ? v.value == tmp : v.label == tmp) {
tmp = k;
}
this.$forceUpdate();
},
// 设置picker的某一列值
setYears() {
// 获取年份集合
this.years = this.generateArray(this.startYear, this.endYear);
// 设置this.valueArr某一项的值，是为了让picker预选中某一个值
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
},
setMonths() {
this.months = this.generateArray(1, 12);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
},
setDays() {
let totalDays = new Date(this.year, this.month, 0).getDate();
this.days = this.generateArray(1, totalDays);
let index = 0;
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
if (this.params.year && this.params.month) index = 2;
else if (this.params.month) index = 1;
else if (this.params.year) index = 1;
else index = 0;
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
},
setHours() {
this.hours = this.generateArray(0, 23);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
},
setMinutes() {
this.minutes = this.generateArray(0, 59);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
},
setSeconds() {
this.seconds = this.generateArray(0, 59);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
},
setProvinces() {
// 判断是否需要province参数
if (!this.params.province) return;
let tmp = '';
let useCode = false;
// 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
if (this.areaCode.length) {
tmp = this.areaCode[0];
useCode = true;
} else if (this.defaultRegion.length) tmp = this.defaultRegion[0];
else tmp = 0;
// 历遍省份数组匹配
provinces.map((v, k) => {
if (useCode ? v.value == tmp : v.label == tmp) {
tmp = k;
}
})
this.province = tmp;
this.provinces = provinces;
// 设置默认省份的值
this.valueArr.splice(0, 1, this.province);
},
setCitys() {
if (!this.params.city) return;
let tmp = '';
let useCode = false;
if (this.areaCode.length) {
tmp = this.areaCode[1];
useCode = true;
} else if (this.defaultRegion.length) tmp = this.defaultRegion[1];
else tmp = 0;
citys[this.province].map((v, k) => {
if (useCode ? v.value == tmp : v.label == tmp) {
tmp = k;
}
})
this.city = tmp;
this.citys = citys[this.province];
this.valueArr.splice(1, 1, this.city);
},
setAreas() {
if (!this.params.area) return;
let tmp = '';
let useCode = false;
if (this.areaCode.length) {
tmp = this.areaCode[2];
useCode = true;
} else if (this.defaultRegion.length) tmp = this.defaultRegion[2];
else tmp = 0;
areas[this.province][this.city].map((v, k) => {
if (useCode ? v.value == tmp : v.label == tmp) {
tmp = k;
}
})
this.area = tmp;
this.areas = areas[this.province][this.city];
this.valueArr.splice(2, 1, this.area);
},
close() {
this.$emit('input', false);
},
// 用户更改picker的列选项
change(e) {
this.valueArr = e.detail.value;
let i = 0;
if (this.mode == 'time') {
// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度
// 进入if规则，i会加1，保证了能获取准确的值
if (this.params.year) this.year = this.years[this.valueArr[i++]];
if (this.params.month) this.month = this.months[this.valueArr[i++]];
if (this.params.day) this.day = this.days[this.valueArr[i++]];
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
} else if(this.mode == 'region') {
if (this.params.province) this.province = this.valueArr[i++];
if (this.params.city) this.city = this.valueArr[i++];
if (this.params.area) this.area = this.valueArr[i++];
} else if(this.mode == 'multiSelector') {
let index = null;
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
this.defaultSelector.map((val, idx) => {
if(val != e.detail.value[idx]) index = idx;
})
// 为了让用户对多列变化时，对动态设置其他列的变更
if(index != null) {
this.$emit('columnchange', {
column: index,
index: e.detail.value[index]
})
}
}
},
// 用户点击确定按钮
getResult(event = null) {
let result = {};
// 只返回用户在this.params中配置了为true的字段
if (this.mode == 'time') {
if (this.params.year) result.year = this.formatNumber(this.year || 0);
if (this.params.month) result.month = this.formatNumber(this.month || 0);
if (this.params.day) result.day = this.formatNumber(this.day || 0);
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
if (this.params.second) result.second = this.formatNumber(this.second || 0);
} else if (this.mode == 'region') {
if (this.params.province) result.province = provinces[this.province];
if (this.params.city) result.city = citys[this.province][this.city];
if (this.params.area) result.area = areas[this.province][this.city][this.area];
} else if (this.mode == 'selector') {
result = this.valueArr;
} else if (this.mode == 'multiSelector') {
result = this.valueArr;
});
this.city = tmp;
this.citys = citys[this.province];
this.valueArr.splice(1, 1, this.city);
},
setAreas() {
if (!this.params.area) return;
let tmp = '';
let useCode = false;
if (this.areaCode.length) {
tmp = this.areaCode[2];
useCode = true;
} else if (this.defaultRegion.length) tmp = this.defaultRegion[2];
else tmp = 0;
areas[this.province][this.city].map((v, k) => {
if (useCode ? v.value == tmp : v.label == tmp) {
tmp = k;
}
if (event) this.$emit(event, result);
this.close();
});
this.area = tmp;
this.areas = areas[this.province][this.city];
this.valueArr.splice(2, 1, this.area);
},
close() {
this.$emit('input', false);
},
// 用户更改picker的列选项
change(e) {
this.valueArr = e.detail.value;
let i = 0;
if (this.mode == 'time') {
// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度
// 进入if规则，i会加1，保证了能获取准确的值
if (this.params.year) this.year = this.years[this.valueArr[i++]];
if (this.params.month) this.month = this.months[this.valueArr[i++]];
if (this.params.day) this.day = this.days[this.valueArr[i++]];
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
} else if (this.mode == 'region') {
if (this.params.province) this.province = this.valueArr[i++];
if (this.params.city) this.city = this.valueArr[i++];
if (this.params.area) this.area = this.valueArr[i++];
} else if (this.mode == 'multiSelector') {
let index = null;
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
this.defaultSelector.map((val, idx) => {
if (val != e.detail.value[idx]) index = idx;
});
// 为了让用户对多列变化时，对动态设置其他列的变更
if (index != null) {
this.$emit('columnchange', {
column: index,
index: e.detail.value[index]
});
}
}
},
// 用户点击确定按钮
getResult(event = null) {
// #ifdef MP-WEIXIN
if (this.moving) return;
// #endif
let result = {};
// 只返回用户在this.params中配置了为true的字段
if (this.mode == 'time') {
if (this.params.year) result.year = this.formatNumber(this.year || 0);
if (this.params.month) result.month = this.formatNumber(this.month || 0);
if (this.params.day) result.day = this.formatNumber(this.day || 0);
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
if (this.params.second) result.second = this.formatNumber(this.second || 0);
} else if (this.mode == 'region') {
if (this.params.province) result.province = provinces[this.province];
if (this.params.city) result.city = citys[this.province][this.city];
if (this.params.area) result.area = areas[this.province][this.city][this.area];
} else if (this.mode == 'selector') {
result = this.valueArr;
} else if (this.mode == 'multiSelector') {
result = this.valueArr;
}
if (event) this.$emit(event, result);
this.close();
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-datetime-picker {
position: relative;
z-index: 999;
}
@import '../../libs/css/style.components.scss';
.u-picker-view {
height: 100%;
box-sizing: border-box;
}
.u-datetime-picker {
position: relative;
z-index: 999;
}
.u-picker-header {
width: 100%;
height: 90rpx;
padding: 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
font-size: 32rpx;
background: #fff;
position: relative;
}
.u-picker-view {
height: 100%;
box-sizing: border-box;
}
.u-picker-header::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 0;
}
.u-picker-header {
width: 100%;
height: 90rpx;
padding: 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
font-size: 30rpx;
background: #fff;
position: relative;
}
.u-picker-body {
width: 100%;
height: 500rpx;
overflow: hidden;
background-color: #fff;
}
.u-picker-header::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 0;
}
.u-column-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: $u-main-color;
padding: 0 8rpx;
}
.u-picker__title {
color: $u-content-color;
}
.u-text {
font-size: 24rpx;
padding-left: 8rpx;
}
.u-picker-body {
width: 100%;
height: 500rpx;
overflow: hidden;
background-color: #fff;
}
.u-btn-picker {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-column-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: $u-main-color;
padding: 0 8rpx;
}
.u-opacity {
opacity: 0.5;
}
.u-btn-picker--primary {
color: $u-type-primary;
}
.u-btn-picker--tips {
color: $u-tips-color;
}
.u-text {
font-size: 24rpx;
padding-left: 8rpx;
}
.u-btn-picker {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-opacity {
opacity: 0.5;
}
.u-btn-picker--primary {
color: $u-type-primary;
}
.u-btn-picker--tips {
color: $u-tips-color;
}
</style>
uview-ui/components/u-row-notice/u-row-notice.vue
View file @ 5e5b3da2
......@@ -6,6 +6,9 @@
background: computeBgColor,
padding: padding
}"
:class="[
type ? `u-type-${type}-light-bg` : ''
]"
>
<view class="u-direction-row">
<view class="u-icon-wrap">
......@@ -17,13 +20,11 @@
id="u-notice-content"
:style="{
animationDuration: animationDuration,
color: computeColor,
animationPlayState: animationPlayState,
}"
>
<text class="u-notice-text" @tap="click" :style="{
fontSize: fontSize + 'rpx',
}">{{showText}}</text>
<text class="u-notice-text" @tap="click" :style="[textStyle]"
:class="['u-type-' + type]">{{showText}}</text>
</view>
</view>
<view class="u-icon-wrap">
......@@ -141,14 +142,22 @@ export default {
// 计算字体颜色，如果没有自定义的，就用uview主题颜色
computeColor() {
if (this.color) return this.color;
else if(this.type == 'none') return this.$u.color['contentColor'];
else return this.$u.color[this.type];
// 如果是无主题，就默认使用content-color
else if(this.type == 'none') return '#606266';
else return this.type;
},
// 文字内容的样式
textStyle() {
let style = {};
if (this.color) style.color = this.color;
else if(this.type == 'none') style.color = '#606266';
style.fontSize = this.fontSize + 'rpx';
return style;
},
// 计算背景颜色
computeBgColor() {
if (this.bgColor) return this.bgColor;
else if(this.type == 'none') return 'transparent';
else return this.$u.color[this.type + 'Light'];
}
},
mounted() {
......
uview-ui/components/u-select/u-select.vue
View file @ 5e5b3da2
......@@ -21,9 +21,12 @@
>
取消
</view>
<view class="u-select__header__title">
{{title}}
</view>
<view
class="u-select__header__confirm u-select__header__btn"
:style="{ color: confirmColor }"
:style="{ color: moving ? cancelColor : confirmColor }"
hover-class="u-hover-class"
:hover-stay-time="150"
@touchmove.stop=""
......@@ -33,7 +36,7 @@
</view>
</view>
<view class="u-select__body">
<picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector">
<picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector" @pickstart="pickstart" @pickend="pickend">
<picker-view-column v-for="(item, index) in columnData" :key="index">
<view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="index1">
<view class="u-line-1">{{ item1[labelName] }}</view>
......@@ -116,6 +119,11 @@ export default {
childName: {
type: String,
default: 'children'
},
// 顶部标题
title: {
type: String,
default: ''
}
},
data() {
......@@ -130,6 +138,8 @@ export default {
lastSelectIndex: [],
// 列数
columnNum: 0,
// 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
moving: false
};
},
watch: {
......@@ -148,6 +158,18 @@ export default {
},
},
methods: {
// 标识滑动开始，只有微信小程序才有这样的事件
pickstart() {
// #ifdef MP-WEIXIN
this.moving = true;
// #endif
},
// 标识滑动结束
pickend() {
// #ifdef MP-WEIXIN
this.moving = false;
// #endif
},
init() {
this.setColumnNum();
this.setDefaultSelector();
......@@ -281,6 +303,9 @@ export default {
},
// 点击确定或者取消
getResult(event = null) {
// #ifdef MP-WEIXIN
if (this.moving) return;
// #endif
if (event) this.$emit(event, this.selectValue);
this.close();
},
......@@ -295,6 +320,7 @@ export default {
@import "../../libs/css/style.components.scss";
.u-select {
&__action {
position: relative;
line-height: $u-form-item-height;
......@@ -314,6 +340,12 @@ export default {
}
}
&__hader {
&__title {
color: $u-content-color;
}
}
&--border {
border-radius: 6rpx;
border-radius: 4px;
......
uview-ui/components/u-steps/u-steps.vue
View file @ 5e5b3da2
......@@ -3,11 +3,11 @@
<view class="u-steps">
<view class="u-steps-item" v-for="(item,index) in list" :key="index">
<view class="u-steps-item-num" v-if="mode == 'number' && current < index">{{index+1}}</view>
<view class="u-steps-item-dot" v-if="mode == 'dot'" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor}"></view>
<u-icon size="22" class="u-steps-item-checked" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor}"
v-if="mode == 'number' && current >= index" name="checkmark"></u-icon>
<text :style="{color: index <= current ? innerActiveColor : unActiveColor}">{{item.name}}</text>
<view class="u-steps-item-line" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor, top: mode == 'dot' ? '24rpx' : '36rpx'}">
<view class="u-steps-item-dot" v-if="mode == 'dot'" :style="{backgroundColor: index <= current ? activeColor : unActiveColor}"></view>
<u-icon size="22" class="u-steps-item-checked" :style="{backgroundColor: index <= current ? activeColor : unActiveColor}"
v-if="mode == 'number' && current >= index" :name="icon"></u-icon>
<text :style="{color: index <= current ? activeColor : unActiveColor}">{{item.name}}</text>
<view class="u-steps-item-line" :style="{backgroundColor: index <= current ? activeColor : unActiveColor, top: mode == 'dot' ? '24rpx' : '36rpx'}">
</view>
</view>
</view>
......@@ -55,12 +55,17 @@
// 激活步骤的颜色
activeColor: {
type: String,
default: ''
default: '#2979ff'
},
// 未激活的颜色
unActiveColor: {
type: String,
default: '#606266'
},
// 自定义图标
icon: {
type: String,
default: 'checkmark'
}
},
data() {
......@@ -68,13 +73,6 @@
}
},
computed: {
innerActiveColor() {
if (this.activeColor) return this.activeColor;
else if (this.type) return this.$u.color[this.type];
else return "#2979ff";
},
}
}
</script>
......
uview-ui/components/u-tag/u-tag.vue
View file @ 5e5b3da2
......@@ -8,7 +8,8 @@
class="u-tag" :style="[customStyle]" @tap="clickTag">
{{text}}
<view class="u-icon-wrap" @tap.stop>
<u-icon @click="close" size="22" v-if="closeable" name="close" class="u-close-icon" :style="[iconStyle]"></u-icon>
<u-icon @click="close" size="22" v-if="closeable" :color="closeIconColor"
name="close" class="u-close-icon" :style="[iconStyle]"></u-icon>
</view>
</view>
</template>
......@@ -124,10 +125,21 @@
let style = {};
if(this.size == 'mini') style.fontSize = '20rpx';
else style.fontSize = '22rpx';
if(this.mode == 'plain' || this.mode == 'light') style.color = this.$u.color[this.type];
if(this.mode == 'plain' || this.mode == 'light') style.color = this.type;
else if(this.mode == 'dark') style.color = "#ffffff";
if(this.closeColor) style.color = this.closeColor;
return style;
},
// 关闭图标的颜色
closeIconColor() {
// 如果定义了关闭图标的颜色，就用此值，否则用字体颜色的值
// 如果上面的二者都没有，如果是dark深色模式，图标就为白色
// 最后如果上面的三者都不合适，就返回type值给图标获取颜色
let color = '';
if(this.closeColor) return this.closeColor;
else if(this.color) return this.color;
else if(this.mode == 'dark') return '#ffffff';
else return this.type;
}
},
methods: {
......
uview-ui/components/u-toast/u-toast.vue
View file @ 5e5b3da2
......@@ -3,7 +3,7 @@
zIndex: uZIndex
}">
<view class="u-icon-wrap">
<u-icon v-if="config.icon" class="u-icon" :name="iconName" :size="30" :color="$u.color[config.type]"></u-icon>
<u-icon v-if="config.icon" class="u-icon" :name="iconName" :size="30" :color="config.type"></u-icon>
</view>
<text class="u-text">{{config.title}}</text>
</view>
......
uview-ui/components/u-upload/u-upload.vue
View file @ 5e5b3da2
<template>
<view class="u-upload" v-if="!disabled">
<view v-if="showUploadList" class="u-list-item u-preview-wrap" v-for="(item, index) in lists" :key="index" :style="{
width: width + 'rpx',
height: width + 'rpx'
}">
<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
background: delBgColor
}">
<view
v-if="showUploadList"
class="u-list-item u-preview-wrap"
v-for="(item, index) in lists"
:key="index"
:style="{
width: width + 'rpx',
height: width + 'rpx'
}"
>
<view
v-if="deletable"
class="u-delete-icon"
@tap.stop="deleteItem(index)"
:style="{
background: delBgColor
}"
>
<u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
</view>
<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress" :percent="item.progress"></u-line-progress>
<u-line-progress
v-if="showProgress && item.progress > 0 && !item.error"
:show-percent="false"
height="16"
class="u-progress"
:percent="item.progress"
></u-line-progress>
<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage" :src=" item.url || item.path "
:mode="imageMode"></image>
<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage" :src="item.url || item.path" :mode="imageMode"></image>
</view>
<slot name="file" :file="lists"></slot>
<view style="display: inline-block;" @tap="selectFile" v-if="maxCount > lists.length">
<slot name="addBtn"></slot>
<view v-if="!customBtn" class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150" :style="{
width: width + 'rpx',
height: width + 'rpx'
}">
<view
v-if="!customBtn"
class="u-list-item u-add-wrap"
hover-class="u-add-wrap__hover"
hover-stay-time="150"
:style="{
width: width + 'rpx',
height: width + 'rpx'
}"
>
<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
<view class="u-add-tips">{{uploadText}}</view>
<view class="u-add-tips">{{ uploadText }}</view>
</view>
</view>
</view>
</template>
<script>
/**
* upload 图片上传
* @description 该组件用于上传图片场景
* @tutorial https://www.uviewui.com/components/upload.html
* @property {String} action 服务器上传地址
* @property {String Number} max-count 最大选择图片的数量（默认99）
* @property {Boolean} custom-btn 如果需要自定义选择图片的按钮，设置为true（默认false）
* @property {Boolean} show-progress 是否显示进度条（默认true）
* @property {Boolean} disabled 是否启用(显示/移仓)组件（默认false）
* @property {String} image-mode 预览图片等显示模式，可选值为uni的image的mode属性值（默认aspectFill）
* @property {String} del-icon 右上角删除图标名称，只能为uView内置图标
* @property {String} del-bg-color 右上角关闭按钮的背景颜色
* @property {String} del-color 右上角关闭按钮图标的颜色
* @property {Object} header 上传携带的头信息，对象形式
* @property {Object} form-data 上传额外携带的参数
* @property {String} name 上传文件的字段名，供后端获取使用（默认file）
* @property {Array<String>} size-type original 原图，compressed 压缩图，默认二者都有（默认['original', 'compressed']）
* @property {Array<String>} source-type 选择图片的来源，album-从相册选图，camera-使用相机，默认二者都有（默认['album', 'camera']）
* @property {Boolean} preview-full-image 是否可以通过uni.previewImage预览已选择的图片（默认true）
* @property {Boolean} multiple 是否开启图片多选，部分安卓机型不支持（默认true）
* @property {Boolean} deletable 是否显示删除图片的按钮（默认true）
* @property {String Number} max-size 选择单个文件的最大大小，单位B(byte)，默认不限制（默认Number.MAX_VALUE）
* @property {Array<Object>} file-list 默认显示的图片列表，数组元素为对象，必须提供url属性
* @property {Boolean} upload-text 选择图片按钮的提示文字（默认“选择图片”）
* @property {Boolean} auto-upload 选择完图片是否自动上传，见上方说明（默认true）
* @property {Boolean} show-tips 特殊情况下是否自动提示toast，见上方说明（默认true）
* @property {Boolean} show-upload-list 是否显示组件内部的图片预览（默认true）
* @event {Function} on-oversize 图片大小超出最大允许大小
* @event {Function} on-preview 全屏预览图片时触发
* @event {Function} on-remove 移除图片时触发
* @event {Function} on-success 图片上传成功时触发
* @event {Function} on-change 图片上传后，无论成功或者失败都会触发
* @event {Function} on-error 图片上传失败时触发
* @event {Function} on-progress 图片上传过程中的进度变化过程触发
* @event {Function} on-uploaded 所有图片上传完毕触发
* @event {Function} on-choose-complete 每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表
* @example <u-upload :action="action" :file-list="fileList" ></u-upload>
*/
export default {
name: 'u-upload',
props: {
//是否显示组件自带的图片预览功能
showUploadList: {
type: Boolean,
default: true
},
// 后端地址
action: {
type: String,
default: ''
},
// 最大上传数量
maxCount: {
type: [String, Number],
default: 52
},
// 是否显示进度条
showProgress: {
type: Boolean,
default: true
},
// 是否启用
disabled: {
type: Boolean,
default: false
},
// 预览上传的图片时的裁剪模式，和image组件mode属性一致
imageMode: {
type: String,
default: 'aspectFill'
},
// 头部信息
header: {
type: Object,
default () {
return {}
}
},
// 额外携带的参数
formData: {
type: Object,
default () {
return {}
}
},
// 上传的文件字段名
name: {
type: String,
default: 'file'
},
// 所选的图片的尺寸, 可选值为original compressed
sizeType: {
type: Array,
default () {
return ['original', 'compressed']
}
},
sourceType: {
type: Array,
default () {
return ['album', 'camera']
}
},
// 是否在点击预览图后展示全屏图片预览
previewFullImage: {
type: Boolean,
default: true
},
// 是否开启图片多选，部分安卓机型不支持
multiple: {
type: Boolean,
default: true
},
// 是否展示删除按钮
deletable: {
type: Boolean,
default: true
},
// 文件大小限制，单位为byte
maxSize: {
type: [String, Number],
default: Number.MAX_VALUE
},
// 显示已上传的文件列表
fileList: {
type: Array,
default () {
return []
}
},
// 上传区域的提示文字
uploadText: {
type: String,
default: '选择图片'
},
// 是否自动上传
autoUpload: {
type: Boolean,
default: true
},
// 是否显示toast消息提示
showTips: {
type: Boolean,
default: true
},
// 是否通过slot自定义传入选择图标的按钮
customBtn: {
type: Boolean,
default: false
},
// 内部预览图片区域和选择图片按钮的区域宽度，高等于宽
width: {
type: [String, Number],
default: 200
},
// 右上角关闭按钮的背景颜色
delBgColor: {
type: String,
default: '#fa3534'
},
// 右上角关闭按钮的叉号图标的颜色
delColor: {
type: String,
default: '#ffffff'
},
// 右上角删除图标名称，只能为uView内置图标
delIcon: {
type: String,
default: 'close'
/**
* upload 图片上传
* @description 该组件用于上传图片场景
* @tutorial https://www.uviewui.com/components/upload.html
* @property {String} action 服务器上传地址
* @property {String Number} max-count 最大选择图片的数量（默认99）
* @property {Boolean} custom-btn 如果需要自定义选择图片的按钮，设置为true（默认false）
* @property {Boolean} show-progress 是否显示进度条（默认true）
* @property {Boolean} disabled 是否启用(显示/移仓)组件（默认false）
* @property {String} image-mode 预览图片等显示模式，可选值为uni的image的mode属性值（默认aspectFill）
* @property {String} del-icon 右上角删除图标名称，只能为uView内置图标
* @property {String} del-bg-color 右上角关闭按钮的背景颜色
* @property {String} del-color 右上角关闭按钮图标的颜色
* @property {Object} header 上传携带的头信息，对象形式
* @property {Object} form-data 上传额外携带的参数
* @property {String} name 上传文件的字段名，供后端获取使用（默认file）
* @property {Array<String>} size-type original 原图，compressed 压缩图，默认二者都有（默认['original', 'compressed']）
* @property {Array<String>} source-type 选择图片的来源，album-从相册选图，camera-使用相机，默认二者都有（默认['album', 'camera']）
* @property {Boolean} preview-full-image 是否可以通过uni.previewImage预览已选择的图片（默认true）
* @property {Boolean} multiple 是否开启图片多选，部分安卓机型不支持（默认true）
* @property {Boolean} deletable 是否显示删除图片的按钮（默认true）
* @property {String Number} max-size 选择单个文件的最大大小，单位B(byte)，默认不限制（默认Number.MAX_VALUE）
* @property {Array<Object>} file-list 默认显示的图片列表，数组元素为对象，必须提供url属性
* @property {Boolean} upload-text 选择图片按钮的提示文字（默认“选择图片”）
* @property {Boolean} auto-upload 选择完图片是否自动上传，见上方说明（默认true）
* @property {Boolean} show-tips 特殊情况下是否自动提示toast，见上方说明（默认true）
* @property {Boolean} show-upload-list 是否显示组件内部的图片预览（默认true）
* @event {Function} on-oversize 图片大小超出最大允许大小
* @event {Function} on-preview 全屏预览图片时触发
* @event {Function} on-remove 移除图片时触发
* @event {Function} on-success 图片上传成功时触发
* @event {Function} on-change 图片上传后，无论成功或者失败都会触发
* @event {Function} on-error 图片上传失败时触发
* @event {Function} on-progress 图片上传过程中的进度变化过程触发
* @event {Function} on-uploaded 所有图片上传完毕触发
* @event {Function} on-choose-complete 每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表
* @example <u-upload :action="action" :file-list="fileList" ></u-upload>
*/
export default {
name: 'u-upload',
props: {
//是否显示组件自带的图片预览功能
showUploadList: {
type: Boolean,
default: true
},
// 后端地址
action: {
type: String,
default: ''
},
// 最大上传数量
maxCount: {
type: [String, Number],
default: 52
},
// 是否显示进度条
showProgress: {
type: Boolean,
default: true
},
// 是否启用
disabled: {
type: Boolean,
default: false
},
// 预览上传的图片时的裁剪模式，和image组件mode属性一致
imageMode: {
type: String,
default: 'aspectFill'
},
// 头部信息
header: {
type: Object,
default() {
return {};
}
},
mounted() {
// 额外携带的参数
formData: {
type: Object,
default() {
return {};
}
},
// 上传的文件字段名
name: {
type: String,
default: 'file'
},
data() {
return {
lists: [],
isInCount: true,
uploading: false
// 所选的图片的尺寸, 可选值为original compressed
sizeType: {
type: Array,
default() {
return ['original', 'compressed'];
}
},
watch: {
fileList: {
immediate: true,
handler(val) {
val.map(value => {
this.lists.push({url: value.url, error: false, progress: 100});
})
}
},
sourceType: {
type: Array,
default() {
return ['album', 'camera'];
}
},
methods: {
// 清除列表
clear() {
this.lists = [];
// 如果是清空形式的话，发出"on-list-change"事件
this.$emit('on-list-change', this.lists);
},
// 重新上传队列中上传失败的所有文件
reUpload() {
this.uploadFile();
},
// 选择图片
selectFile() {
if (this.disabled) return;
const {
name = '', maxCount, multiple, maxSize, sizeType, lists, camera, compressed, maxDuration, sourceType
} = this;
let chooseFile = null;
const newMaxCount = maxCount - lists.length;
// 设置为只选择图片的时候使用 chooseImage 来实现
chooseFile = new Promise((resolve, reject) => {
uni.chooseImage({
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
sourceType: sourceType,
sizeType,
success: resolve,
fail: reject
});
// 是否在点击预览图后展示全屏图片预览
previewFullImage: {
type: Boolean,
default: true
},
// 是否开启图片多选，部分安卓机型不支持
multiple: {
type: Boolean,
default: true
},
// 是否展示删除按钮
deletable: {
type: Boolean,
default: true
},
// 文件大小限制，单位为byte
maxSize: {
type: [String, Number],
default: Number.MAX_VALUE
},
// 显示已上传的文件列表
fileList: {
type: Array,
default() {
return [];
}
},
// 上传区域的提示文字
uploadText: {
type: String,
default: '选择图片'
},
// 是否自动上传
autoUpload: {
type: Boolean,
default: true
},
// 是否显示toast消息提示
showTips: {
type: Boolean,
default: true
},
// 是否通过slot自定义传入选择图标的按钮
customBtn: {
type: Boolean,
default: false
},
// 内部预览图片区域和选择图片按钮的区域宽度，高等于宽
width: {
type: [String, Number],
default: 200
},
// 右上角关闭按钮的背景颜色
delBgColor: {
type: String,
default: '#fa3534'
},
// 右上角关闭按钮的叉号图标的颜色
delColor: {
type: String,
default: '#ffffff'
},
// 右上角删除图标名称，只能为uView内置图标
delIcon: {
type: String,
default: 'close'
},
// 如果上传后的返回值为json字符串，是否自动转json
toJson: {
type: Boolean,
default: true
},
// 上传前的钩子，每个文件上传前都会执行
beforeUpload: {
type: Function,
default: null
}
},
mounted() {},
data() {
return {
lists: [],
isInCount: true,
uploading: false
};
},
watch: {
fileList: {
immediate: true,
handler(val) {
val.map(value => {
this.lists.push({ url: value.url, error: false, progress: 100 });
});
chooseFile
.then((res) => {
let file = null;
let listOldLength = this.lists.length;
res.tempFiles.map((val, index) => {
// 如果是非多选，index大于等于1或者超出最大限制数量时，不处理
if (!multiple && index >= 1) return;
if (val.size > maxSize) {
this.$emit('on-oversize', val, this.lists);
this.showToast('超出允许的文件大小');
} else {
if(maxCount <= lists.length) {
this.$emit('on-exceed', val, this.lists);
this.showToast('超出最大允许的文件个数');
return ;
}
lists.push({
url: val.path,
progress: 0,
error: false
});
// 列表发生改变，发出事件，第二个参数为当前发生变化的项的索引
this.$emit('on-list-change', this.lists);
}
})
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
this.$emit('on-choose-complete', this.lists);
if(this.autoUpload) this.uploadFile(listOldLength);
})
.catch(error => {
// this.$emit('on-error', error);
});
},
// 提示用户消息
showToast(message, force = false) {
if(this.showTips || force) {
uni.showToast({
title: message,
icon: "none"
});
}
},
// 该方法供用户通过ref调用，手动上传
upload() {
this.uploadFile();
},
// 对失败的图片重新上传
retry(index) {
this.lists[index].progress = 0;
this.lists[index].error = false;
this.lists[index].response = null;
uni.showLoading({
title: '重新上传'
}
}
},
methods: {
// 清除列表
clear() {
this.lists = [];
// 如果是清空形式的话，发出"on-list-change"事件
this.$emit('on-list-change', this.lists);
},
// 重新上传队列中上传失败的所有文件
reUpload() {
this.uploadFile();
},
// 选择图片
selectFile() {
if (this.disabled) return;
const { name = '', maxCount, multiple, maxSize, sizeType, lists, camera, compressed, maxDuration, sourceType } = this;
let chooseFile = null;
const newMaxCount = maxCount - lists.length;
// 设置为只选择图片的时候使用 chooseImage 来实现
chooseFile = new Promise((resolve, reject) => {
uni.chooseImage({
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
sourceType: sourceType,
sizeType,
success: resolve,
fail: reject
});
this.uploadFile(index);
},
// 上传图片
uploadFile(index = 0) {
if (this.disabled) return;
if(this.uploading) return ;
// 全部上传完成
if (index >= this.lists.length) {
this.$emit('on-uploaded', this.lists);
return ;
}
// 检查上传地址
if (!this.action) {
this.showToast('请配置上传地址', true);
return;
}
// 检查是否是已上传或者正在上传中
if (this.lists[index].progress == 100) {
if(this.autoUpload == false) this.uploadFile(index + 1);
return;
}
this.lists[index].error = false;
this.uploading = true;
// 创建上传对象
const task = uni.uploadFile({
url: this.action,
filePath: this.lists[index].url,
name: this.name,
formData: this.formData,
header: this.header,
success: (res) => {
// 由于此处返回的res.data为字符串，将其转为json格式
let data = {};
try{
data = JSON.parse(res.data);
}catch(e){}
if (![200,201].includes(res.statusCode)) {
this.uploadError(index, data);
});
chooseFile
.then(res => {
let file = null;
let listOldLength = this.lists.length;
res.tempFiles.map((val, index) => {
// 如果是非多选，index大于等于1或者超出最大限制数量时，不处理
if (!multiple && index >= 1) return;
if (val.size > maxSize) {
this.$emit('on-oversize', val, this.lists);
this.showToast('超出允许的文件大小');
} else {
// 上传成功
this.lists[index].response = data;
this.lists[index].progress = 100;
this.lists[index].error = false;
this.$emit('on-success', data, index, this.lists);
if (maxCount <= lists.length) {
this.$emit('on-exceed', val, this.lists);
this.showToast('超出最大允许的文件个数');
return;
}
lists.push({
url: val.path,
progress: 0,
error: false
});
// 列表发生改变，发出事件，第二个参数为当前发生变化的项的索引
this.$emit('on-list-change', this.lists);
}
},
fail: (e) => {
this.uploadError(index, e);
},
complete: (res) => {
uni.hideLoading();
this.uploading = false;
this.uploadFile(index + 1);
this.$emit('on-change', res, index, this.lists);
}
});
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
this.$emit('on-choose-complete', this.lists);
if (this.autoUpload) this.uploadFile(listOldLength);
})
.catch(error => {
// this.$emit('on-error', error);
});
task.onProgressUpdate((res) => {
if (res.progress > 0) {
this.lists[index].progress = res.progress;
this.$emit('on-progress', res, index, this.lists);
}
},
// 提示用户消息
showToast(message, force = false) {
if (this.showTips || force) {
uni.showToast({
title: message,
icon: 'none'
});
},
// 上传失败
uploadError(index, err) {
this.lists[index].progress = 0;
this.lists[index].error = true;
this.lists[index].response = null;
this.$emit('on-error', err, index, this.lists);
this.showToast('上传失败，请重试');
},
// 删除一个图片
deleteItem(index) {
uni.showModal({
title: '提示',
content: '您确定要删除此项吗？',
success: res => {
if (res.confirm) {
if (this.lists[index].process < 100 && this.lists[index].process > 0) {
typeof this.lists[index].uploadTask != 'undefined' && this.lists[index].uploadTask.abort();
}
this.lists.splice(index, 1);
this.$forceUpdate();
this.$emit('on-remove', index, this.lists);
this.showToast('移除成功');
// 列表发生改变，发出事件
this.$emit('on-list-change', this.lists);
}
},
// 该方法供用户通过ref调用，手动上传
upload() {
this.uploadFile();
},
// 对失败的图片重新上传
retry(index) {
this.lists[index].progress = 0;
this.lists[index].error = false;
this.lists[index].response = null;
uni.showLoading({
title: '重新上传'
});
this.uploadFile(index);
},
// 上传图片
uploadFile(index = 0) {
if (this.disabled) return;
if (this.uploading) return;
// 全部上传完成
if (index >= this.lists.length) {
this.$emit('on-uploaded', this.lists);
return;
}
// 检查上传地址
if (!this.action) {
this.showToast('请配置上传地址', true);
return;
}
// 检查是否是已上传或者正在上传中
if (this.lists[index].progress == 100) {
if (this.autoUpload == false) this.uploadFile(index + 1);
return;
}
// 执行before-upload钩子
// if(this.beforeUpload && typeof(this.beforeUpload) === 'function') {
// let beforeResponse = this.beforeUpload(index, this.lists);
// if (beforeResponse && beforeResponse.then) {
// }
// }
this.lists[index].error = false;
this.uploading = true;
// 创建上传对象
const task = uni.uploadFile({
url: this.action,
filePath: this.lists[index].url,
name: this.name,
formData: this.formData,
header: this.header,
success: res => {
// 判断是否json字符串，将其转为json格式
let data = this.toJson && this.checkIsJSON(res.data) ? JSON.parse(res.data) : res.data;
if (![200, 201].includes(res.statusCode)) {
this.uploadError(index, data);
} else {
// 上传成功
this.lists[index].response = data;
this.lists[index].progress = 100;
this.lists[index].error = false;
this.$emit('on-success', data, index, this.lists);
}
},
fail: e => {
this.uploadError(index, e);
},
complete: res => {
uni.hideLoading();
this.uploading = false;
this.uploadFile(index + 1);
this.$emit('on-change', res, index, this.lists);
}
});
task.onProgressUpdate(res => {
if (res.progress > 0) {
this.lists[index].progress = res.progress;
this.$emit('on-progress', res, index, this.lists);
}
});
},
// 上传失败
uploadError(index, err) {
this.lists[index].progress = 0;
this.lists[index].error = true;
this.lists[index].response = null;
this.$emit('on-error', err, index, this.lists);
this.showToast('上传失败，请重试');
},
// 删除一个图片
deleteItem(index) {
uni.showModal({
title: '提示',
content: '您确定要删除此项吗？',
success: res => {
if (res.confirm) {
if (this.lists[index].process < 100 && this.lists[index].process > 0) {
typeof this.lists[index].uploadTask != 'undefined' && this.lists[index].uploadTask.abort();
}
this.lists.splice(index, 1);
this.$forceUpdate();
this.$emit('on-remove', index, this.lists);
this.showToast('移除成功');
// 列表发生改变，发出事件
this.$emit('on-list-change', this.lists);
}
});
},
// 用户通过ref手动的形式，移除一张图片
remove(index) {
// 判断索引的合法范围
if(index >= 0 && index < this.lists.length) {
this.lists.splice(index, 1);
this.$emit('on-list-change', this.lists);
}
},
// 预览图片
doPreviewImage(url, index) {
if (!this.previewFullImage)
return;
const images = this.lists.map(item => item.url || item.path);
uni.previewImage({
urls: images,
current: url,
success: () => {
this.$emit('on-preview', url, this.lists);
},
fail: () => {
uni.showToast({
title: '预览图片失败',
icon: 'none'
});
});
},
// 用户通过ref手动的形式，移除一张图片
remove(index) {
// 判断索引的合法范围
if (index >= 0 && index < this.lists.length) {
this.lists.splice(index, 1);
this.$emit('on-list-change', this.lists);
}
},
// 预览图片
doPreviewImage(url, index) {
if (!this.previewFullImage) return;
const images = this.lists.map(item => item.url || item.path);
uni.previewImage({
urls: images,
current: url,
success: () => {
this.$emit('on-preview', url, this.lists);
},
fail: () => {
uni.showToast({
title: '预览图片失败',
icon: 'none'
});
}
});
},
// 判断是否json字符串
checkIsJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
} else {
return false;
}
});
} catch (e) {
return false;
}
}
return false;
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-upload {
display: flex;
flex-wrap: wrap;
align-items: center;
}
@import '../../libs/css/style.components.scss';
.u-list-item {
width: 200rpx;
height: 200rpx;
overflow: hidden;
margin: 10rpx;
background: rgb(244, 245, 246);
position: relative;
border-radius: 10rpx;
display: inline-flex;
align-items: center;
justify-content: center;
}
.u-upload {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.u-preview-wrap {
border: 1px solid rgb(235, 236, 238);
}
.u-list-item {
width: 200rpx;
height: 200rpx;
overflow: hidden;
margin: 10rpx;
background: rgb(244, 245, 246);
position: relative;
border-radius: 10rpx;
display: inline-flex;
align-items: center;
justify-content: center;
}
.u-add-wrap {
flex-direction: column;
color: $u-content-color;
font-size: 28rpx;
}
.u-preview-wrap {
border: 1px solid rgb(235, 236, 238);
}
.u-add-tips {
margin-top: 20rpx;
}
.u-add-wrap {
flex-direction: column;
color: $u-content-color;
font-size: 28rpx;
}
.u-add-wrap__hover {
background-color: rgb(235, 236, 238);
}
.u-add-tips {
margin-top: 20rpx;
}
.u-preview-image {
display: block;
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.u-add-wrap__hover {
background-color: rgb(235, 236, 238);
}
.u-delete-icon {
position: absolute;
top: 10rpx;
right: 10rpx;
z-index: 10;
background-color: $u-type-error;
border-radius: 100rpx;
width: 44rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.u-icon {
display: flex;
align-items: center;
justify-content: center;
}
.u-progress {
position: absolute;
bottom: 10rpx;
left: 8rpx;
right: 8rpx;
z-index: 9;
width: auto;
}
.u-error-btn {
color: #FFFFFF;
background-color: $u-type-error;
font-size: 20rpx;
padding: 4px 0;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
line-height: 1;
}
.u-preview-image {
display: block;
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.u-delete-icon {
position: absolute;
top: 10rpx;
right: 10rpx;
z-index: 10;
background-color: $u-type-error;
border-radius: 100rpx;
width: 44rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.u-icon {
display: flex;
align-items: center;
justify-content: center;
}
.u-progress {
position: absolute;
bottom: 10rpx;
left: 8rpx;
right: 8rpx;
z-index: 9;
width: auto;
}
.u-error-btn {
color: #ffffff;
background-color: $u-type-error;
font-size: 20rpx;
padding: 4px 0;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
line-height: 1;
}
</style>
uview-ui/libs/config/config.js
View file @ 5e5b3da2
......@@ -3,5 +3,13 @@ let version = '1.3.61';
export default {
v: version,
version: version
version: version,
// 主题名称
type: [
'primary',
'success',
'info',
'error',
'warning'
]
}
\ No newline at end of file
uview-ui/libs/css/color.scss
View file @ 5e5b3da2
.u-type-primary-light {
color: $u-type-primary-light!important;
color: $u-type-primary-light;
}
.u-type-warning-light {
color: $u-type-warning-light!important;
color: $u-type-warning-light;
}
.u-type-success-light {
color: $u-type-success-light!important;
color: $u-type-success-light;
}
.u-type-error-light {
color: $u-type-error-light!important;
color: $u-type-error-light;
}
.u-type-info-light {
color: $u-type-info-light!important;
color: $u-type-info-light;
}
.u-type-primary-light-bg {
background-color: $u-type-primary-light!important;
background-color: $u-type-primary-light;
}
.u-type-warning-light-bg {
background-color: $u-type-warning-light!important;
background-color: $u-type-warning-light;
}
.u-type-success-light-bg {
background-color: $u-type-success-light!important;
background-color: $u-type-success-light;
}
.u-type-error-light-bg {
background-color: $u-type-error-light!important;
background-color: $u-type-error-light;
}
.u-type-info-light-bg {
background-color: $u-type-info-light!important;
background-color: $u-type-info-light;
}
.u-type-primary-dark {
color: $u-type-primary-dark!important;
color: $u-type-primary-dark;
}
.u-type-warning-dark {
color: $u-type-warning-dark!important;
color: $u-type-warning-dark;
}
.u-type-success-dark {
color: $u-type-success-dark!important;
color: $u-type-success-dark;
}
.u-type-error-dark {
color: $u-type-error-dark!important;
color: $u-type-error-dark;
}
.u-type-info-dark {
color: $u-type-info-dark!important;
color: $u-type-info-dark;
}
.u-type-primary-dark-bg {
background-color: $u-type-primary-dark!important;
background-color: $u-type-primary-dark;
}
.u-type-warning-dark-bg {
background-color: $u-type-warning-dark!important;
background-color: $u-type-warning-dark;
}
.u-type-success-dark-bg {
background-color: $u-type-success-dark!important;
background-color: $u-type-success-dark;
}
.u-type-error-dark-bg {
background-color: $u-type-error-dark!important;
background-color: $u-type-error-dark;
}
.u-type-info-dark-bg {
background-color: $u-type-info-dark!important;
background-color: $u-type-info-dark;
}
.u-type-primary-disabled {
color: $u-type-primary-disabled!important;
color: $u-type-primary-disabled;
}
.u-type-warning-disabled {
color: $u-type-warning-disabled!important;
color: $u-type-warning-disabled;
}
.u-type-success-disabled {
color: $u-type-success-disabled!important;
color: $u-type-success-disabled;
}
.u-type-error-disabled {
color: $u-type-error-disabled!important;
color: $u-type-error-disabled;
}
.u-type-info-disabled {
color: $u-type-info-disabled!important;
color: $u-type-info-disabled;
}
.u-type-primary {
color: $u-type-primary!important;
color: $u-type-primary;
}
.u-type-warning {
color: $u-type-warning!important;
color: $u-type-warning;
}
.u-type-success {
color: $u-type-success!important;
color: $u-type-success;
}
.u-type-error {
color: $u-type-error!important;
color: $u-type-error;
}
.u-type-info {
color: $u-type-info!important;
color: $u-type-info;
}
.u-type-primary-bg {
background-color: $u-type-primary!important;
background-color: $u-type-primary;
}
.u-type-warning-bg {
background-color: $u-type-warning!important;
background-color: $u-type-warning;
}
.u-type-success-bg {
background-color: $u-type-success!important;
background-color: $u-type-success;
}
.u-type-error-bg {
background-color: $u-type-error!important;
background-color: $u-type-error;
}
.u-type-info-bg {
background-color: $u-type-info!important;
background-color: $u-type-info;
}
.u-main-color {
......
uview-ui/libs/css/style.mp.scss
View file @ 5e5b3da2
......@@ -24,5 +24,10 @@ u-grid {
u-line {
flex: 1;
}
u-switch {
display: inline-flex;
align-items: center;
}
/* #endif */
/* end-微信小程序编译后页面有组件名的元素，特别处理--end */
\ No newline at end of file
uview-ui/libs/function/color.js
View file @ 5e5b3da2
// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
// 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
let color = {
primary: "#2979ff",
primaryDark: "#2b85e4",
......
uview-ui/libs/function/queryParams.js
View file @ 5e5b3da2
......@@ -19,7 +19,7 @@ function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
switch (arrayFormat) {
case 'indices':
// 结果: ids[0]=1&ids[1]=2&ids[2]=3
for (i = 0; i < value.length; i++) {
for (let i = 0; i < value.length; i++) {
_result.push(key + '[' + i + ']=' + value[i])
}
break;
......
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