diff --git a/demo/demo.vue b/demo/demo.vue index 6651d24..facb223 100644 --- a/demo/demo.vue +++ b/demo/demo.vue @@ -11,6 +11,7 @@ :show-today="true" :show-weekend="true" @row-click="onClickRow" + @row-dbl-click="onDblClickRow" @move-slider="onMoveSlider" @add-link="onAddLink" @click-link="onClickLink" @@ -190,6 +191,10 @@ const onClickRow = (data: any) => { console.log('click row', data); }; +const onDblClickRow = (data: any) => { + console.log('dblclick row', data); +}; + const onMoveSlider = (data: any) => { console.log('move slider', data); }; diff --git a/src/components/common/Row.vue b/src/components/common/Row.vue index 2813d53..c78273c 100644 --- a/src/components/common/Row.vue +++ b/src/components/common/Row.vue @@ -22,7 +22,6 @@ @mouseenter.capture="onEnter" @mouseleave="onLeave" @click="onClick" - @dblclick="onDblClick" > @@ -52,14 +51,27 @@ function onLeave() { $param.hoverItem = null; } -const { EmitRowClick } = useEvent(); +const { EmitRowClick, EmitRowDblClick } = useEvent(); +let clicks = 0; +const delay = 300; +let timer: any = null; function onClick() { - $param.selectItem = props.data ?? null; - EmitRowClick(props.data?.data); -} + clicks++; + if (clicks === 1) { + // click + timer = setTimeout(() => { + clicks = 0; + }, delay); + + $param.selectItem = props.data ?? null; + EmitRowClick(props.data?.data); + } else { + // dbl-click + clearTimeout(timer); + clicks = 0; -function onDblClick() { - // 抛出 data + EmitRowDblClick(props.data?.data); + } } diff --git a/src/composables/useEvent.ts b/src/composables/useEvent.ts index 150f8ae..f6d187b 100644 --- a/src/composables/useEvent.ts +++ b/src/composables/useEvent.ts @@ -18,10 +18,22 @@ export default () => { } // (e: 'row-dbl-click', data: any): void; + /** + * 双击行事件 + * @param row 该行的原始数据 + */ + function EmitRowDblClick(row: any) { + rootEmit.value?.('row-dbl-click', toRaw(row)); + } + // (e: 'row-checked', state: boolean, data: any): void; - // (e: 'move-slider', { row: any; old: { start: Date; end: Date } }[]): void; - // (e: 'move-progress', data: any, old: number): void; - // (e: 'no-date-error'): void; + /** + * 选择行事件 checkbox + * @param row 该行的原始数据 + */ + function EmitRowChecked(row: any) { + rootEmit.value?.('row-checked', toRaw(row)); + } /** * 移动滑块事件 @@ -47,9 +59,14 @@ export default () => { rootEmit.value?.('add-link', data); } + // (e: 'move-progress', data: any, old: number): void; + // (e: 'no-date-error'): void; + return { setRootEmit, EmitRowClick, + EmitRowDblClick, + EmitRowChecked, EmitMoveSlider, EmitAddLink };