uni-app 如何引入 el-autocomplete 组件
时间: 2023-12-02 13:06:27 浏览: 197
要在 uni-app 中使用 el-autocomplete 组件,需要先安装 Element-UI 库。可以使用 npm 安装 Element-UI 库:
```
npm install element-ui -S
```
安装完成后,在 App.vue 中引入 Element-UI 库:
```vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
export default {
created() {
// 在应用的入口处引入 ElementUI
uni.use(ElementUI);
}
};
</script>
```
然后在需要使用 el-autocomplete 组件的页面中,直接按照 Element-UI 官方文档的方式使用即可:
```vue
<template>
<el-autocomplete
v-model="value"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
</template>
<script>
export default {
data() {
return {
value: '',
// 下拉框数据
suggestions: ['HTML', 'CSS', 'JavaScript']
};
},
methods: {
// 查询下拉框数据
querySearch(queryString, cb) {
const suggestions = this.suggestions.filter(item => {
return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
});
cb(suggestions);
}
}
};
</script>
```
注意,由于 uni-app 是跨端框架,要在 H5 等端中使用 Element-UI 库,需要在 `vue.config.js` 中进行相关配置。具体请参考 Element-UI 官方文档。
阅读全文