结合uview写input框

<template>
	<view>
		<view class="top">
			<view class="item">
				<text>头像</text>
				<u-avatar :src="src" shape="square" size="50"></u-avatar>
			</view>
			<view class="item" @click="showSex = true; hideKeyboard()">
				<text>名字</text>
				<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" 
					border="none"></u--input>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
				@close="showSex = false" @select="sexSelect">
			</u-action-sheet>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../../static/me.png',
				showSex: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
			}
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
		}
	}
</script>

<style>
	page {
		background-color: #f3f3f3;
	}

	.top {
		box-sizing: border-box;
	}

	.item {
		display: flex;
		background-color: #ffffff;
		/* background-color: pink; */
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px #eee solid;
		padding: 50rpx 30rpx;
	}
</style>