根据项目需求制作特定的input输入框

下面是效果图

以下只放些关键代码

template

<view class="item">
	<text class="symbol">*</text>
	<text>系统角色:</text>
	<view class="input">
	<view class="inputStyle" v-if="userFormList.inputRoleList&&userFormList.inputRoleList.length === 0">
		<u-input placeholder="选择系统角色" type="text"
			selection-start="10" selection-end="10">
		</u-input>
	</view>
	<view class="u-tag clearfixed" v-else>
		<block v-for="(item,index) in userFormList.inputRoleList" :key='index'>
			<view class="tag-label" @click="del(index)">
				<text>{{item}}</text>
			</view>
		</block>
	</view>
	//这是uView组件库的组件
	<u-dropdown :custom="true" class="dropdown">
		<u-dropdown-item v-model="dropValue" :options="options" @change="change">
		</u-dropdown-item>
	</u-dropdown>
</view>
</view>

这里的数据均是请求后台数据，这里就不再叙述 下面只放一些关键样式

css

.item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	margin-left: auto;

	.input {
		width: 450rpx;
		margin-left: 10rpx;
		padding-left: 20rpx;
		border: 1px solid $border-color;
		border-radius: 10rpx;
		z-index: 2;
		position: relative;
		.inputStyle{
			margin-right: 60rpx;
		}
						
		.clearfixed::after {
			content: '';
			display: block;
			clear: both;
		}
						
		.u-tag {
			 width: 386rpx;
			 min-height: 70rpx;
			 display: flex;
			 justify-content: flex-start;
			 align-items: center;
			 flex-wrap: wrap;
			 .tag-label {
				position: relative;
				float: left;
				font-size: 24upx;
				padding-right: 40upx;
				height: 50upx;
				line-height: 50upx;
				border-radius: 8upx;
				background-color: rgba(220,223,230,.4);
				color: #666;
				padding-left: 10upx;
				margin: 5upx 10upx 5upx 0;
						
				&::after {
					position: absolute;
					content: '×';
					margin-top:-2upx;
					right: 10upx;
				}
			}
	}
						
						
	.dropdown {
		// width: 100%;
		position: absolute;
		z-index: -1;
		top: 50%;
		right: 25rpx;
		transform: translateY(-50%);
	}
	}
}