#

whycq

2023-08-21 292dbd67cc5b2fa90f78d9c07234fea7cbc32c24

#

 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>

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