点击按钮跳出一个输入框，要求输入框弹出时就可以直接输入，无需点击，vue3代码实现，<script setup>

在Vue3中，你可以通过`<v-model>`指令以及`ref`来创建一个动态的输入框，并使用自定义事件或者`@click`修饰符来实现点击按钮时输入框自动聚焦并显示。这里是一个简单的示例：

<template>
  <div>
    <button @click="showInput">点击展开输入框</button>
    <input ref="input" v-if="isInputVisible" type="text" v-model="inputValue" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const isInputVisible = ref(false); // 输入框是否可见的布尔值

function showInput() {
  isInputVisible.value = true; // 当点击按钮时，设置输入框可见
}

onMounted(() => {
  // 如果你希望输入框一加载就显示，可以初始化isInputVisible为true
  // isInputVisible.value = true;
});

// 记录用户的输入值
const inputValue = ref('');

// 用户停止输入后，再次点击按钮会隐藏输入框
onBeforeUnmount(() => {
  isInputVisible.value = false;
});
</script>

在这个例子中，当用户点击按钮时，`isInputVisible`会被设为`true`，使得`<input>`元素显示出来并且其内容由`v-model`控制。当页面卸载前，我们确保输入框被隐藏。