vue3之el-input附带有具有点击事件的图标

代码如下：

<el-input v-model="input" placeholder="搜索关键字" style="padding: 5px;" size="small" @keyup.enter="show">
	<!-- Input 插槽 详见：https://element-plus.gitee.io/zh-CN/component/input.html#input-%E5%B1%9E%E6%80%A7  -->
	<template #suffix>
		<!--   vue3图标使用方式  -->
		<el-icon class="el-input__icon">
			<component :is="Search" class="enter-sj" @click="show"></component>
		</el-icon>
	</template>
</el-input>

<script>
import {shallowRef} from 'vue'
import {Search} from '@element-plus/icons-vue'  // 通过这里引入图标样式
// 图标下载方式：
// # NPM
// $ npm install @element-plus/icons-vue
// # Yarn
// $ yarn add @element-plus/icons-vue
// # pnpm
// $ pnpm install @element-plus/icons-vue

export default {
  name: "Navigation",
  data() {
    return {
      input: '',
      Search: shallowRef(Search),
    }
  },
  methods: {
    show() {
      console.log(this.input);
    }
  }
}
</script>

<style scoped>

/*样式穿透*/
::v-deep .el-input__suffix:hover {
  cursor: pointer !important;
}

</style>

结果如下(因为上面代码只是一小部分，有些样式什么的就没放上去了)：