备份助记词 部分

	<!-- 导航栏返回按钮 -->
	<!-- <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,item2)">{{item2.name}}</li>
		</ul>
	</div>

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

export default {
	data() {
		return {

			wordsArr: [],
			wordsNum: [],
			arr: [{
				active: false,
				name: "cactus"
			}, {
				active: false,
				name: "cushion"
			}, {
				active: false,
				name: "panda"
			}, {
				active: false,
				name: "cactus"
			}],
			selectab: "",
			// mnemonic: ["notice","cactus","cushion","panda","stool","loud","wash","finger","actual","surface","job","girl"],

		};
	},
	mounted() {},
	methods: {
		// 添加
		add(number, name, item) {
			if (!item.active) {
				this.$set(item, 'active', true);
			}
			if (this.wordsArr.includes(item.name) === false) {
				this.wordsArr.push(item)
			} else {
				alert("已经有一样的了")
			}


			// 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() {
			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, item) {

			if (item.name === this.arr[index].name) {
				this.wordsArr.splice(index, 1)
				this.$set(this.arr[index], 'active', false)
			}
			// if(item.active){
			//   this.$set(item,'active',false);
			// }

			//   this.arr.splice(index,item)
			//   console.log(index)
			//     //获取点击的元素，也就是wordsArr的索引
			// 	let words = this.wordsArr;
			// 	//原数组
			// 	let size = this.arr;
			// 	//标识
			// 	let uuid = words[index];
			// 	size.forEach((v , i)=>{
			// 		if(uuid === v){
			// 			//记录arr数组需要还原的位置索引
			// 		}
			// 	});
			// 	//有了需要还原数组的索引，改变原数组的位置的样式（这个vue如何改变样式，我不会写了，这个你自己写吧）
			//
			// 	//删除点击的这个元素，也就是wordsArr中的元素，重新获取wordsArr的长度，再重新计算空格的数量。
			// 	words.splice(index,1);
			// 	//console.log(words);
			//
			// 	let num = words.length;
			// 	this.wordsNum.length = 0;
			// 	if (num > 0) {
			// 		let choures = 12 - num;
			// 		if (choures === 0) {
			// 			this.wordsNum.length = 0;
			// 		} else {
			// 			for (let i = 1; i < choures; i++) {
			// 				this.wordsNum.push(i);
			// 			}
			// 		}
			// 	}
			//
			//
		}
	},
}

.spareAux {
	text-align: center;
}

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

.spareAux .wordsbox .li {
	text-align: center;
	width: 50px;
	height: 20px;
	line-height: 20px;
	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: 0.5rem;
}

.spareAux .wordsbox .li.active {
	background: red;
}

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

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

}

.spareAux .selected li {
	border: 1px solid #232e6c;
	width: 50px;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	background: #FFFFFF;
	color: #232e6c;
	margin-right: 0.2rem;
	border-radius: 5px;
	margin-bottom: 0.5rem;
}

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