uniapp在中app，登录页能记住多个账号以及密码功能完整代码

原创

已于 2024-03-23 13:57:53 修改 · 1.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

于 2023-12-26 08:35:45 首次发布

文章描述了一个使用Vue开发的登录界面，包括选择已登录账户、输入姓名和密码、记住登录选项，以及删除账户的功能。同时涉及了本地存储和Vuex的状态管理。

如图所示👇：

1.可以选择下拉，选取曾经登录成功的账户👇

2.选择好下拉后自动赋值，账号密码。

3.勾选记住我则记住该账户以及密码

4.选择下拉后，点选删除账户，则删除

<template>
	<view class="content">

		<view class="login-form">
			<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>
					&