38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
defineProps({
|
|
modelValue: String,
|
|
});
|
|
|
|
defineEmits(['update:modelValue']);
|
|
|
|
const input = ref(null);
|
|
|
|
// onMounted(() => {
|
|
// if (input.value.hasAttribute('autofocus')) {
|
|
// input.value.focus();
|
|
// }
|
|
// });
|
|
|
|
defineExpose({ focus: () => input.value.focus() });
|
|
</script>
|
|
|
|
<template>
|
|
<form>
|
|
<div class="flex items-center justify-center">
|
|
<div class="flex border-2 rounded">
|
|
<input type="text" class="px-4 py-2 w-80"
|
|
:value="modelValue"
|
|
@input="$emit('update:modelValue', $event.target.value)" placeholder="Search...">
|
|
<button class="flex items-center justify-center px-4 border-l bg-slate-500">
|
|
<svg class="w-6 h-6 text-white" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template> |