From 36c5ea0dac00ca30e36f6cd13d623b299d0be4c5 Mon Sep 17 00:00:00 2001 From: whycq <you@example.com> Date: 星期五, 23 九月 2022 12:32:27 +0800 Subject: [PATCH] # --- components/y-input/y-input.vue | 36 ++++++++++++++++++++++++++++++------ 1 files changed, 30 insertions(+), 6 deletions(-) diff --git a/components/y-input/y-input.vue b/components/y-input/y-input.vue index 6b7919f..1823a00 100644 --- a/components/y-input/y-input.vue +++ b/components/y-input/y-input.vue @@ -5,9 +5,13 @@ <y-title :title="titleText"/> </view> <view :class="zBig"> - <input type="text" :placeholder="placeholderText" @input="input" - placeholder-style="font-size:22rpx" v-model="val"> - <slot /> + <view style="display: flex;" class="input"> + <input type="text" :placeholder="placeholderText" @input="input" + placeholder-style="font-size:22rpx" v-model="val"> + <view class="icons" v-if="val.length" @click="clear"> + <uni-icons type="close"></uni-icons> + </view> + </view> </view> </view> </view> @@ -68,7 +72,11 @@ methods: { input() { this.$emit('input',this.val); + }, + clear() { + this.val = '' } + } } </script> @@ -82,10 +90,9 @@ border-radius: 5rpx; box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1); } - input{ + .input{ width: 96%; - height: 45rpx; - line-height: 50rpx; + height: 100%; margin-left: 2%; margin-right: 1%; border-radius: 5rpx; @@ -96,6 +103,23 @@ text-indent: 8rpx; /* letter-spacing: 1rpx; */ } + input{ + width: 96%; + height: 45rpx; + line-height: 50rpx; + margin-left: 2%; + margin-right: 1%; + border-radius: 5rpx; + color: #606266; + /* border: 1px solid #EBEDF0; */ + /* background-color: #FAFAFA; */ + font-size: 28rpx; + text-indent: 8rpx; + /* letter-spacing: 1rpx; */ + } + .icons { + margin-right: 2% ; + } .big { height: 80rpx; line-height: 80rpx; -- Gitblit v1.9.1