【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）、以及已有iconfont.css怎么添加新的图标

在使用Element UI的密码框时，可以通过插入图标来实现睁眼和闭眼的效果。这里我们使用了阿里巴巴的Icons Front图标库，并结合Vue框架。

首先，在你的Vue项目中安装并引入Icons Front：

npm install @ant-design/icons-vue --save

然后，在你的组件中使用这些图标：

<template>
  <el-input
    v-model="password"
    :type="passwordVisible ? 'text' : 'password'"
    placeholder="请输入密码"
    suffix-icon="el-icon-view"
    @suffix-click="togglePasswordVisibility"
  >
    <template #suffix>
      <i v-if="passwordVisible" class="iconfont icon-yanjing"></i>
      <i v-else class="iconfont icon-yincang"></i>
    </template>
  </el-input>
</template>
 
<script>
import { ElInput } from 'element-ui';
import { ref } from 'vue';
 
export default {
  components: {
    ElInput,
  },
  setup() {
    const password = ref('');
    const passwordVisible = ref(false);
 
    const togglePasswordVisibility = () => {
      passwordVisible.value = !passwordVisible.value;
    };
 
    return {
      password,
      passwordVisible,
      togglePasswordVisibility,
    };
  },
};
</script>

在这个例子中，我们使用了el-input组件的suffix-icon属性来设置密码框的后缀图标，并且通过@suffix-click事件来切换密码的可见性。同时，我们使用了<template #suffix>来插入自定义的图标，这些图标是使用Icons Front图标库的类名。

请确保你已经在项目中正确引入了阿里巴巴图标库的CSS文件，并且正确使用了图标的类名。这样，你就可以在Element UI的密码框中实现一个可以切换显示密码和隐藏密码的效果了。