elementui的icon怎么放在输入框的左侧使用

要在 ElementUI 的输入框左侧使用 icon，可以在 el-input 组件中使用 prefix 属性，例如：

<el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>

其中，prefix-icon 属性用来设置 icon 的样式，可以使用 ElementUI 中提供的图标样式，也可以使用自定义的图标样式。如果需要自定义图标样式，可以通过 CSS 来实现：

.el-input__prefix .el-icon-custom {
  font-size: 16px;
  color: #999;
}

.el-input__prefix .el-icon-custom:hover {
  color: #333;
}

然后在 el-input 中使用自定义的图标样式：

<el-input placeholder="请输入内容" prefix-icon="el-icon-custom"></el-input>

相关问题

elementui 复合型输入框查询

可以使用 ElementUI 的 el-input 组件结合 el-select 组件来实现复合型输入框查询。具体实现方法如下：

<el-input v-model="inputValue" placeholder="请输入关键字" style="width: 200px;">
  <el-select v-model="selectValue" slot="prepend" placeholder="请选择">
    <el-option label="选项1" value="1"></el-option>
    <el-option label="选项2" value="2"></el-option>
    <el-option label="选项3" value="3"></el-option>
  </el-select>
  <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
</el-input>

其中，el-input 组件的 v-model 绑定输入框的值，el-select 组件的 v-model 绑定下拉框的值，el-button 组件的 @click 绑定查询按钮的点击事件。

在 handleSearch 方法中，可以根据 inputValue 和 selectValue 的值进行查询操作。

点击事件放在elementui组件input输入框图标放大镜中

您可以在Input组件中使用slot来自定义输入框的前缀或后缀图标，然后在图标上绑定click事件即可实现点击事件。

以下是一个示例代码：

<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入内容" :prefix-icon="searchIcon">
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      searchIcon: 'el-icon-search'
    }
  },
  methods: {
    handleClick() {
      console.log('点击了搜索图标')
    }
  },
  mounted() {
    const icon = this.$el.querySelector('.el-input__prefix .el-icon-search')
    icon.addEventListener('click', this.handleClick)
  },
  beforeDestroy() {
    const icon = this.$el.querySelector('.el-input__prefix .el-icon-search')
    icon.removeEventListener('click', this.handleClick)
  }
}
</script>

在上面的代码中，我们定义了一个名为searchIcon的变量，它的值为'el-icon-search'，这是Element UI中的一个预定义图标。然后在Input组件上使用了prefix-icon属性来设置输入框的前缀图标为searchIcon。

在mounted钩子函数中，我们获取到了输入框前缀图标的DOM元素，然后为它添加了一个click事件，事件处理函数为handleClick。在beforeDestroy钩子函数中，我们移除了click事件的监听器，以防止内存泄漏。

当用户点击搜索图标时，会触发handleClick方法，从而打印出一条信息。您可以根据自己的需求修改handleClick方法来处理点击事件。