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
Show 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 class="wrap">
<u-swiper :list="list"></u-swiper>
</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>
</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>
\ 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="[{
<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: backgroundColor
}, boxStyle]">
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 {
&__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,11 +91,11 @@
</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
......@@ -116,13 +119,13 @@
* @event {Function} cancel 点击取消按钮，返回当前选择的值
* @example <u-picker v-model="show" mode="time"></u-picker>
*/
export default {
name: "u-picker",
export default {
name: 'u-picker',
props: {
// picker中需要显示的参数
params: {
type: Object,
default () {
default() {
return {
year: true,
month: true,
......@@ -133,21 +136,21 @@
province: true,
city: true,
area: true
}
};
}
},
// 当mode=selector或者mode=multiSelector时，提供的数组
range: {
type: Array,
default() {
return []
return [];
}
},
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
defaultSelector: {
type: Array,
default() {
return [0]
return [0];
}
},
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
......@@ -188,7 +191,7 @@
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
defaultRegion: {
type: Array,
default () {
default() {
return [];
}
},
......@@ -200,7 +203,7 @@
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
areaCode: {
type: Array,
default () {
default() {
return [];
}
},
......@@ -222,6 +225,11 @@
zIndex: {
type: [String, Number],
default: 0
},
// 顶部标题
title: {
type: String,
default: ''
}
},
data() {
......@@ -238,8 +246,8 @@
hour: 0,
minute: 0,
second: 0,
startDate: "",
endDate: "",
startDate: '',
endDate: '',
valueArr: [],
reset: false,
provinces: provinces,
......@@ -248,7 +256,8 @@
province: 0,
city: 0,
area: 0,
}
moving: false // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
};
},
mounted() {
this.init();
......@@ -294,12 +303,24 @@
}
},
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
if (this.mode == mode) {
return typeof item == 'object' ? item[this.rangeKey] : item;
}
},
// 小于10前面补0，用于月份，日期，时分秒等
......@@ -321,14 +342,12 @@
initTimeValue() {
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
let fdate = this.defaultTime.replace(/\-/g, '/');
fdate = fdate && fdate.indexOf("/") == -1 ? `2020/01/01 ${fdate}` : fdate
fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
let time = null;
if (fdate)
time = new Date(fdate);
else
time = new Date();
if (fdate) time = new Date(fdate);
else time = new Date();
// 获取年日月时分秒
this.year = time.getFullYear()
this.year = time.getFullYear();
this.month = Number(time.getMonth()) + 1;
this.day = time.getDate();
this.hour = time.getHours();
......@@ -364,7 +383,7 @@
this.valueArr.push(0);
this.setSeconds();
}
} else if(this.mode == 'region') {
} else if (this.mode == 'region') {
if (this.params.province) {
this.valueArr.push(0);
this.setProvinces();
......@@ -377,9 +396,9 @@
this.valueArr.push(0);
this.setAreas();
}
} else if(this.mode == 'selector') {
} else if (this.mode == 'selector') {
this.valueArr = this.defaultSelector;
} else if(this.mode == 'multiSelector') {
} else if (this.mode == 'multiSelector') {
this.valueArr = this.defaultSelector;
this.multiSelectorValue = this.defaultSelector;
}
......@@ -436,7 +455,7 @@
if (useCode ? v.value == tmp : v.label == tmp) {
tmp = k;
}
})
});
this.province = tmp;
this.provinces = provinces;
// 设置默认省份的值
......@@ -455,7 +474,7 @@
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);
......@@ -473,7 +492,7 @@
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);
......@@ -494,27 +513,30 @@
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') {
} 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') {
} else if (this.mode == 'multiSelector') {
let index = null;
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
this.defaultSelector.map((val, idx) => {
if(val != e.detail.value[idx]) index = idx;
})
if (val != e.detail.value[idx]) index = idx;
});
// 为了让用户对多列变化时，对动态设置其他列的变更
if(index != null) {
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') {
......@@ -537,23 +559,23 @@
this.close();
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
@import '../../libs/css/style.components.scss';
.u-datetime-picker {
.u-datetime-picker {
position: relative;
z-index: 999;
}
}
.u-picker-view {
.u-picker-view {
height: 100%;
box-sizing: border-box;
}
}
.u-picker-header {
.u-picker-header {
width: 100%;
height: 90rpx;
padding: 0 40rpx;
......@@ -561,12 +583,12 @@
justify-content: space-between;
align-items: center;
box-sizing: border-box;
font-size: 32rpx;
font-size: 30rpx;
background: #fff;
position: relative;
}
}
.u-picker-header::after {
.u-picker-header::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
......@@ -575,45 +597,49 @@
bottom: 0;
right: 0;
left: 0;
}
}
.u-picker-body {
.u-picker__title {
color: $u-content-color;
}
.u-picker-body {
width: 100%;
height: 500rpx;
overflow: hidden;
background-color: #fff;
}
}
.u-column-item {
.u-column-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: $u-main-color;
padding: 0 8rpx;
}
}
.u-text {
.u-text {
font-size: 24rpx;
padding-left: 8rpx;
}
}
.u-btn-picker {
.u-btn-picker {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
}
.u-opacity {
.u-opacity {
opacity: 0.5;
}
}
.u-btn-picker--primary {
.u-btn-picker--primary {
color: $u-type-primary;
}
}
.u-btn-picker--tips {
.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="{
<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="{
}"
>
<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="{
<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
......@@ -67,7 +89,7 @@
* @event {Function} on-choose-complete 每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表
* @example <u-upload :action="action" :file-list="fileList" ></u-upload>
*/
export default {
export default {
name: 'u-upload',
props: {
//是否显示组件自带的图片预览功能
......@@ -103,15 +125,15 @@
// 头部信息
header: {
type: Object,
default () {
return {}
default() {
return {};
}
},
// 额外携带的参数
formData: {
type: Object,
default () {
return {}
default() {
return {};
}
},
// 上传的文件字段名
......@@ -122,14 +144,14 @@
// 所选的图片的尺寸, 可选值为original compressed
sizeType: {
type: Array,
default () {
return ['original', 'compressed']
default() {
return ['original', 'compressed'];
}
},
sourceType: {
type: Array,
default () {
return ['album', 'camera']
default() {
return ['album', 'camera'];
}
},
// 是否在点击预览图后展示全屏图片预览
......@@ -155,8 +177,8 @@
// 显示已上传的文件列表
fileList: {
type: Array,
default () {
return []
default() {
return [];
}
},
// 上传区域的提示文字
......@@ -198,27 +220,35 @@
delIcon: {
type: String,
default: 'close'
}
},
mounted() {
// 如果上传后的返回值为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});
})
this.lists.push({ url: value.url, error: false, progress: 100 });
});
}
}
},
},
methods: {
// 清除列表
......@@ -234,9 +264,7 @@
// 选择图片
selectFile() {
if (this.disabled) return;
const {
name = '', maxCount, multiple, maxSize, sizeType, lists, camera, compressed, maxDuration, sourceType
} = this;
const { name = '', maxCount, multiple, maxSize, sizeType, lists, camera, compressed, maxDuration, sourceType } = this;
let chooseFile = null;
const newMaxCount = maxCount - lists.length;
// 设置为只选择图片的时候使用 chooseImage 来实现
......@@ -250,7 +278,7 @@
});
});
chooseFile
.then((res) => {
.then(res => {
let file = null;
let listOldLength = this.lists.length;
res.tempFiles.map((val, index) => {
......@@ -260,10 +288,10 @@
this.$emit('on-oversize', val, this.lists);
this.showToast('超出允许的文件大小');
} else {
if(maxCount <= lists.length) {
if (maxCount <= lists.length) {
this.$emit('on-exceed', val, this.lists);
this.showToast('超出最大允许的文件个数');
return ;
return;
}
lists.push({
url: val.path,
......@@ -273,10 +301,10 @@
// 列表发生改变，发出事件，第二个参数为当前发生变化的项的索引
this.$emit('on-list-change', this.lists);
}
})
});
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
this.$emit('on-choose-complete', this.lists);
if(this.autoUpload) this.uploadFile(listOldLength);
if (this.autoUpload) this.uploadFile(listOldLength);
})
.catch(error => {
// this.$emit('on-error', error);
......@@ -284,10 +312,10 @@
},
// 提示用户消息
showToast(message, force = false) {
if(this.showTips || force) {
if (this.showTips || force) {
uni.showToast({
title: message,
icon: "none"
icon: 'none'
});
}
},
......@@ -308,11 +336,11 @@
// 上传图片
uploadFile(index = 0) {
if (this.disabled) return;
if(this.uploading) return ;
if (this.uploading) return;
// 全部上传完成
if (index >= this.lists.length) {
this.$emit('on-uploaded', this.lists);
return ;
return;
}
// 检查上传地址
if (!this.action) {
......@@ -321,9 +349,17 @@
}
// 检查是否是已上传或者正在上传中
if (this.lists[index].progress == 100) {
if(this.autoUpload == false) this.uploadFile(index + 1);
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;
// 创建上传对象
......@@ -333,13 +369,10 @@
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)) {
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 {
// 上传成功
......@@ -349,17 +382,17 @@
this.$emit('on-success', data, index, this.lists);
}
},
fail: (e) => {
fail: e => {
this.uploadError(index, e);
},
complete: (res) => {
complete: res => {
uni.hideLoading();
this.uploading = false;
this.uploadFile(index + 1);
this.$emit('on-change', res, index, this.lists);
}
});
task.onProgressUpdate((res) => {
task.onProgressUpdate(res => {
if (res.progress > 0) {
this.lists[index].progress = res.progress;
this.$emit('on-progress', res, index, this.lists);
......@@ -397,15 +430,14 @@
// 用户通过ref手动的形式，移除一张图片
remove(index) {
// 判断索引的合法范围
if(index >= 0 && index < this.lists.length) {
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;
if (!this.previewFullImage) return;
const images = this.lists.map(item => item.url || item.path);
uni.previewImage({
urls: images,
......@@ -420,21 +452,37 @@
});
}
});
},
// 判断是否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";
@import '../../libs/css/style.components.scss';
.u-upload {
.u-upload {
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
.u-list-item {
.u-list-item {
width: 200rpx;
height: 200rpx;
overflow: hidden;
......@@ -445,34 +493,34 @@
display: inline-flex;
align-items: center;
justify-content: center;
}
}
.u-preview-wrap {
.u-preview-wrap {
border: 1px solid rgb(235, 236, 238);
}
}
.u-add-wrap {
.u-add-wrap {
flex-direction: column;
color: $u-content-color;
font-size: 28rpx;
}
}
.u-add-tips {
.u-add-tips {
margin-top: 20rpx;
}
}
.u-add-wrap__hover {
.u-add-wrap__hover {
background-color: rgb(235, 236, 238);
}
}
.u-preview-image {
.u-preview-image {
display: block;
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.u-delete-icon {
.u-delete-icon {
position: absolute;
top: 10rpx;
right: 10rpx;
......@@ -484,25 +532,25 @@
display: flex;
align-items: center;
justify-content: center;
}
}
.u-icon {
.u-icon {
display: flex;
align-items: center;
justify-content: center;
}
}
.u-progress {
.u-progress {
position: absolute;
bottom: 10rpx;
left: 8rpx;
right: 8rpx;
z-index: 9;
width: auto;
}
}
.u-error-btn {
color: #FFFFFF;
.u-error-btn {
color: #ffffff;
background-color: $u-type-error;
font-size: 20rpx;
padding: 4px 0;
......@@ -513,5 +561,5 @@
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