From 292dbd67cc5b2fa90f78d9c07234fea7cbc32c24 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期一, 21 八月 2023 12:37:08 +0800
Subject: [PATCH] #
---
components/My-input/My-input.vue | 56 +++++++++++++++++++++++++--
pages/LoginDemo/LoginDemo.vue | 19 ++++++---
2 files changed, 64 insertions(+), 11 deletions(-)
diff --git a/components/My-input/My-input.vue b/components/My-input/My-input.vue
index 727b851..36dbcab 100644
--- a/components/My-input/My-input.vue
+++ b/components/My-input/My-input.vue
@@ -1,13 +1,50 @@
<template>
<view class="my-input">
- <uni-icons type="person" size="20" color="#707070" style="margin: 0 8px 0 8px;"></uni-icons>
- <view class="box-text">璐﹀彿:</view>
- <input type="text" class="input" placeholder="璇疯緭鍏ヨ处鍙�" style="margin-left: 8px;margin-right:8px;flex:1;">
- <uni-icons type="eye" size="20" color="#707070" style="margin-left: auto;margin-right: 8px;"></uni-icons>
+ <uni-icons class="title-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
+ <view class="box-text">{{title}}:</view>
+ <input class="input" :type="inputType" :placeholder="placeholder">
+ <uni-icons class="opt-icon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons>
</view>
</template>
<script>
+ export default{
+ name: 'My-input',
+ components: {
+
+ },
+ props: {
+ titleIcon: {
+ type: String,
+ default: 'person'
+ },
+ title: {
+ type: String,
+ default: '璐﹀彿'
+ },
+ placeholder: {
+ type: String,
+ default: ''
+ },
+ inputType: {
+ type: String,
+ default: 'text'
+ },
+ optIcon: {
+ type: String,
+ default: 'eye'
+ },
+ optIconShow: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ }
+ }
+
+ }
</script>
<style lang="scss">
@@ -22,10 +59,19 @@
inset -8rpx -8rpx 8rpx rgba(255,255,255,.7),
-8rpx -8rpx 10rpx rgba(0,0,0,.4);
}
+ .title-icon {
+ margin: 0 8px 0 8px;
+ }
.box-text {
line-height: 1;
}
.input {
- // background-color: #ECF0F1;
+ flex:1;
+ margin-left: 8px;
+ margin-right:8px;
+ }
+ .opt-icon {
+ margin-left: auto;
+ margin-right: 8px;
}
</style>
\ No newline at end of file
diff --git a/pages/LoginDemo/LoginDemo.vue b/pages/LoginDemo/LoginDemo.vue
index d01c25c..829f950 100644
--- a/pages/LoginDemo/LoginDemo.vue
+++ b/pages/LoginDemo/LoginDemo.vue
@@ -10,8 +10,8 @@
</view>
<view class="right">
<view class="input-box">
- <My-input style="width: 80%;margin: 32rpx 10% 32rpx 10%;" />
- <My-input style="width: 80%;margin: 32rpx 10% 8rpx 10%;" />
+ <My-input class="my-input" titleIcon="person" title="璐﹀彿" placeholder="璇疯緭鍏ヨ处鍙�" inputType="text" optIcon="bottom" />
+ <My-input class="my-input" titleIcon="locked" title="瀵嗙爜" placeholder="璇疯緭鍏ュ瘑鐮�" inputType="password" optIcon="eye" optIconShow/>
<view class="rember-password">
<view class="text">璁颁綇瀵嗙爜</view>
<switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
@@ -35,7 +35,7 @@
data() {
return {
version: '',
-
+ remberPassword: true
}
},
mounted() {
@@ -53,12 +53,14 @@
// #endif
},
methods: {
-
+ remberChange() {
+
+ }
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.setting {
position: absolute;
top: 16rpx;
@@ -98,7 +100,10 @@
}
.input-box {
width: 100%;
- // background-color: #888;
+ }
+ .my-input {
+ width: 80%;
+ margin: 32rpx 10% 32rpx 10%;
}
.rember-password {
width: 78%;
@@ -106,6 +111,8 @@
display: flex;
justify-content: space-between;
.text {
+ font-size: 12px;
+ color: #606266;
line-height: 1;
}
}
--
Gitblit v1.9.1