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

优化日期组件和弹窗组件的逻辑

old
宇天 2019-05-14 15:45:35 +08:00
parent ae25dd5d39
commit b417c19e22
2 changed files with 26 additions and 15 deletions

View File

@ -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 (

View File

@ -174,11 +174,13 @@ class __layer__ {
this.$refs.layer.classList.remove('scale') this.$refs.layer.classList.remove('scale')
}, 100) }, 100)
}, },
onMaskClick: function() { onMaskClick: function(ev) {
if (this.type < 4 && !this.maskClose) { if (ev.target === ev.currentTarget) {
this.shake() if (this.type < 4 && !this.maskClose) {
} else { this.shake()
this.maskClose && this.close() } else {
this.maskClose && this.close()
}
} }
}, },
handleConfirm: function() { handleConfirm: function() {
@ -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'