|
@@ -19,9 +19,10 @@
|
|
|
@input="$event => handleInput($event)"
|
|
|
@focus="$event => handleFocus($event)"
|
|
|
@blur="$event => handleBlur($event)"
|
|
|
- @change="$event => emit('change', $event)"
|
|
|
+ @change="$event => emit('change', ($event.target as HTMLInputElement).value)"
|
|
|
@keydown.enter="$event => emit('enter', $event)"
|
|
|
/>
|
|
|
+ <div v-if="clearable && value" v-show="focused" @click="handleClear" class="clear"></div>
|
|
|
<span class="suffix">
|
|
|
<slot name="suffix"></slot>
|
|
|
</span>
|
|
@@ -37,21 +38,24 @@ withDefaults(
|
|
|
disabled?: boolean
|
|
|
placeholder?: string
|
|
|
simple?: boolean
|
|
|
+ clearable?: boolean
|
|
|
}>(),
|
|
|
{
|
|
|
disabled: false,
|
|
|
placeholder: "",
|
|
|
- simple: false
|
|
|
+ simple: false,
|
|
|
+ clearable: false
|
|
|
}
|
|
|
)
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
(event: "update:value", payload: string): void
|
|
|
(event: "input", payload: Event): void
|
|
|
- (event: "change", payload: Event): void
|
|
|
+ (event: "change", payload: string): void
|
|
|
(event: "blur", payload: Event): void
|
|
|
(event: "focus", payload: Event): void
|
|
|
(event: "enter", payload: Event): void
|
|
|
+ (event: "clear"): void
|
|
|
}>()
|
|
|
|
|
|
const focused = ref(false)
|
|
@@ -68,6 +72,12 @@ const handleFocus = (e: Event) => {
|
|
|
emit("focus", e)
|
|
|
}
|
|
|
|
|
|
+function handleClear() {
|
|
|
+ emit("update:value", "")
|
|
|
+ emit("change", "")
|
|
|
+ emit("clear")
|
|
|
+}
|
|
|
+
|
|
|
const inputRef = ref<HTMLInputElement>()
|
|
|
const focus = () => {
|
|
|
if (inputRef.value) inputRef.value.focus()
|
|
@@ -87,6 +97,22 @@ defineExpose({
|
|
|
transition: border-color 0.25s;
|
|
|
font-size: 13px;
|
|
|
display: flex;
|
|
|
+ &:not(.disabled):hover {
|
|
|
+ .clear {
|
|
|
+ display: initial !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clear {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("./imgs/clear.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
input {
|
|
|
min-width: 0;
|