From 86231876caec931dd9956f2b017a993d12dd25ae Mon Sep 17 00:00:00 2001 From: mrundef Date: Fri, 27 Aug 2021 16:23:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20[date-picker]=20=E5=A4=8D=E7=94=A8input?= =?UTF-8?q?/icon=E7=BB=84=E4=BB=B6=E7=BB=91=E5=AE=9A=E8=BE=93=E5=85=A5?= =?UTF-8?q?=EF=BC=8C=E5=8F=96=E6=B6=88=E5=B1=95=E7=A4=BA=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/date-picker/date-picker.scss | 56 +++++++++++--- devui/date-picker/date-picker.tsx | 104 ++++++++++++++------------ devui/date-picker/helper.ts | 2 + devui/date-picker/utils.ts | 2 +- sites/components/date-picker/index.md | 80 +++----------------- 5 files changed, 116 insertions(+), 128 deletions(-) diff --git a/devui/date-picker/date-picker.scss b/devui/date-picker/date-picker.scss index a577a993..60bc5249 100644 --- a/devui/date-picker/date-picker.scss +++ b/devui/date-picker/date-picker.scss @@ -4,17 +4,51 @@ $cell-font-size: 13px; $border-width: 1px; $border-style: solid; $border-color: #dddddd; +$input-border-color: #0066cc; .devui-datepicker-container { - margin: 0; - padding: 0; - position: relative; - display: inline-block; - border-width: $border-width; - border-style: $border-style; - border-color: $border-color; - border-radius: $devui-border-radius-card; - box-shadow: $devui-shadow-length-base $devui-shadow; - background-color: $devui-base-bg; - font-size: $cell-font-size; + .input-container { + border: 1px solid $input-border-color; + border-radius: $devui-border-radius; + display: flex; + flex-direction: row; + width: 200px; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + position: relative; + } + + .datepicker-input { + position: relative; + width: 100%; + + input { + border: 0 solid #000000; + outline: none; + margin-right: 20px; + } + } + + .datepicker-input-icon { + position: absolute; + z-index: 9; + right: 6px; + } + + .devui-datepicker-panel { + border: 1px solid #000000; + margin: 0; + padding: 0; + display: inline-block; + border-width: $border-width; + border-style: $border-style; + border-color: $border-color; + border-radius: $devui-border-radius-card; + box-shadow: $devui-shadow-length-base $devui-shadow; + background-color: $devui-base-bg; + font-size: $cell-font-size; + position: absolute; + z-index: 99; + } } diff --git a/devui/date-picker/date-picker.tsx b/devui/date-picker/date-picker.tsx index e6a66364..e86e834e 100644 --- a/devui/date-picker/date-picker.tsx +++ b/devui/date-picker/date-picker.tsx @@ -1,15 +1,15 @@ -import type { UnwrapRef } from 'vue' -import { defineComponent, reactive, onMounted } from 'vue' -import { invokeFunction } from './utils' +import { onUnmounted, UnwrapRef } from 'vue' +import { defineComponent, reactive, onMounted, ref } from 'vue' +import { invokeFunction, isIn } from './utils' import { compareDateSort } from './components/utils' -import Popup from './components/popup' +import { Input } from '../input' +import { Icon } from '../icon' import { TState, handleCalendarSwitchState, formatValue, formatPlaceholder, - getAttachInputDom, } from './helper' import Calendar from './components/calendar' @@ -17,17 +17,6 @@ import Calendar from './components/calendar' import './date-picker.scss' import { parseDate } from './components/utils' -const formatProps = (props: any): TState => { - const state: TState = { - range: !!props.range, - show: false, - input: props.attachInputDom, - } - state.current = parseDate(props.dateMin) || new Date() - state.next = new Date(state.current.getFullYear(), state.current.getMonth() + 1, 1) - return state -} - const formatRange = (state: UnwrapRef) => { const [start, end] = [state.start, state.end].sort((a, b) => a.getTime() - b.getTime()) @@ -63,42 +52,59 @@ export default defineComponent({ }, setup(props, ctx) { - const state = reactive(formatProps(props)) + const panel = ref(null) + const input = ref(null) + + const current = parseDate(props.dateMin) || new Date() + const next = new Date(current.getFullYear(), current.getMonth() + 1, 1) + + + const state = reactive({ + show: false, + value: '', + placeholder: formatPlaceholder(props), + current, + next, + }) - // 绑定层显示值、placehoder值设置 - const setBindingDom = (el: any = getAttachInputDom(props)) => { + state.value = formatValue(state, props) + state.placeholder = formatPlaceholder(props) - const value = formatValue(state, props) - const placeholder = formatPlaceholder(props) + const documentClick = (e: MouseEvent) => { + e.stopPropagation() - // 判断节点原生DOM类型 - // 对input节点的值处理 - if (el instanceof HTMLInputElement) { - // 设置水印文字 - el.placeholder = placeholder - // 设置显示值 - el.value = value - return el.value + if( + isIn(e.target as Node, panel.value) + || isIn(e.target as Node, input.value) + ) { + return } - return value + state.show = false } onMounted(() => { - setBindingDom() + document.addEventListener('click', documentClick) + }) + + onUnmounted(() => { + document.removeEventListener('click', documentClick) }) return () => { return ( - state.show = true} - onClosed={() => { - state.show = false - }} - > -
- +
+ state.show = true } + /> + +
+
+ {state.show ? { - const output = setBindingDom() - invokeFunction(props.selectedDateChange, output) + onChange={(type, config) => { + state.value = formatValue(state, props) + state.placeholder = formatPlaceholder(props) + invokeFunction(props.selectedDateChange, state.value) if (props.autoClose) { state.show = false } @@ -122,8 +129,9 @@ export default defineComponent({ onToday={(date: Date) => { state.current = date state.start = date - const output = setBindingDom() - invokeFunction(props.selectedDateChange, output) + state.value = formatValue(state, props) + state.placeholder = formatPlaceholder(props) + invokeFunction(props.selectedDateChange, state.value) if (props.autoClose) { state.show = false } @@ -144,9 +152,9 @@ export default defineComponent({ onPreviousMonth={(date: Date, pos: number) => handleCalendarSwitchState(state, 1, pos, date)} onNextMonth={(date: Date, pos: number) => handleCalendarSwitchState(state, 2, pos, date)} onNextYear={(date: Date, pos: number) => handleCalendarSwitchState(state, 3, pos, date)} - /> + /> : null}
- +
) } } diff --git a/devui/date-picker/helper.ts b/devui/date-picker/helper.ts index 5b002481..47baf8fa 100644 --- a/devui/date-picker/helper.ts +++ b/devui/date-picker/helper.ts @@ -10,6 +10,8 @@ export type TState = { hover?: Date show?: boolean input?: string + value?: string + placeholder?: string } /** diff --git a/devui/date-picker/utils.ts b/devui/date-picker/utils.ts index 0c671520..9400fc5f 100644 --- a/devui/date-picker/utils.ts +++ b/devui/date-picker/utils.ts @@ -52,7 +52,7 @@ export const formatRange = (fmt: string, a: Date, b: Date, conn = '-') => { * @param b * @returns */ -export const isIn = (a: Node | null, b: Node | null) => { +export const isIn = (a: Node | null, b: any) => { if (!b) { return false } diff --git a/sites/components/date-picker/index.md b/sites/components/date-picker/index.md index 3501f359..0a0ff6e3 100644 --- a/sites/components/date-picker/index.md +++ b/sites/components/date-picker/index.md @@ -70,20 +70,26 @@ export default defineComponent({ 日期、时间可视化输入。 -### 作为UI组件 +### 最简应用 ---------- +
+ +
+```jsx + +``` -#### 最简 +### 自动关闭
- +
```jsx - + ``` + #### 区域选择
@@ -112,41 +118,9 @@ export default defineComponent({ ``` - -### 绑定原生`` - -暂定通过`querySelector`查找节点，绑定真实`dom`节点。此方案待定。 - -```jsx - - -``` - -
- - -
- - -```jsx - - -``` +### 自定义分隔符
-