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 | 49 +++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 39 insertions(+), 10 deletions(-) diff --git a/components/My-input/My-input.vue b/components/My-input/My-input.vue index 36dbcab..7ac3502 100644 --- a/components/My-input/My-input.vue +++ b/components/My-input/My-input.vue @@ -1,9 +1,18 @@ <template> - <view class="my-input"> + <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="inputType" :placeholder="placeholder"> + <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> @@ -37,28 +46,48 @@ 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; } -- Gitblit v1.9.1