vue实现带放大镜的搜索框 vue实现带放大镜的搜索框

本文实例为大家分享了vue实现带放大镜的搜索框，供大家参考，具体内容如下
字体图标在input单标签中的用法：

文章图片

第一步，先在main.js 中全局引入iconfont图标；
第二步，给input 标签动态绑定一个属性，设置值为data中的变量；
第三步，将字体图标代码中的 &#x 改为 \u

文章图片

文章图片

代码如下：

.login{width: 100%; height: 100%; }.top{width: 100%; height: 0.8rem; background-color: pink; display:flex; align-items: center; font-size:0.35rem; }.top-text{margin-left:0.3rem; }.top-btn{width: 4.8rem; height: 0.5rem; margin-left:0.2rem; margin-right:0.55rem; }.top-btn>input{width: 100%; height:0.5rem; border-radius:1rem; border:none; outline: none; padding-left:0.3rem; }

【vue实现带放大镜的搜索框】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。