uniapp中下拉输入框的应用（带图标）--- 多平台

登录页面中有时会应用下拉输入框来输入用户名，但是uniapp中并没有现成的组件，自己尝试实现了一下，有更好的方法欢迎大家分享。

效果图如下：

 代码如下：

<view label-width="300">
		<uni-icons type="person-filled" size="19" class="icon" style="color: #999d9c;" />
		<uni-combox :candidates="userData" placeholder="用户名/手机/邮箱" v- 
                     model="userName" style="padding-left: 32px;">
		</uni-combox>
</view>

  js代码如下：

export default {
	 data() {
	     return {
            userData:['北京', '南京', '天津', '上海'],
         }
     }
}

  css代码如下：

.icon {
		 position: absolute;
		 margin-top: 33rpx;
		 margin-left: 7px;
	  }
.uni-combox {
             line-height: 80rpx;
		    }

---

注意事项：

• 代码中用到的组件需提前引入，可参考官网。
• uni-combox的高度需要根据其他输入框的来单独设定，特别是在form表单中应用时，做到高度统一。
• 组件只测试在H5、微信小程序中显示正常，图标偏移位置可根据自己页面来调整。
• 钉钉小程序中使用需添加特定代码，如下：

	/*#ifdef  MP-ALIPAY  */
	::v-deep .uni-combox {
		background: #333333;
	}
	::v-deep .uniui-person-filled {
		float: left;
		position: absolute;
		z-index: 10000;
		top: 7px;
		margin-left: 2px;
	}
	::v-deep .uni-combox__input{
		margin-left: 12px;
	}
	/* #endif */

---

感谢支持！！！