如何完整引入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

四、效果