提交 59c88b61 编写于 作者: X xiaoyucoding

fix: 修复 picker 未设置 value 值时报错的问题

上级 cf84fd78
...@@ -48,7 +48,7 @@ export default { ...@@ -48,7 +48,7 @@ export default {
}, },
value: { value: {
type: [Number, String, Array], type: [Number, String, Array],
default: '' default: 0
}, },
mode: { mode: {
type: String, type: String,
......
<template> <template>
<uni-picker @touchmove.prevent> <uni-picker @touchmove.prevent>
<transition <transition name="uni-fade">
name="uni-fade"> <div
<div v-show="visible"
v-show="visible" class="uni-mask"
class="uni-mask"
@click="_cancel" /> @click="_cancel" />
</transition> </transition>
<div <div
:class="{'uni-picker_toggle':visible}" :class="{'uni-picker_toggle':visible}"
class="uni-picker"> class="uni-picker">
<div <div
class="uni-picker-header" class="uni-picker-header"
@click.stop> @click.stop>
<div <div
class="uni-picker-action uni-picker-action-cancel" class="uni-picker-action uni-picker-action-cancel"
@click="_cancel">取消</div> @click="_cancel">取消</div>
<div <div
class="uni-picker-action uni-picker-action-confirm" class="uni-picker-action uni-picker-action-confirm"
@click="_change">确定</div> @click="_change">确定</div>
</div> </div>
<v-uni-picker-view <v-uni-picker-view
:value.sync="valueArray" :value.sync="valueArray"
class="uni-picker-content"> class="uni-picker-content">
<v-uni-picker-view-column <v-uni-picker-view-column
v-for="(range,index0) in rangeArray" v-for="(range,index0) in rangeArray"
:key="index0"> :key="index0">
<div <div
v-for="(item,index) in range" v-for="(item,index) in range"
:key="index" :key="index"
class="uni-picker-item">{{ typeof item==='object'?item[rangeKey]||'':item }}{{ units[index0]||'' }}</div> class="uni-picker-item">{{ typeof item==='object'?item[rangeKey]||'':item }}{{ units[index0]||'' }}</div>
</v-uni-picker-view-column> </v-uni-picker-view-column>
</v-uni-picker-view> </v-uni-picker-view>
...@@ -40,6 +39,10 @@ ...@@ -40,6 +39,10 @@
</uni-picker> </uni-picker>
</template> </template>
<script> <script>
import {
formatDateTime
} from 'uni-shared'
const mode = { const mode = {
SELECTOR: 'selector', SELECTOR: 'selector',
MULTISELECTOR: 'multiSelector', MULTISELECTOR: 'multiSelector',
...@@ -151,7 +154,8 @@ export default { ...@@ -151,7 +154,8 @@ export default {
return val return val
case mode.TIME: case mode.TIME:
return this.timeArray return this.timeArray
case mode.DATE: { case mode.DATE:
{
let dateArray = this.dateArray let dateArray = this.dateArray
switch (this.fields) { switch (this.fields) {
case fields.YEAR: case fields.YEAR:
...@@ -166,11 +170,13 @@ export default { ...@@ -166,11 +170,13 @@ export default {
}, },
startArray () { startArray () {
var splitStr = this.mode === mode.DATE ? '-' : ':' var splitStr = this.mode === mode.DATE ? '-' : ':'
return this.start.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(val)) return this.start.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(
val))
}, },
endArray () { endArray () {
var splitStr = this.mode === mode.DATE ? '-' : ':' var splitStr = this.mode === mode.DATE ? '-' : ':'
return this.end.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(val)) return this.end.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(
val))
}, },
units () { units () {
switch (this.mode) { switch (this.mode) {
...@@ -211,7 +217,7 @@ export default { ...@@ -211,7 +217,7 @@ export default {
created () { created () {
this._createTime() this._createTime()
this._createDate() this._createDate()
this._setValue(this.value) this._setValue()
this.$watch('value', this._setValue) this.$watch('value', this._setValue)
this.$watch('mode', this._setValue) this.$watch('mode', this._setValue)
}, },
...@@ -252,8 +258,8 @@ export default { ...@@ -252,8 +258,8 @@ export default {
return val[0] * 366 + (val[1] || 0 * 31) + (val[2] || 0) return val[0] * 366 + (val[1] || 0 * 31) + (val[2] || 0)
}, },
/** /**
* 将右侧数组值同步到左侧(交集部分) * 将右侧数组值同步到左侧(交集部分)
*/ */
_cloneArray (val1, val2) { _cloneArray (val1, val2) {
for (let i = 0; i < val1.length && i < val2.length; i++) { for (let i = 0; i < val1.length && i < val2.length; i++) {
val1[i] = val2[i] val1[i] = val2[i]
...@@ -270,9 +276,21 @@ export default { ...@@ -270,9 +276,21 @@ export default {
valueArray = [...val] valueArray = [...val]
break break
case mode.TIME: case mode.TIME:
// 处理默认值为当前时间
if (this.value === 0) {
val = formatDateTime({
mode: mode.TIME
})
}
valueArray = val.split(':').map((val, i) => this.timeArray[i].indexOf(val)) valueArray = val.split(':').map((val, i) => this.timeArray[i].indexOf(val))
break break
case mode.DATE: case mode.DATE:
// 处理默认值为当前日期
if (this.value === 0) {
val = formatDateTime({
mode: mode.DATE
})
}
valueArray = val.split('-').map((val, i) => this.dateArray[i].indexOf(val)) valueArray = val.split('-').map((val, i) => this.dateArray[i].indexOf(val))
break break
} }
...@@ -316,102 +334,109 @@ export default { ...@@ -316,102 +334,109 @@ export default {
} }
</script> </script>
<style> <style>
uni-picker { uni-picker {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
} }
uni-picker .uni-picker { uni-picker .uni-picker {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
transform: translate(0, 100%); transform: translate(0, 100%);
backface-visibility: hidden; backface-visibility: hidden;
z-index: 999; z-index: 999;
width: 100%; width: 100%;
background-color: #efeff4; background-color: #efeff4;
transition: transform 0.3s; transition: transform 0.3s;
} }
uni-picker .uni-picker.uni-picker_toggle { uni-picker .uni-picker.uni-picker_toggle {
transform: translate(0, 0); transform: translate(0, 0);
} }
uni-picker .uni-picker * { uni-picker .uni-picker * {
box-sizing: border-box; box-sizing: border-box;
} }
uni-picker .uni-picker { uni-picker .uni-picker {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
transform: translate(0, 100%); transform: translate(0, 100%);
backface-visibility: hidden; backface-visibility: hidden;
z-index: 999; z-index: 999;
width: 100%; width: 100%;
background-color: #efeff4; background-color: #efeff4;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
} }
uni-picker .uni-picker-content { uni-picker .uni-picker-content {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
height: 238px; height: 238px;
background-color: white; background-color: white;
} }
uni-picker .uni-picker-item {
padding: 0; uni-picker .uni-picker-item {
height: 34px; padding: 0;
line-height: 34px; height: 34px;
text-align: center; line-height: 34px;
color: #000; text-align: center;
text-overflow: ellipsis; color: #000;
white-space: nowrap; text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
} overflow: hidden;
uni-picker .uni-picker-header { }
display: block;
position: relative; uni-picker .uni-picker-header {
text-align: center; display: block;
width: 100%; position: relative;
height: 45px; text-align: center;
background-color: #fff; width: 100%;
} height: 45px;
uni-picker .uni-picker-header:after { background-color: #fff;
content: ""; }
position: absolute;
left: 0; uni-picker .uni-picker-header:after {
bottom: 0; content: "";
right: 0; position: absolute;
height: 1px; left: 0;
clear: both; bottom: 0;
border-bottom: 1px solid #e5e5e5; right: 0;
color: #e5e5e5; height: 1px;
transform-origin: 0 100%; clear: both;
transform: scaleY(0.5); border-bottom: 1px solid #e5e5e5;
} color: #e5e5e5;
uni-picker .uni-picker-action { transform-origin: 0 100%;
display: block; transform: scaleY(0.5);
max-width: 50%; }
top: 0;
height: 100%; uni-picker .uni-picker-action {
box-sizing: border-box; display: block;
padding: 0 14px; max-width: 50%;
font-size: 17px; top: 0;
line-height: 45px; height: 100%;
overflow: hidden; box-sizing: border-box;
} padding: 0 14px;
uni-picker .uni-picker-action.uni-picker-action-cancel { font-size: 17px;
float: left; line-height: 45px;
color: #888; overflow: hidden;
} }
uni-picker .uni-picker-action.uni-picker-action-confirm {
float: right; uni-picker .uni-picker-action.uni-picker-action-cancel {
color: #007aff; float: left;
} color: #888;
/* .uni-picker { }
uni-picker .uni-picker-action.uni-picker-action-confirm {
float: right;
color: #007aff;
}
/* .uni-picker {
position: relative; position: relative;
} }
.uni-picker-units { .uni-picker-units {
...@@ -432,4 +457,4 @@ uni-picker .uni-picker-action.uni-picker-action-confirm { ...@@ -432,4 +457,4 @@ uni-picker .uni-picker-action.uni-picker-action-confirm {
text-align: center; text-align: center;
transform: translateX(2em); transform: translateX(2em);
} */ } */
</style> </style>
const _toString = Object.prototype.toString const _toString = Object.prototype.toString
const hasOwnProperty = Object.prototype.hasOwnProperty const hasOwnProperty = Object.prototype.hasOwnProperty
const _completeValue = value => {
return value > 9 ? value : ('0' + value)
}
export function isFn (fn) { export function isFn (fn) {
return typeof fn === 'function' return typeof fn === 'function'
} }
...@@ -34,4 +38,15 @@ export function setProperties (item, props, propsData) { ...@@ -34,4 +38,15 @@ export function setProperties (item, props, propsData) {
export function getLen (str = '') { export function getLen (str = '') {
/* eslint-disable no-control-regex */ /* eslint-disable no-control-regex */
return ('' + str).replace(/[^\x00-\xff]/g, '**').length return ('' + str).replace(/[^\x00-\xff]/g, '**').length
}
export function formatDateTime ({
date = new Date(),
mode = 'date'
}) {
if (mode === 'time') {
return _completeValue(date.getHours()) + ':' + _completeValue(date.getMinutes())
} else {
return date.getFullYear() + '-' + _completeValue(date.getMonth() + 1) + '-' + _completeValue(date.getDate())
}
} }
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册