This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化:attr设置值为的Date对象时的存储;优化构造VM时对Date对象的处理;更新datepicker组件,使用最新的host-push接口

old
宇天 2018-05-30 17:20:21 +08:00
parent c2e52e0535
commit 346e18fe5f
6 changed files with 81 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/js/anot-touch.js
View File

@ -1749,7 +1749,7 @@ const _Anot = (function() {
simple.forEach(function(name) {
var oldVal = old && old[name]
var val = ($vmodel[name] = state[name])
if (val && typeof val === 'object') {
if (val && typeof val === 'object' && !Date.isDate(val)) {
val.$up = $vmodel
val.$pathname = name
}
@ -4017,8 +4017,13 @@ const _Anot = (function() {
if (typeof obj === 'object' && obj !== null) {
if (!Anot.isPlainObject(obj)) {
if (Date.isDate(obj)) {
obj = {}
obj[this.param] = val.toUTCString()
} else {
obj = obj.$model
}
}
} else {
if (!this.param) {
return
@ -4085,7 +4090,9 @@ const _Anot = (function() {
elem[k] = obj[i]
} else {
if (typeof obj[i] === 'object') {
obj[i] = JSON.stringify(obj[i])
obj[i] = Date.isDate(obj[i])
? obj[i].toUTCString()
: JSON.stringify(obj[i])
} else if (typeof obj[i] === 'function') {
k = ronattr + camelize(k.slice(1))
elem[k] = obj[i].bind(vm)

11
src/js/anot-touch.shim.js
View File

@ -1764,7 +1764,7 @@
simple.forEach(function(name) {
var oldVal = old && old[name]
var val = ($vmodel[name] = state[name])
if (val && typeof val === 'object') {
if (val && typeof val === 'object' && !Date.isDate(val)) {
val.$up = $vmodel
val.$pathname = name
}
@ -4032,8 +4032,13 @@
if (typeof obj === 'object' && obj !== null) {
if (!Anot.isPlainObject(obj)) {
if (Date.isDate(obj)) {
obj = {}
obj[this.param] = val.toUTCString()
} else {
obj = obj.$model
}
}
} else {
if (!this.param) {
return
@ -4100,7 +4105,9 @@
elem[k] = obj[i]
} else {
if (typeof obj[i] === 'object') {
obj[i] = JSON.stringify(obj[i])
obj[i] = Date.isDate(obj[i])
? obj[i].toUTCString()
: JSON.stringify(obj[i])
} else if (typeof obj[i] === 'function') {
k = ronattr + camelize(k.slice(1))
elem[k] = obj[i].bind(vm)

11
src/js/anot.js
View File

@ -1749,7 +1749,7 @@ const _Anot = (function() {
simple.forEach(function(name) {
var oldVal = old && old[name]
var val = ($vmodel[name] = state[name])
if (val && typeof val === 'object') {
if (val && typeof val === 'object' && !Date.isDate(val)) {
val.$up = $vmodel
val.$pathname = name
}
@ -4017,8 +4017,13 @@ const _Anot = (function() {
if (typeof obj === 'object' && obj !== null) {
if (!Anot.isPlainObject(obj)) {
if (Date.isDate(obj)) {
obj = {}
obj[this.param] = val.toUTCString()
} else {
obj = obj.$model
}
}
} else {
if (!this.param) {
return
@ -4085,7 +4090,9 @@ const _Anot = (function() {
elem[k] = obj[i]
} else {
if (typeof obj[i] === 'object') {
obj[i] = JSON.stringify(obj[i])
obj[i] = Date.isDate(obj[i])
? obj[i].toUTCString()
: JSON.stringify(obj[i])
} else if (typeof obj[i] === 'function') {
k = ronattr + camelize(k.slice(1))
elem[k] = obj[i].bind(vm)

11
src/js/anot.shim.js
View File

@ -1764,7 +1764,7 @@
simple.forEach(function(name) {
var oldVal = old && old[name]
var val = ($vmodel[name] = state[name])
if (val && typeof val === 'object') {
if (val && typeof val === 'object' && !Date.isDate(val)) {
val.$up = $vmodel
val.$pathname = name
}
@ -4032,8 +4032,13 @@
if (typeof obj === 'object' && obj !== null) {
if (!Anot.isPlainObject(obj)) {
if (Date.isDate(obj)) {
obj = {}
obj[this.param] = val.toUTCString()
} else {
obj = obj.$model
}
}
} else {
if (!this.param) {
return
@ -4100,7 +4105,9 @@
elem[k] = obj[i]
} else {
if (typeof obj[i] === 'object') {
obj[i] = JSON.stringify(obj[i])
obj[i] = Date.isDate(obj[i])
? obj[i].toUTCString()
: JSON.stringify(obj[i])
} else if (typeof obj[i] === 'function') {
k = ronattr + camelize(k.slice(1))
elem[k] = obj[i].bind(vm)

52
src/js/datepicker/index.js
View File

@ -139,7 +139,7 @@ export default Anot.component('datepicker', {
:css="{'border-radius': props.radius}"
:attr-placeholder="props.placeholder || '请选择日期'"
:attr-disabled="disabled">
<i class="do-ui-font icon"></i>
<i class="do-icon-calendar icon"></i>
</label>
<dl
@ -147,11 +147,12 @@ export default Anot.component('datepicker', {
:if="showCalendar">
<dt class="contrl">
<a href="javascript:;" class="do-ui-font" :click="turn(1, -1)"></a>
<a href="javascript:;" class="do-ui-font prev-month" :click="turn(0, -1)"></a>
<a href="javascript:;" class="do-ui-font next-month" :click="turn(0, 1)"></a>
<a href="javascript:;" class="do-ui-font next-year" :click="turn(1, 1)"></a>
<span title="双击回到今天"
<a class="do-icon-dbl-left" :click="turn(1, -1)"></a>
<a class="do-icon-left prev-month" :click="turn(0, -1)"></a>
<a class="do-icon-right next-month" :click="turn(0, 1)"></a>
<a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a>
<span
title="双击回到今天"
:dblclick="back2today"
:text="calendar.year + '-' + numberFormat(calendar.month)"></span>
</dt>
@ -186,25 +187,21 @@ export default Anot.component('datepicker', {
<a href="javascript:;" class="now" :click="now">现在</a>
</dd>
<dt class="confirm">
<a href="javascript:;" :click="close" class="cancel">取消</a>
<a href="javascript:;" :click="onConfirm" class="ok">确定</a>
<a :click="close" class="cancel">取消</a>
<a :click="onConfirm" class="ok">确定</a>
</dt>
<dd class="tips" :if="tips" :text="tips"></dd>
</dl>
</div>`
},
construct: function(props, state) {
if (!props.hasOwnProperty('key')) {
return Anot.error('日历组件必须设置key属性')
}
// 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
if (!props.showTime && !props.format) {
props.format = 'Y-m-d'
}
//获取初始值
let defVal = props.value
let defVal = props.hostPush || null
if (!defVal) {
if (props.minDate) {
defVal = props.minDate
@ -213,9 +210,10 @@ export default Anot.component('datepicker', {
}
}
// 修正默认值, 如果不是Date对象, 则转为Date对象
if (defVal && !Date.isDate(defVal)) {
defVal += ' GMT+8000'
if (defVal) {
if (!Date.isDate(defVal)) {
defVal = new Date(defVal)
}
} else {
defVal = new Date()
}
@ -245,7 +243,8 @@ export default Anot.component('datepicker', {
state.max.month = props.maxDate.getMonth() + 1
state.max.day = props.maxDate.getDate()
}
if (props.value) {
if (props.hostPush) {
state.last = {
year: defVal.getFullYear(),
month: defVal.getMonth() + 1,
@ -268,17 +267,17 @@ export default Anot.component('datepicker', {
//移除部分属性
delete props.minDate
delete props.maxDate
delete props.value
delete props.hostPush
delete props.disabled
},
componentWillMount: function() {
this.resetCalendarTable()
this.$push(this.value)
},
componentDidMount: function() {
if (typeof this.props.created === 'function') {
this.props.created(this)
}
document.addEventListener('click', () => {
this.close()
})
@ -345,7 +344,12 @@ export default Anot.component('datepicker', {
methods: {
// 重置日历表格
resetCalendarTable: function() {
let { max, min, calendar: { year, month }, last } = this
let {
max,
min,
calendar: { year, month },
last
} = this
this.calendar.day = 0
this.calendar.list.clear()
this.calendar.list.pushArray(
@ -375,7 +379,11 @@ export default Anot.component('datepicker', {
},
// 切换上/下 年/月
turn: function(isYear, step) {
let { calendar: { year, month }, max, min } = this
let {
calendar: { year, month },
max,
min
} = this
if (isYear === 1) {
year += step
@ -439,11 +447,13 @@ export default Anot.component('datepicker', {
onConfirm: function() {
this.updateTime()
this.close()
this.$push(this.value)
if (
this.calendar.day > 0 &&
typeof this.props.onDatePicked === 'function'
) {
this.props.onDatePicked(this.props.key, this.value, this.last.pick)
// 返回一个格式化后的值和一个Date对象
this.props.onDatePicked(this.value, this.last.pick)
}
}
}

25
src/js/datepicker/style.scss
View File

@ -5,7 +5,8 @@
* @date 2016-02-14 14:00:06
*
*/
@import 'var.scss';
@import "var.scss";
.do-datepicker { position:relative;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
&.mini {width:155px;height:30px;line-height:30px;}
@ -26,7 +27,6 @@
&[disabled] {background:#f7f8fb;cursor:not-allowed;}
}
.icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3);
&::after {content:"\e650"}
}
}
.calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cgr, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
@ -35,24 +35,17 @@
dt.contrl {position:relative; width:100%; height:35px; margin:5px 0 0;border-radius:3px;color:#fff;
a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;
a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;cursor:pointer;
&::before {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
&::after {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
&:active {font-weight:bold;
&::before {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
&::after {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
}
&::after {content:"\e692";}
&.prev-month {left:35px;
&::after {content:"\e67c"}
}
&.next-month {left:auto; right:35px;
&::after {content:"\e66e"}
}
&.next-year {left:auto; right:0;
&::after {content:"\e694"}
}
&.prev-month {left:35px;}
&.next-month {left:auto; right:35px;}
&.next-year {left:auto; right:0;}
}
}
@ -92,7 +85,7 @@
dt.confirm { position:relative; width:100%; height:41px; padding:10px 0 0;line-height:30px; border-top:1px solid #eee; text-align:right;
.ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;}
.ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;cursor:pointer;}
.ok { background:nth($ct, 1); color:#fff;
&:hover { background:nth($ct, 2); }