如何完整引入element ui并使用element ui中的搜索框

一、安装

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

四、效果