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

这里提供一个简单的带有搜索下拉列表的vue弹窗实现，基于Element UI组件库。 首先安装Element UI： ``` npm install element-ui --save ``` 然后在需要使用弹窗的组件中引入Element UI和CSS文件： ```vue <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"`来自定义按钮并绑定对应的方法。 以上代码只是一个简单的示例，可以根据实际需求进行修改和完善。