vue3+Element-Plus密码框小眼睛显示

思路：给输入框右侧一个插槽，内容为icon图标，通过点击图标控制输入框的类型来达到密码显示与否的效果

1、template中

<el-input v-model="password" :type="addPassFlag ? 'text' : 'password'" placeholder="请输入密码">
	<template #suffix>
		<span @click="addPassFlag = !addPassFlag">
			<el-icon v-if="addPassFlag"><View /></el-icon>
			<el-icon v-else><Hide /></el-icon>
		</span>
	</template>
</el-input>

2、script标签中

import { View, Hide} from '@element-plus/icons-vue';
const passFlag=ref(false)//输入框类型标识
const addPassFlag=ref(false)//图标显示标识
const password=ref()//密码