From 9ab6b38c098f857f2ce0772693142c930e4f9b6d Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期六, 30 三月 2024 10:44:03 +0800
Subject: [PATCH] #
---
components/My-input/My-input.vue | 101 ++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 88 insertions(+), 13 deletions(-)
diff --git a/components/My-input/My-input.vue b/components/My-input/My-input.vue
index 727b851..7ac3502 100644
--- a/components/My-input/My-input.vue
+++ b/components/My-input/My-input.vue
@@ -1,31 +1,106 @@
<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>
+ <view class="user-input">
+ <uni-icons class="title-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
+ <view class="box-text">{{title}}:</view>
+ <input class="input" type="text" :placeholder="placeholder" v-model="data" v-show="inputType == 'text'">
+ <input class="input" type="password" :placeholder="placeholder" v-model="data" v-show="inputType == 'password'">
+ <uni-icons class="opt-icon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons>
+
+ <!-- <uni-icons class="user-input-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
+ <view class="user-input-text">{{title}}:</view>
+ <input class="user-input-input" :type="inputType" :placeholder="placeholder" v-model="data">
+ <uni-icons class="user-input-opticon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons> -->
+ <!-- <uni-icons class="user-input-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
+ <view class="user-input-text">{{title}}:</view>
+ <input class="user-input-input" :type="inputType" :placeholder="placeholder" v-model="data"> -->
</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
+ },
+ value: {
+ type: [String,Number],
+ default: ''
+ },
+ },
+ watch: {
+ data(val) {
+ this.$emit('input',val)
+ },
+ value(val) {
+ this.data = val
+ },
+ },
+ data() {
+ return {
+ data:'',
+ }
+ }
+
+ }
</script>
-<style lang="scss">
- .my-input {
+<style lang="scss" scoped>
+ .user-input {
width: 100%;
- height: 3rem;
+ height: 45px;
display: flex;
+ color: #606164;
align-items: center;
background-color: #ECF0F1;
- border-radius: 14rpx;
- box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
- inset -8rpx -8rpx 8rpx rgba(255,255,255,.7),
- -8rpx -8rpx 10rpx rgba(0,0,0,.4);
+ border-radius: 7px;
+ box-shadow: inset 4px 4px 4px rgba(0,0,0,.3),
+ inset -4px -4px 4px rgba(255,255,255,.7),
+ -4px -4px 5px rgba(0,0,0,.4);
+ }
+
+ .user-input-icon{
+
+ }
+
+
+ .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
--
Gitblit v1.9.1