为uniapp基本组件中的picker增加清空内容功能

效果如下：👇

当选完内容后效果如下👇

右侧x可以清空

图标采用uni-icons 不需要过度引用

<template>
	<view class="content">
		<uni-forms :modelValue="formData" label-width="0">
			<uni-forms-item name="chooseAccount">
				<picker class="pickerClass" @change="selectAccount" :value="index" :range="savedAccounts">
					<view style="font-size:initial" v-if="index==-1">请选择
						<uni-icons type="arrowdown" style="float: right;" color="#7e7d96ff" size="12">
						</uni-icons>
					</view> 
					<view v-if="index!==-1">
						{{savedAccounts[index]}}
					</view>
				</picker>
				<view v-if="index!==-1" style="width: 10%;position: absolute;right: 0;top:0rpx"><uni-icons
						@click.native="clearAccount" type="clear" style="float: right;" color="#7e7d96ff" size="12">
					</uni-icons>
				</view>

			</uni-forms-item>
		</uni-forms>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{},
				index: -1,
				savedAccountsAll: [
					{
						'username': "hehe",
						'password': '123'
					},
					{
						'username': "huhu",
						'password': '234'
					},
				],
				savedAccounts: [
					"hehe", "huhu"
				],
			}
		},
		mounted() {
		},
		methods: {
			clearAccount: function(e) {
				//重置下拉和用户密码
				this.index = -1
			},
			selectAccount: function(e) {
				//选择下拉,并为用户密码赋值
				this.index = e.detail.value
			},
		}
	}
</script>

<style scoped>
	/* base */
	page {
		height: 100vh;
		overflow: hidden;
	}

	.pickerClass {
		/* background-color: red; */
		height: 100%;
		/* width: 90%; */
		color: #b3b3b3;
		/* font-size: 30rpx; */
	}

	.content {
		height: 100vh;
		background: url('@/static/img/top.jpg') no-repeat;
		background-position: bottom center;
		background-size: 100% 40%;
	}

	/* base end */
	.login-title {
		margin-top: 5%;
		width: 40%;
		height: 15%;
		color: #000000;
		font-weight: 600;
		white-space: nowrap;
	}

	.login-title>view:first-child {
		width: 100%;
		height: 100rpx;
		font-size: 60rpx;
	}

	.login-title>view:nth-child(2) {
		font-size: 40rpx;
		font-weight: 500;
	}

	.login-form {
		margin-top: 5%;
		height: 30%;
		/* background-color: pink; */
	}

	/deep/.uni-forms-item__content[data-v-61dfc0d0] {
		border-bottom: 1rpx solid #dddddd;
	}

	/deep/.uni-input-placeholder {
		color: #b3b3b3;
		/* font-size: 30rpx; */
	}

	/deep/.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner[data-v-84d5d996] {
		border-color: black;
		background: white;
	}

	/deep/.uni-data-checklist .checklist-group .checklist-box .checkbox__inner[data-v-84d5d996] {
		background-color: white;
		border-color: black;

	}

	/deep/.uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon[data-v-84d5d996] {
		border-right-color: black;
		border-bottom-color: black;
	}

	/deep/.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text[data-v-84d5d996] {
		color: black;
	}

	.login-button {
		margin-top: 5%;
		width: 90%;
		margin-left: 5%;
		height: 100rpx;
		background: #5861d0;
		box-shadow: 0px 0px 12px #5861d0;
		border-radius: 60rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: 500;
		color: #ffffff;
		font-size: 35rpx;
	}
</style>