前端el-input输入框实现有内容显示清除输入内容按钮

在 ElementUI 中，可以通过clearable属性或自定义图标实现输入框带删除按钮的功能。方法一：使用clearable属性ElementUI 的el-input组件提供了clearable属性，直接启用即可显示默认的清除按钮：el-input v-model="query" placeholder="请输入内容" clearable size="small" /el-input当输入框有内容时，会自动显示清除按钮。点击按钮即可清空输入框内容。可通过clear-icon自定义清除图标。方法二：使用suffix-icon或prefix-icon自定义图标如果希望在输入框尾部显示搜索或删除图标，可以使用suffix-icon：el-input v-model="query" placeholder="可查询内容" clearable suffix-icon="el-icon-search" @keyup.enter.n