github
/
svelma-pro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

时间日期组件添加失去焦点关闭事件

This commit is contained in:
KeiferJu 2020-03-24 09:45:37 +08:00
parent 63bb497eb0
commit 813b4f9738
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Datepicker/DatePicker.svelte
View File

@ -138,6 +138,10 @@
date = e.detail.timeStamp date = e.detail.timeStamp
dispatch('dateChecked', e.detail) dispatch('dateChecked', e.detail)
} }
function windowClick(){
visible = false;
}
</script> </script>
<style> <style>
@ -202,13 +206,14 @@
box-shadow: none !important; box-shadow: none !important;
} */ } */
</style> </style>
<svelte:window on:click={windowClick}></svelte:window>
<div style="width: {width};position: relative"> <div style="width: {width};position: relative">
{#if !calendar} {#if !calendar}
{#if pickerRule === 'rangeChoice'} {#if pickerRule === 'rangeChoice'}
<div <div
style="position: relative;margin: 5px 0 0 0;" style="position: relative;margin: 5px 0 0 0;"
on:click={() => { on:click={(e) => {
e.stopPropagation()
visible = !visible visible = !visible
}}> }}>
<Input type="text" class={inputClass} bind:value={rangePickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" /> <Input type="text" class={inputClass} bind:value={rangePickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" />
@ -216,7 +221,8 @@
{:else} {:else}
<div <div
style="position: relative;margin: 5px 0 0 0;" style="position: relative;margin: 5px 0 0 0;"
on:click={() => { on:click={(e) => {
e.stopPropagation()
visible = !visible visible = !visible
}}> }}>
<Input type="text" class={inputClass} bind:value={pickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" /> <Input type="text" class={inputClass} bind:value={pickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" />
@ -225,7 +231,7 @@
{/if} {/if}
{/if} {/if}
{#if visible || calendar} {#if visible || calendar}
<div class={'calendar_' + theme} style="left: {left}"> <div class={'calendar_' + theme} style="left: {left}" on:click={(e)=>e.stopPropagation()}>
<Selector /> <Selector />
{#if $view === 'y'} {#if $view === 'y'}
<YearView /> <YearView />

11
src/components/Timepicker/TimePicker.svelte
View File

@ -132,6 +132,10 @@
} }
dispatch('timeChecked', data) dispatch('timeChecked', data)
} }
function windowClick(){
visible = false;
}
</script> </script>
<style> <style>
@ -199,9 +203,10 @@
line-height: 40px; line-height: 40px;
} */ } */
</style> </style>
<svelte:window on:click={windowClick}></svelte:window>
<div style="width: {width};position: relative"> <div style="width: {width};position: relative">
<div style="position: relative" on:click={() => { <div style="position: relative" on:click={(e) => {
e.stopPropagation()
visible = !visible visible = !visible
}} > }} >
<!-- <input <!-- <input
@ -216,7 +221,7 @@
<Input type="text" class={inputClass} bind:value={_time} readonly iconPack="fa" icon="{icon? 'clock': ''}" /> <Input type="text" class={inputClass} bind:value={_time} readonly iconPack="fa" icon="{icon? 'clock': ''}" />
</div> </div>
{#if visible} {#if visible}
<div class="touch-time-wrapper" style="left: {left}"> <div class="touch-time-wrapper" style="left: {left}" on:click={(e)=>e.stopPropagation()}>
<div class="touch-time">{_time}</div> <div class="touch-time">{_time}</div>
<div class="touch-time-picker"> <div class="touch-time-picker">
<Switcher type="hours" data={HOURS} selected={selectedHour} on:timeChange={timeChanged} } {hour12} /> <Switcher type="hours" data={HOURS} selected={selectedHour} on:timeChange={timeChanged} } {hour12} />