uniapp开发app 登录密码显示或隐藏、给图片设置默认地址、时间选择器回显

在这里插入图片描述

<template>
	<view>
		<u--form labelPosition="top" :model="model" :rules="rules" ref="form1">
			<u-form-item label="账号" prop="userInfo.acc" borderBottom ref="item1">
				<u--input v-model="model.userInfo.acc" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="userInfo.pwd" borderBottom ref="item1">
				<u--input v-model="model.userInfo.pwd" border="none" flag :type="pwdType"></u--input>
				<u-icon slot="right" :name="showIcon" flag @click="handleIcons"></u-icon>
			</u-form-item>
			<u-form-item>
				<u-button text="登录"></u-button>
			</u-form-item>
		</u--form>
		<image v-show="img" :src="img" mode="aspectFill" ></image>
		<image v-show="!img" src="/static/logo.png" mode="aspectFill" ></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwdType:'password',
				showIcon:'eye-off',
				img:'/static/微信图片_20221001120109.jpg',
				flag:false,
				model: {
					userInfo: {
						acc:'',
						pwd:'',
					},
				},
				rules: {
					'userInfo.acc': {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					'userInfo.pwd': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}
				},
			};
		},
		methods:{
			handleIcons(){
				let that=this;
				that.flag=!that.flag;
				if(that.flag){
					that.pwdType='password';
					that.showIcon='eye-off';
				}else{
					that.pwdType='text';
					that.showIcon='eye-fill';
				}
			},


		}
	}
</script>

<style lang="scss">

</style>

时间选择器
在这里插入图片描述

<template>
	<view>
		<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel="handleCancel" @confirm="handleConfirm"
			></u-datetime-picker>
		<u-button @click="show = true">打开</u-button>
		<view class="">
			{{value1}}---{{value2}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				value2:""
			}
		},
		onLoad() {

		},
		methods: {
			handleCancel() {
				this.show = false
			},
			handleConfirm(e) {
				console.log(e);
				this.value2=this.formatter(e.value);
				console.log(222,this.value2,this.formatter(e.value));
			},
			formatter(v) {
				let date = new Date(v);
				let Y = date.getFullYear();
				let M =date.getMonth();
				let D = date.getDate();
				let H = date.getHours();
				// let M = date.getMinutes();
				let S = date.getSeconds();
				// return `${this.addZero(Y)}:${this.addZero(M)}:${this.addZero(D)}`;
				// return `${Y}-${M}-${D}`;
				return `${Y}-${M<10?'0'+M : M}-${D}`;
			},
			addZero(time){
				return time < 10 ? "0" + time : time
			}
		}
	}
</script>

<style>

</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值