<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>