Skip to content

U
uview-ui
Commit 0da59ed2 authored by wlxuqu's avatar wlxuqu
Browse files
Options

1. 优化count-donw倒计时组件，避免多个组件同时使用可能会出现串扰的情况 

2. swiper组件新增current参数，可以初始化时指定激活项的索引
3. upload组件新增index参数，在每个回调事件的最后一个参数中返回，用于区别当前的回调属于第几个upload组件产生
4. 修复row组件在QQ小程序上的兼容性
5. 修复演示项目中，无法切换rate组件演示选择数量，以及微信演示中，timeFrom函数显示异常的问题
parent ffa959a0
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 64 deletions
manifest.json
View file @ 0da59ed2
......@@ -109,6 +109,12 @@
"usingComponents" : true,
"component2" : true
},
"mp-qq" : {
"optimization" : {
"subPackages" : true
},
"appid" : "15646153"
},
"mp-baidu" : {
"usingComponents" : true,
"appid" : "17597421"
......
pages.json
View file @ 0da59ed2
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsC/test/index", //启动页面，必选
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
}]
},
// "condition": { //模式配置，仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsC/layout/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
......@@ -835,22 +835,22 @@
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"pagePath": "pages/example/components"
"pagePath": "pages/example/components",
// "iconPath": "static/uview/example/component.png",
// "selectedIconPath": "static/uview/example/component_select.png",
// "text": "组件"
"text": "组件"
},
{
"pagePath": "pages/example/js"
"pagePath": "pages/example/js",
// "iconPath": "static/uview/example/js.png",
// "selectedIconPath": "static/uview/example/js_select.png",
// "text": "工具"
"text": "工具"
},
{
"pagePath": "pages/example/template"
"pagePath": "pages/example/template",
// "iconPath": "static/uview/example/template.png",
// "selectedIconPath": "static/uview/example/template_select.png",
// "text": "模板"
"text": "模板"
}
]
}
......
pages/componentsB/rate/index.vue
View file @ 0da59ed2
......@@ -73,7 +73,7 @@
},
methods: {
currentChange(index) {
this.current = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4;
this.value = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4;
},
plainChange(index) {
this.plain = !index;
......
pages/componentsC/layout/index.vue
View file @ 0da59ed2
......@@ -34,10 +34,12 @@
<view class="u-item-title">分栏偏移</view>
<u-subsection vibrateShort :list="[0, 1, 2, 3]" @change="offsetChange"></u-subsection>
</view>
<!-- #ifndef MP -->
<view class="u-config-item">
<view class="u-item-title">水平排列方式(微信小程序无效)</view>
<u-subsection vibrateShort :list="['start', 'end', 'around', 'between']" @change="justifyChange"></u-subsection>
</view>
<!-- #endif -->
</view>
</view>
</template>
......
pages/library/timeFrom/index.vue
View file @ 0da59ed2
......@@ -29,25 +29,24 @@
<script>
export default {
data() {
// 微信小程序无法动态修改u-subsection的list参数，导致onLoad中赋值timeArr1，timeArr2无效，故在data中直接赋值
let nowTime = Number(+ new Date());
let threeDayAgo = nowTime - 2 * 86400000;
let arr1 = [0, 0], arr2 = [0, 0];
[0, 0].map((val, index) => {
arr1[index] = this.$u.timeFormat(this.$u.random(threeDayAgo, nowTime), 'yyyy/mm/dd hh:MM:ss');
arr2[index] = this.$u.timeFormat(this.$u.random(threeDayAgo, nowTime), 'yyyy/mm/dd hh:MM:ss');
})
return {
timeArr1: [0, 0],
timeArr2: [0, 0],
timeArr1: arr1,
timeArr2: arr2,
result: null
}
},
onLoad() {
this.getRandomTime();
this.timeArr1Change(0);
},
methods: {
getRandomTime() {
let nowTime = Number(+ new Date());
let threeDayAgo = nowTime - 2 * 86400000;
this.timeArr1.map((val, index) => {
this.timeArr1[index] = this.$u.timeFormat(this.$u.random(threeDayAgo, nowTime), 'yyyy/mm/dd hh:MM:ss');
this.timeArr2[index] = this.$u.timeFormat(this.$u.random(threeDayAgo, nowTime), 'yyyy/mm/dd hh:MM:ss');
})
},
timeArr1Change(index) {
this.result = this.$u.timeFrom((new Date(this.timeArr1[index])).getTime());
},
......
uview-ui/components/u-col/u-col.vue
View file @ 0da59ed2
......@@ -76,7 +76,7 @@
<style lang="scss">
@import "../../libs/css/style.components.scss";
.u-col {
/* #ifdef MP-WEIXIN */
/* #ifdef MP-WEIXIN || MP-QQ */
float: left;
/* #endif */
}
......
uview-ui/components/u-count-down/u-count-down.vue
View file @ 0da59ed2
......@@ -164,7 +164,7 @@ export default {
// 监听时间戳的变化
timestamp(newVal, oldVal) {
// 如果倒计时间发生变化，清除定时器，重新开始倒计时
clearInterval(this.timer);
this.clearTimer();
this.start();
}
},
......@@ -211,6 +211,8 @@ export default {
methods: {
// 倒计时
start() {
// 避免可能出现的倒计时重叠情况
this.clearTimer();
if (this.timestamp <= 0) return;
this.seconds = Number(this.timestamp);
this.formatTime(this.seconds);
......@@ -254,10 +256,16 @@ export default {
},
// 停止倒计时
end() {
// 清除定时器
clearInterval(this.timer);
this.timer = null;
this.clearTimer();
this.$emit('end', {});
},
// 清除定时器
clearTimer() {
if(this.timer) {
// 清除定时器
clearInterval(this.timer);
this.timer = null;
}
}
},
beforeDestroy() {
......
uview-ui/components/u-rate/u-rate.vue
View file @ 0da59ed2
......@@ -5,7 +5,7 @@
:name="activeIndex > index ? activeIcon : inactiveIcon"
@click="click(index + 1, $event)"
:color="activeIndex > index ? activeColor : inactiveColor"
:style="{
:custom-style="{
fontSize: size + 'rpx',
padding: `0 ${gutter / 2 + 'rpx'}`
}"
......
uview-ui/components/u-row/u-row.vue
View file @ 0da59ed2
......@@ -68,14 +68,14 @@
.u-row {
// 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
/* #ifndef MP-WEIXIN */
/* #ifndef MP-WEIXIN || MP-QQ */
display: flex;
/* #endif */
flex-wrap: wrap;
}
.u-row:after {
/* #ifdef MP-WEIXIN */
/* #ifdef MP-WEIXIN || MP-QQ */
display: table;
clear: both;
content: "";
......
uview-ui/components/u-swiper/u-swiper.vue
View file @ 0da59ed2
......@@ -2,16 +2,16 @@
<view class="u-swiper-wrap" :style="{
borderRadius: `${borderRadius}rpx`
}">
<swiper @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay"
<swiper :current="elCurrent" @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay"
:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
:style="{
height: height + 'rpx'
}">
<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
<view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[current != index ? 'u-list-scale' : '']" :style="{
<view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[uCurrent != index ? 'u-list-scale' : '']" :style="{
borderRadius: `${borderRadius}rpx`,
transform: effect3d && current != index ? 'scaleY(0.9)' : 'scaleY(1)',
margin: effect3d && current != index ? '0 20rpx' : 0,
transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
margin: effect3d && uCurrent != index ? '0 20rpx' : 0,
backgroundColor: bgColor
}">
<image class="u-swiper-image" :src="item[name]" :mode="imgMode"></image>
......@@ -30,19 +30,19 @@
padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
}">
<block v-if="mode == 'rect'">
<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == current }" v-for="(item, index) in list"
<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list"
:key="index"></view>
</block>
<block v-if="mode == 'dot'">
<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == current }" v-for="(item, index) in list"
<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list"
:key="index"></view>
</block>
<block v-if="mode == 'round'">
<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == current }" v-for="(item, index) in list"
<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list"
:key="index"></view>
</block>
<block v-if="mode == 'number'">
<view class="u-indicator-item-number">{{ current + 1 }}/{{ list.length }}</view>
<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view>
</block>
</view>
</view>
......@@ -156,17 +156,27 @@
bgColor: {
type: String,
default: '#f3f4f6'
},
// 初始化时，默认显示第几项
current: {
type: [Number, String],
default: 0
}
},
watch: {
// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置current值，避免溢出
// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出
list(nVal, oVal) {
if(nVal.length !== oVal.length) this.current = 0;
if(nVal.length !== oVal.length) this.uCurrent = 0;
},
// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent，
// 就会错乱，因为指示器是依赖于uCurrent的
current(n) {
this.uCurrent = n;
}
},
data() {
return {
current: 0 // 当前活跃的swiper-item的index
uCurrent: this.current // 当前活跃的swiper-item的index
};
},
computed: {
......@@ -186,6 +196,10 @@
tmp = '12rpx';
}
return tmp;
},
// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换
elCurrent() {
return Number(this.current);
}
},
methods: {
......@@ -194,15 +208,15 @@
},
change(e) {
let current = e.detail.current;
this.current = current;
this.uCurrent = current;
// 发出change事件，表示当前自动切换的index，从0开始
this.$emit('change', current);
},
// 头条小程序不支持animationfinish事件，改由change事件
// 暂不监听此事件，因为不再给swiper绑定current属性
// 暂不监听此事件，因为不再给swiper绑定uCurrent属性
animationfinish(e) {
// #ifndef MP-TOUTIAO
// this.current = e.detail.current;
// this.uCurrent = e.detail.current;
// #endif
}
}
......
uview-ui/components/u-upload/u-upload.vue
View file @ 0da59ed2
......@@ -63,6 +63,7 @@
* @property {String} image-mode 预览图片等显示模式，可选值为uni的image的mode属性值（默认aspectFill）
* @property {String} del-icon 右上角删除图标名称，只能为uView内置图标
* @property {String} del-bg-color 右上角关闭按钮的背景颜色
* @property {String | Number} index 在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件
* @property {String} del-color 右上角关闭按钮图标的颜色
* @property {Object} header 上传携带的头信息，对象形式
* @property {Object} form-data 上传额外携带的参数
......@@ -238,6 +239,11 @@ export default {
return ['png', 'jpg', 'jpeg', 'webp', 'gif'];
}
},
// 在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件
index: {
type: [Number, String],
default: ''
}
},
mounted() {},
data() {
......@@ -265,7 +271,7 @@ export default {
},
// 监听lists的变化，发出事件
lists(n) {
this.$emit('on-list-change', n);
this.$emit('on-list-change', n, this.index);
}
},
methods: {
......@@ -304,11 +310,11 @@ export default {
// 如果是非多选，index大于等于1或者超出最大限制数量时，不处理
if (!multiple && index >= 1) return;
if (val.size > maxSize) {
this.$emit('on-oversize', val, this.lists);
this.$emit('on-oversize', val, this.lists, this.index);
this.showToast('超出允许的文件大小');
} else {
if (maxCount <= lists.length) {
this.$emit('on-exceed', val, this.lists);
this.$emit('on-exceed', val, this.lists, this.index);
this.showToast('超出最大允许的文件个数');
return;
}
......@@ -320,7 +326,7 @@ export default {
}
});
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
this.$emit('on-choose-complete', this.lists);
this.$emit('on-choose-complete', this.lists, this.index);
if (this.autoUpload) this.uploadFile(listOldLength);
})
.catch(error => {
......@@ -356,7 +362,7 @@ export default {
if (this.uploading) return;
// 全部上传完成
if (index >= this.lists.length) {
this.$emit('on-uploaded', this.lists);
this.$emit('on-uploaded', this.lists, this.index);
return;
}
// 检查是否是已上传或者正在上传中
......@@ -410,7 +416,7 @@ export default {
this.lists[index].response = data;
this.lists[index].progress = 100;
this.lists[index].error = false;
this.$emit('on-success', data, index, this.lists);
this.$emit('on-success', data, index, this.lists, this.index);
}
},
fail: e => {
......@@ -420,13 +426,13 @@ export default {
uni.hideLoading();
this.uploading = false;
this.uploadFile(index + 1);
this.$emit('on-change', res, index, this.lists);
this.$emit('on-change', res, index, this.lists, this.index);
}
});
task.onProgressUpdate(res => {
if (res.progress > 0) {
this.lists[index].progress = res.progress;
this.$emit('on-progress', res, index, this.lists);
this.$emit('on-progress', res, index, this.lists, this.index);
}
});
},
......@@ -435,7 +441,7 @@ export default {
this.lists[index].progress = 0;
this.lists[index].error = true;
this.lists[index].response = null;
this.$emit('on-error', err, index, this.lists);
this.$emit('on-error', err, index, this.lists, this.index);
this.showToast('上传失败，请重试');
},
// 删除一个图片
......@@ -450,7 +456,7 @@ export default {
}
this.lists.splice(index, 1);
this.$forceUpdate();
this.$emit('on-remove', index, this.lists);
this.$emit('on-remove', index, this.lists, this.index);
this.showToast('移除成功');
}
}
......@@ -461,7 +467,7 @@ export default {
// 判断索引的合法范围
if (index >= 0 && index < this.lists.length) {
this.lists.splice(index, 1);
this.$emit('on-list-change', this.lists);
this.$emit('on-list-change', this.lists, this.index);
}
},
// 预览图片
......@@ -472,7 +478,7 @@ export default {
urls: images,
current: url,
success: () => {
this.$emit('on-preview', url, this.lists);
this.$emit('on-preview', url, this.lists, this.index);
},
fail: () => {
uni.showToast({
......
uview-ui/libs/request/index.js
View file @ 0da59ed2
......@@ -12,12 +12,12 @@ class Request {
// 检查请求拦截
if (this.interceptor.request && typeof this.interceptor.request === 'function') {
let tmpConfig = {};
let interceptorReuest = this.interceptor.request(options);
if (interceptorReuest === false) {
let interceptorRequest = this.interceptor.request(options);
if (interceptorRequest === false) {
// 返回一个处于pending状态中的Promise，来取消原promise，避免进入then()回调
return new Promise(()=>{});
}
this.options = interceptorReuest;
this.options = interceptorRequest;
}
options.dataType = options.dataType || this.config.dataType;
options.responseType = options.responseType || this.config.responseType;
......
vue.config.js
View file @ 0da59ed2
......@@ -5,5 +5,6 @@ module.exports = {
// 调试时允许内网穿透，让外网的人访问到本地调试的H5页面
disableHostCheck: true
}
}
},
//productionSourceMap: false
}
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