一、安装
npm i element-ui
二、在 main.js 中配置 element 组件库
// 加载 element 组件库
import ElementUI from 'element-ui'
// 加载 element 组件库的样式
import 'element-ui/lib/theme-chalk/index.css'
// 全局注册 element 组件库
Vue.use(ElementUI)
三、在页面中使用
<template>
<el-input
type="text"
prefix-icon="el-icon-search"
v-model="searchText"
placeholder="请输入"
style="width: 270px; cursor: pointer"
@enter="handleSearch"
></el-input>
</template>
<script>
export default{
data() {
return {
searchText: '',
};
},
methods: {
handleSearch() {
console.log('搜索内容：', this.searchText);
},
},
}
</script>
通过 v-model 双向绑定 searchText 变量的值，在 @enter 事件中监听回车键事件，当用户按下回车键时，会触发 handleSearch 方法。
另外，el-input 组件还提供了许多其他属性和事件，如 size、maxlength、clearable、on-icon-click 等，可根据需要进行配置。
除了 el-input，Element UI 还提供了更高级的搜索框组件 el-autocomplete。 更多信息可以查阅官方文档：组件|Element文章来源：https://www.toymoban.com/news/detail-841401.html
四、效果
文章来源地址https://www.toymoban.com/news/detail-841401.html
到了这里，关于如何完整引入element ui并使用element ui中的搜索框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
