VUE开发钱包助记词的逻辑

	<!-- 导航栏返回按钮 -->
	<!-- <van-nav-bar title='备份助记词' left-arrow @click-left="onClickLeft" /> -->
	<!-- 选中词 -->
	<div class="seleWords">
		<ul class="selected">
			<li :class="{'transSelect':selectab === index }" class="li" v-for="(item2 , index) in wordsArr" @click="addRemove(index,$event)">{{item2}}</li>
			<li class="li" v-for="(item1,index) in wordsNum"></li>
		</ul>
	</div>

	<!-- 助词表 -->
	<div>
		<ul class="wordsbox">
			<li ref="item" class="li" v-for="(item,index) in arr" :key="index" @click="add(index,$event)">{{item}}</li>
		</ul>
	</div>
	<button class="btn" @click="Verification">
		验证
	</button>
</div>

export default {
	data() {
		return {

			wordsArr: [],
			wordsNum: [],
			arr: ["notice", "cactus", "cushion", "panda", "stool", "loud", "wash", "finger", "actual", "surface", "job", "girl"],
			selectab: "",
			mnemonic: ["notice", "cactus", "cushion", "panda", "stool", "loud", "wash", "finger", "actual", "surface", "job",
				"girl"
			],

		};
	},
	mounted() {

		for (let i = 0; i < 12; i++) {
			this.wordsNum.push(i);
		}
	},
	methods: {
		// 添加
		add(number, e) {
			var temp = e.srcElement;
			temp.style.background = "#999";
			//定义一个变量接收数组
			let size = this.arr;
			// 空数组添加点击的这个内容
			let num = this.wordsArr.length;
			this.wordsNum.length = 0;
			if (num != 12) {
				this.wordsArr.push(size[number]);
				let choures = 12 - num;
				if (choures == 0) {
					this.wordsNum.length = 0;
				} else {
					for (let i = 1; i < choures; i++) {
						this.wordsNum.push(i);
					}
				}
			} else {
				this.wordsNum.length = 0;
			}
		},
		// 返回上一页
		onClickLeft() {
			this.$router.go(-1)
		},
		// 验证
		Verification() {
			console.log(this.wordsArr)
			console.log(this.mnemonic)
			let flag = true;
			let len = this.wordsArr.length;
			// 判断本地存储的长度跟选中添加的长度是否一致
			if (this.mnemonic.length != len) {
				flag = false;
			}
			// 判断每个数组中的单词是不是全等
			for (let i = 0; i < len; i++) {
				if (this.wordsArr[i] != this.mnemonic[i]) {
					flag = false;
				}
			}
			if (flag == true) {
				console.log("验证正确")

			} else {
				// 验证失败的步骤
				this.$dialog.alert({
					message: '请输入正确的助记词'
				}).then(() => {
					this.$router.go(0)
				});
			}
		},
		addRemove(index, e) {
			//获取点击的元素，也就是wordsArr的索引
			let words = this.wordsArr;
			//原数组
			let size = this.arr;
			//标识
			let uuid = words[index];
			size.forEach((v, i) => {
				if (uuid == v) {
					//记录arr数组需要还原的位置索引
					this.$refs.style.background ="#4D5B80"
					
				}
			});
			
			//删除点击的这个元素，也就是wordsArr中的元素，重新获取wordsArr的长度，再重新计算空格的数量。
			words.splice(index, 1);
			//console.log(words);

			let num = words.length;
			this.wordsNum.length = 0; //空格

			let choures = 12 - num;
			if (choures == 0) {
				this.wordsNum.length = 0;
			} else {
				for (let i = 0; i < choures; i++) {
					this.wordsNum.push(i);
				}
			}
		}
	},
}

.spareAux {
	text-align: center;
}

.spareAux .wordsbox {
	padding: 0 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.spareAux .wordsbox .li {
	text-align: center;
	width: 100px;
	height: 45px;
	line-height: 45px;
	border-radius: 5px;
	background: -webkit-gradient(linear, 30% 35%, 95% 100%, from(#232E6C), to(#4D5B80), color-stop(0.5, #4E5C81));
	color: #fff;
	border-radius: 5px;
	margin-bottom: 5px;
}

.spareAux .seleWords {
	margin: 5px;
	box-shadow: 0px 4px 10px #666;
	padding: 5px 0rem;
}

/* 空格填充词 */
.spareAux .selected {
	display: flex;
	flex-wrap: wrap;
	padding-left: 8px;
	width: 90%;

}

.spareAux .selected li {
	border: 1px solid #232e6c;
	width: 100px;
	display: inline-block;
	height: 45px;
	background: #FFFFFF;
	color: #232e6c;
	line-height: 45px;
	margin-right: 2px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.spareAux .btn {
	width: 90%;
	margin: 0 auto;
	font-size: 28px;
	color: #fff;
	height: 80px;
	border-radius: 5px;
	background: -webkit-gradient(linear, 30% 35%, 95% 100%, from(#232E6C), to(#4D5B80), color-stop(0.5, #4E5C81));
	line-height: 80px;
	outline: none;
	border: none;
}