写一个带有搜索下拉列表的vue弹窗

这里提供一个简单的带有搜索下拉列表的vue弹窗实现，基于Element UI组件库。

首先安装Element UI：

npm install element-ui --save

然后在需要使用弹窗的组件中引入Element UI和CSS文件：

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹窗</el-button>
    <el-dialog title="弹窗标题" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form>
        <el-form-item label="下拉列表">
          <el-autocomplete
            v-model="selectedItem"
            :fetch-suggestions="querySearch"
            placeholder="请输入关键词"
            :trigger-on-focus="false"
            :custom-item="createNewItem"
            popper-class="dialog-autocomplete"
          >
            <template slot-scope="{ item }">
              <div class="dialog-autocomplete-item">{{ item.label }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!selectedItem" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Autocomplete, Dialog, Button, Form, FormItem } from 'element-ui'

export default {
  components: {
    ElAutocomplete: Autocomplete,
    ElDialog: Dialog,
    ElButton: Button,
    ElForm: Form,
    ElFormItem: FormItem
  },

  data() {
    return {
      dialogVisible: false,
      selectedItem: null,
      suggestions: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橙子' },
        { value: 'grape', label: '葡萄' }
      ]
    }
  },

  methods: {
    querySearch(queryString, cb) {
      const results = queryString ? this.suggestions.filter(this.createFilter(queryString)) : this.suggestions
      cb(results)
    },

    createFilter(queryString) {
      return item => {
        return item.label.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
      }
    },

    createNewItem(queryString) {
      return {
        value: queryString,
        label: `添加 "${queryString}"`
      }
    },

    showDialog() {
      this.dialogVisible = true
    },

    handleConfirm() {
      console.log('您选择的是：', this.selectedItem)
      this.dialogVisible = false
    }
  }
}
</script>

<style>
.dialog-footer {
  padding: 20px;
  text-align: right;
}

.dialog-autocomplete {
  width: 100%;
}

.dialog-autocomplete-item {
  padding: 5px;
  font-size: 14px;
}
</style>

在这个示例中，我们使用了Element UI的`el-dialog`、`el-form`和`el-autocomplete`组件来实现弹窗和下拉列表。`el-autocomplete`组件提供了下拉列表的搜索和自定义选项的功能，可以通过自定义`fetch-suggestions`、`custom-item`和`popper-class`等属性来实现。在弹窗的底部，我们使用`slot="footer"`来自定义按钮并绑定对应的方法。

以上代码只是一个简单的示例，可以根据实际需求进行修改和完善。