前言
我是个搞Android的，最近开始学习一些网页开发的内容，我发现一个问题就是大多数网页开发人员都是会使用一些第三方UI插件例如：Element UI、Muse-UI、Vant等，这些UI插件给我们提供了许多好用美观的UI，我们在开发中使用这些UI插件可以很快速的实现一些美观的UI，非常的爽，当我正在愉快的开发时 ，忽然发现 美工小姐姐给的样式是和UI插件提供的样式是不一样的…，我一下子就不开心了，这是让我加班啊！如果不使用第三方的UI插件，我要做出和美工给出的样式要花费大量时间。一般情况下，美工是不会变的，哎，只能靠自己了。
正题
废话不多说进入正题，开始我们自定义第三方UI的内容，拿 Element UI的 input 输入框组件为例。
设置 input 输入框左边图标为 png 图像 。
代码语言：javascript复制<el-form ref="form" :model="form">
<el-input v-model="form.name" placeholder="请输入名称"
prefix-icon="el-icon-user"></el-input>
</el-form>可以看出官方的方法是
- prefix-icon=“el-icon-user”
其中 el-icon-user是一个字符串，是不是有些好奇，为什么传进去的是一个字符串却显示的是图标，而且我们如果输入 本地图标地址是不行的 例如 ：
- prefix-icon="/static/user.png" 是显示不出来的
为什么呢？
我在研究了半天后发现，原来 prefix-icon=“el-icon-user” 传进去的 el-icon-user 是一个固定的字符串 ，它对应了element 内置的字体库中的内容。
在Google 浏览器下 按F12查看 网页元素内容 ，发现 我们传进去的 字符串 实际变成了 “E6E3” 这就是为什么可以显示出来图标的原因了，知道了这些后，我们向自己定制显示的图标就容易多了，我们只需要利用穿透进行样式修改，就可以显示我们本地的png图片了 。
什么是穿透？
简单来说，就是修改第三方组件样式的一种方法，具体如下：
外层/deep/第三方组件 {
css代码
}
外层>>>第三方组件 {
css代码
}
/deep/ 和 >>>是等同的。
好了，知道了这些下面开始修改。
代码语言：javascript复制/deep/ .el-icon-user::before{
content: url("/static/images/login/people.png");
}这样写就把本地的 png图片设置上去了。值得注意的是 ::before前面的名称是要和你设置
prefix-icon=“el-icon-user”
填写的字符串内容是一样的，同时也必须是内置的字符串。
到此添加本地图标的任务就完成了，其他UI的修改也是这样的方法来修改。这样就可以自定义我们自己的 第三方UI了，即美观、有符合要求！
白嫖不好，创作不易，各位的点赞就是我创作的最大动力 ！
