93 lines
2.0 KiB
Vue
93 lines
2.0 KiB
Vue
|
<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>
|