11

components/jl-input/main.vue

@@ -0,0 +1,92 @@
+<template>
+	<view class="jl-input">
+		<input class="jl-input-intext" :type="type" :password="pwShow" :value="value" :placeholder="placeholder"
+		 :placeholder-class="placeholderClass" @input="setValue" @blur="setValue" @confirm="$emit('confirm')" :maxlength="maxlength" />
+		<slot></slot>
+		<slot name="icon"></slot>
+		<image v-if="showPassword && pwShow" class="jl-input_image_eye" src="/static/img/eyeopen.svg" mode="" @click="changePasType"></image>
+		<image v-else-if="showPassword" class="jl-input_image_eye" src="/static/img/eyeclosed.svg" mode="" @click="changePasType"></image>
+		<image v-if="clearable" class="jl-input_image_delete" src="/static/img/delate.svg" mode="" @click="delpas"></image>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			maxlength: {
+				type: Number,
+				default: -1
+			},
+			type: {
+				type: String,
+				default: "text",
+			},
+			placeholderClass: {
+				type: String,
+				default: "jl-input-inPla",
+			},
+			placeholder: String,
+			value: {
+				type: String,
+				default: "",
+			},
+			clearable: Boolean,
+			showPassword: Boolean,
+		},
+		computed: {},
+		data() {
+			return {
+				pwShow: this.showPassword
+			}
+		},
+		methods: {
+			setValue(e) {
+				this.$emit("input", e.detail.value);
+			},
+			delpas() {
+				this.$emit("input", '');
+			},
+			changePasType() {
+				this.pwShow = !this.pwShow
+			}
+		},
+	};
+</script>
+
+<style>
+	.jl-input {
+		margin: 0 auto;
+		/* margin-top: 30rpx; */
+		border-bottom: 1rpx solid #dddddd;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		opacity: hidden;
+	}
+
+	.jl-input-intext {
+		font-family: PingFangSC-Regular;
+		font-size: 1rem;
+		padding: 30rpx 0;
+		color: #333333;
+		flex-grow: 1;
+	}
+
+	.jl-input-inPla {
+		font-family: PingFangSC-Regular;
+		font-size: 1rem;
+		color: #d8d8d8;
+	}
+
+	.jl-input_image_delete {
+		width: 32rpx;
+		height: 32rpx;
+		margin-left: 20rpx;
+	}
+
+	.jl-input_image_eye {
+		width: 40rpx;
+		height: 40rpx;
+		margin-left: 20rpx;
+	}
+</style>