101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<template>
|
|
<view class="login-wrapper" :style="{ padding: pd }">
|
|
<view class="login-main">
|
|
<view class="login-title" v-if="title">{{ title }}</view>
|
|
<view class="login-input" :style="{ backgroundColor: bgColor }">
|
|
<input
|
|
:password="password"
|
|
:placeholder="place"
|
|
:type="type"
|
|
placeholder-style="color: #A6A6A6;"
|
|
:value="value"
|
|
@input="change($event)"
|
|
/>
|
|
<view class="login-right"> <slot></slot> </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { watchEffect, onBeforeUnmount, onMounted } from "vue"
|
|
import { addRules, clearOneRule } from "@/hooks/rules"
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "账号",
|
|
},
|
|
place: {
|
|
type: String,
|
|
default: "请输入登录名/手机号",
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "text",
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "text",
|
|
},
|
|
pd: {
|
|
type: String,
|
|
default: "50rpx",
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: "#f3f2f5",
|
|
},
|
|
password: { type: Boolean, default: false },
|
|
rules: { default: null },
|
|
})
|
|
const emits = defineEmits(["update:value"])
|
|
const change = (e) => {
|
|
emits("update:value", e.detail.value)
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.rules !== null) {
|
|
props.rules.Msg = props.title
|
|
addRules(props.rules)
|
|
}
|
|
})
|
|
onBeforeUnmount(() => {
|
|
if (props.rules !== null) {
|
|
clearOneRule(props.rules)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login-wrapper {
|
|
padding: 50rpx;
|
|
.login-title {
|
|
margin-left: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
.login-input {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 110rpx;
|
|
|
|
.login-right {
|
|
align-self: center;
|
|
}
|
|
border-radius: 16rpx;
|
|
background: #f3f2f5;
|
|
input {
|
|
flex: 1;
|
|
font-size: 33rpx;
|
|
height: 110rpx;
|
|
margin-left: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|