diff --git a/package/component/src/component/datePicker/index.vue b/package/component/src/component/datePicker/index.vue index 75050771..1dd0597e 100644 --- a/package/component/src/component/datePicker/index.vue +++ b/package/component/src/component/datePicker/index.vue @@ -4,7 +4,7 @@ diff --git a/package/component/src/component/input/index.vue b/package/component/src/component/input/index.vue index 27875ae9..c3650b54 100644 --- a/package/component/src/component/input/index.vue +++ b/package/component/src/component/input/index.vue @@ -13,7 +13,6 @@ import { useI18n } from "../../language"; export interface LayInputProps { name?: string; type?: string; - value?: string; prefixIcon?: string; suffixIcon?: string; modelValue?: string; @@ -46,13 +45,13 @@ const emit = defineEmits(); const { t } = useI18n(); const slots = useSlots(); -const currentValue = ref(String(props.modelValue)); +const currentValue = ref(String(props.modelValue == null ? '' : props.modelValue)); const hasContent = computed(() => (props.modelValue as string)?.length > 0); watch( () => props.modelValue, () => { - currentValue.value = String(props.modelValue); + currentValue.value = String(props.modelValue == null ? '' : props.modelValue); } ); diff --git a/package/component/src/component/textarea/index.less b/package/component/src/component/textarea/index.less index 63714fb4..111fe9f3 100644 --- a/package/component/src/component/textarea/index.less +++ b/package/component/src/component/textarea/index.less @@ -17,6 +17,11 @@ min-height: 100px; padding: 6px 10px; resize: vertical; + position: relative; +} + +.layui-textarea-wrapper { + position: relative; } .layui-textarea:hover { @@ -27,6 +32,13 @@ border-color: #d2d2d2 !important; } +.layui-textarea-clear { + position: absolute; + color: rgba(0, 0, 0, 0.45); + right: 10px; + top: 10px; +} + .layui-textarea::-webkit-input-placeholder { line-height: 1.3; } diff --git a/package/component/src/component/textarea/index.vue b/package/component/src/component/textarea/index.vue index 28930b48..097697d5 100644 --- a/package/component/src/component/textarea/index.vue +++ b/package/component/src/component/textarea/index.vue @@ -14,28 +14,49 @@ export interface LayTextareaProps { placeholder?: string; disabled?: boolean; showCount?: boolean; + allowClear?: boolean; } const props = defineProps(); -const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]); +interface TextareaEmits { + (e: "blur", event: Event): void; + (e: "input", event: Event): void; + (e: "update:modelValue", value: string): void; + (e: "change", event: Event): void; + (e: "focus", event: Event): void; + (e: "clear"): void; +} + +const emit = defineEmits(); const attrs = useAttrs(); -const onInput = function (event: InputEvent) { +const onInput = function (event: Event) { const inputElement = event.target as HTMLInputElement; emit("update:modelValue", inputElement.value); - emit("input", inputElement.value); + emit("input", event); }; -const onFocus = function (event: FocusEvent) { +const onFocus = function (event: Event) { emit("focus", event); }; -const onBlur = function () { - emit("blur"); +const onBlur = function (event: Event) { + emit("blur", event); }; +const onChange = (event: Event) => { + emit("change", event); +}; + +const onClear = function () { + emit("update:modelValue", ""); + emit("clear"); +}; + +const hasContent = computed(() => (props.modelValue as string)?.length > 0); + const wordCount = computed(() => { let count = String(props.modelValue?.length ?? 0); if (attrs.maxlength) { @@ -46,19 +67,25 @@ const wordCount = computed(() => { diff --git a/package/document-component/src/document/zh-CN/components/datePicker.md b/package/document-component/src/document/zh-CN/components/datePicker.md index 1ffd1fe4..3855c091 100644 --- a/package/document-component/src/document/zh-CN/components/datePicker.md +++ b/package/document-component/src/document/zh-CN/components/datePicker.md @@ -14,7 +14,6 @@ ::: demo @@ -41,7 +40,6 @@ export default { ::: demo @@ -68,7 +66,6 @@ export default { ::: demo @@ -95,7 +92,6 @@ export default { ::: demo @@ -122,7 +118,6 @@ export default { ::: demo @@ -198,10 +193,7 @@ export default { ::: title 一次性选择 ::: -::: describe 只需要点击一次后自动关闭,无需点击确认按钮 -::: - -::: demo +::: demo 只需要点击一次后自动关闭,无需点击确认按钮