vue3.x + typescript搜索框

对于Vue 3.x和TypeScript的搜索框，你可以按照以下步骤来实现：

1. 首先，安装Vue 3.x和TypeScript的依赖：

npm install vue@next
npm install vue-router@next
npm install typescript

2. 在你的Vue项目中创建一个搜索组件(Search.vue)，并在该组件中添加一个输入框和搜索按钮：

<template>
  <div>
    <input type="text" v-model="searchTerm" placeholder="请输入搜索内容" />
    <button @click="search">搜索</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      searchTerm: '',
    };
  },
  methods: {
    search() {
      // 在这里执行搜索逻辑
      console.log('搜索内容:', this.searchTerm);
    },
  },
});
</script>

3. 在需要使用搜索组件的页面中，引入并使用该组件：

<template>
  <div>
    <Search />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Search from './Search.vue';

export default defineComponent({
  components: {
    Search,
  },
});
</script>

你可以根据自己的需求在搜索按钮的点击事件(search方法)中添加具体的搜索逻辑。同时，你可以通过v-model指令绑定输入框的值到searchTerm变量中，以便在搜索方法中使用。

希望这个简单的例子能帮助到你！如果有任何问题，请随时提问。