优化日期组件和弹窗组件的逻辑
parent
ae25dd5d39
commit
b417c19e22
|
@ -243,11 +243,11 @@ export default Anot.component('datepicker', {
|
||||||
<span class="td">五</span>
|
<span class="td">五</span>
|
||||||
<span class="td">六</span>
|
<span class="td">六</span>
|
||||||
</section>
|
</section>
|
||||||
<section class="tr do-fn-cl">
|
<section class="tr do-fn-cl" :click="pick">
|
||||||
<span class="td"
|
<span class="td"
|
||||||
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
|
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
|
||||||
:for="calendar.list"
|
:for="calendar.list"
|
||||||
:click="pick(el)"
|
:data-idx="$index"
|
||||||
:text="el.day"></span>
|
:text="el.day"></span>
|
||||||
</section>
|
</section>
|
||||||
</dd>
|
</dd>
|
||||||
|
@ -263,9 +263,9 @@ export default Anot.component('datepicker', {
|
||||||
</label>
|
</label>
|
||||||
<a href="javascript:;" class="now" :click="now">现在</a>
|
<a href="javascript:;" class="now" :click="now">现在</a>
|
||||||
</dd>
|
</dd>
|
||||||
<dt class="confirm">
|
<dt class="confirm" :if="props.showTime">
|
||||||
<a :click="close" class="cancel">取消</a>
|
<a :click="close" class="cancel">取消</a>
|
||||||
<a :click="onConfirm" class="ok">确定</a>
|
<a :click="confirmPick" class="ok">确定</a>
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="tips" :if="tips" :text="tips"></dd>
|
<dd class="tips" :if="tips" :text="tips"></dd>
|
||||||
</dl>`
|
</dl>`
|
||||||
|
@ -411,13 +411,22 @@ export default Anot.component('datepicker', {
|
||||||
this.calendar.month = month
|
this.calendar.month = month
|
||||||
this.resetCalendarTable()
|
this.resetCalendarTable()
|
||||||
},
|
},
|
||||||
pick: function(item) {
|
pick: function(ev) {
|
||||||
|
if (ev.target === ev.currentTarget) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let item = this.calendar.list[ev.target.dataset.idx]
|
||||||
|
|
||||||
if (item.disabled) {
|
if (item.disabled) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
this.calendar.day = item.day
|
this.calendar.day = item.day
|
||||||
changeStyle(this.calendar, item.day)
|
changeStyle(this.calendar, item.day)
|
||||||
|
|
||||||
|
if (!this.props.showTime) {
|
||||||
|
this.confirmPick()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
updateTime: function() {
|
updateTime: function() {
|
||||||
let { year, month, day, hour, minute, second } = this.calendar
|
let { year, month, day, hour, minute, second } = this.calendar
|
||||||
|
@ -449,7 +458,7 @@ export default Anot.component('datepicker', {
|
||||||
close: function() {
|
close: function() {
|
||||||
this.showCalendar = false
|
this.showCalendar = false
|
||||||
},
|
},
|
||||||
onConfirm: function() {
|
confirmPick: function() {
|
||||||
this.updateTime()
|
this.updateTime()
|
||||||
this.close()
|
this.close()
|
||||||
if (
|
if (
|
||||||
|
|
|
@ -174,12 +174,14 @@ class __layer__ {
|
||||||
this.$refs.layer.classList.remove('scale')
|
this.$refs.layer.classList.remove('scale')
|
||||||
}, 100)
|
}, 100)
|
||||||
},
|
},
|
||||||
onMaskClick: function() {
|
onMaskClick: function(ev) {
|
||||||
|
if (ev.target === ev.currentTarget) {
|
||||||
if (this.type < 4 && !this.maskClose) {
|
if (this.type < 4 && !this.maskClose) {
|
||||||
this.shake()
|
this.shake()
|
||||||
} else {
|
} else {
|
||||||
this.maskClose && this.close()
|
this.maskClose && this.close()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
handleConfirm: function() {
|
handleConfirm: function() {
|
||||||
if (this.type === 3) {
|
if (this.type === 3) {
|
||||||
|
@ -206,10 +208,10 @@ class __layer__ {
|
||||||
},
|
},
|
||||||
close: function() {
|
close: function() {
|
||||||
close(this.$id)
|
close(this.$id)
|
||||||
},
|
|
||||||
cancelBubble: function(ev) {
|
|
||||||
ev.cancelBubble = true
|
|
||||||
}
|
}
|
||||||
|
// cancelBubble: function(ev) {
|
||||||
|
// ev.cancelBubble = true
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
if (typeof this.props.success === 'function') {
|
if (typeof this.props.success === 'function') {
|
||||||
|
@ -279,7 +281,7 @@ class __layer__ {
|
||||||
}
|
}
|
||||||
|
|
||||||
layBox.setAttribute('ref', 'layer')
|
layBox.setAttribute('ref', 'layer')
|
||||||
layBox.setAttribute(':click', 'cancelBubble')
|
// layBox.setAttribute(':click', 'cancelBubble')
|
||||||
|
|
||||||
// 暂时隐藏,避免修正定位时,能看到闪一下
|
// 暂时隐藏,避免修正定位时,能看到闪一下
|
||||||
layBox.style.cssText += 'border-radius:' + state.radius + 'px'
|
layBox.style.cssText += 'border-radius:' + state.radius + 'px'
|
||||||
|
|
Reference in New Issue