日记 2022-5-4（vue技术图片64）

自身夯实：

登录功能：iview/element ui 表单校验，验证登录，flex布局 ， vuex信息获取与存储，样式穿透

<Form action ref="formInline" :model="formInline" :rules="ruleInline">
	<FormItem prop="ID">
		<Input type="text" v-model="formInline.ID" placeholder="账号">
		<img src="../../assets/images/user.png" style="width: 40px; height: 40px;" alt=""
			slot="prepend">
		Input>
	FormItem>
	<FormItem prop="PW">
		<Input type="password" v-model="formInline.PW" @keyup.native.enter="toLogin('formInline')"
			placeholder="密码">
		<img src="../../assets/images/password.png" style="width: 40px; height: 40px;" alt=""
			slot="prepend">
		Input>
	FormItem>
	<FormItem prop="code" class="form-item-code">
		<Input type="text" v-model="formInline.code" @keyup.native.enter="toLogin('formInline')"
			placeholder="验证码" class="code-input">
		<img src="../../assets/images/login-code.png" style="width: 40px; height: 40px;" alt=""
			slot="prepend">
		Input>
		<div id="v_container" class="flex-row-center-center" @click="changeCode">
			<img :src="'data:image/png;base64,' + codeImg" v-show="codeImg" alt="">
		div>

	FormItem>
	<FormItem class="checked-pw">
		<Checkbox size="large" v-model="checked">记住密码Checkbox>
	FormItem>
	<FormItem>
		<Button type="primary" @click="toLogin('formInline')">登录Button>
	FormItem>
Form>

toLogin(formInline) {
			let _this = this;
			this.$refs[formInline].validate(valid => {
				if (valid) {
					this.loading = true;
					_this.axios({
						method: "POST",
						url: apiLogin,
						data: {
							username: this.formInline.ID.trim(),
							password: this.formInline.PW.trim(),
							code: this.formInline.code,
							uuid: this.formInline.uuid,
						}
					}).then(res => {
						_this.loading = false;
						if (res.status == 200) {
							/* 判断是否为该县级用户 */
							if (res.data.User._ORG_.LVL == 1 && res.data.User._ORG_._AREA_.NAME != mapInfo.prv) {
								return _this.$Message.success("账号不存在!");
							} else if (res.data.User._ORG_.LVL == 2 && res.data.User._ORG_._AREA_.NAME != mapInfo.city) {
								return _this.$Message.success("账号不存在!");
							} else if (res.data.User._ORG_.LVL == 3 && res.data.User._ORG_._AREA_.NAME != mapInfo.cnty) {
								return _this.$Message.success("账号不存在!");
							} else if (res.data.User._ORG_.LVL == 4 && res.data.User._ORG_._AREA_.FULLNAME.split('`')[2] != mapInfo.cnty) {
								return _this.$Message.success("账号不存在!");
							}
							_this.$store.commit("set_token", res.data.Token);
							_this.$store.commit("set_userInfo", res.data.User);
							_this.$store.dispatch("getRSCS", {
								Token: res.data.Token,
							});//获取水库规模筛选数据

							localStorage.setItem('systemName_' + mapInfo.cnty, res.data.User._ORG_.SYS_NAME || mapInfo.SYSTEM_NAME);
							_this.$store.commit('set_system_name', res.data.User._ORG_.SYS_NAME || mapInfo.SYSTEM_NAME);
							_this.$store.dispatch("getArea");//获取水库地区筛选数据
							_this.savePW();//记住密码
							_this.goHome();
							_this.$Message.success("登录成功!");
						} else {
							_this.$Message.error(res.data.m);
						}
					})
						.catch(error => {
							_this.loading = false;
							error ? _this.$Message.error(error.data.m) : _this.$Message.error('请求失败');
						});
				} else {
					_this.$Message.error("登录失败!");
				}
			});
		},

//校验提示文字
>>>.ivu-form-item-error-tip {
	color: #fff;
	font-size: 14px;
}

自身遗忘：

页面获取路由信息

this.$router.options.routes.filter(item => !item.hidden)

css flex:1
大概意思：在当前区域该元素占比为1
MDN

get新知识：

图片转换64：什么是图片转换64

自结：将一张图片数据编码成一串字符串，使用该字符串代替图像地址url

<img :src="'data:image/png;base64,' + codeImg" v-show="codeImg" alt="">

/* 
// 验证码
 */
changeCode() {
	this.axios({
		method: "GET",
		url: captchaImage,
	}).then(res => {
		if (res.data.code == 200) {
			this.formInline.uuid = res.data.uuid;
			this.codeImg = res.data.img;//这里就是图片编码字符串
		} else {
			_this.$Message.error("请求失败，请稍后重试!");
		}
	})
		.catch(error => {
			this.$Message.error("请求失败，请稍后重试!");
			console.log(error);
		});
},

img: "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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="

input slot 插槽

<Input type="password" v-model="formInline.PW" @keyup.native.enter="toLogin('formInline')"
placeholder="密码">
<img src="../../assets/images/password.png" style="width: 40px; height: 40px;" alt=""
slot="prepend">
Input>

slot=“prepend” 放置图片代替以前放置图标