76 lines
1.3 KiB
Vue
76 lines
1.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="name">
|
|
<view class="name-text">{{ title }}</view>
|
|
<input
|
|
:value="value"
|
|
:type="type"
|
|
class="name-input"
|
|
:placeholder="placeholder"
|
|
placeholder-class="placeholder-class"
|
|
:maxlength="maxlength"
|
|
@input="changeInput"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'LockInput',
|
|
props: {
|
|
title: String,
|
|
placeholder: String,
|
|
value: String,
|
|
maxlength: {
|
|
type: Number,
|
|
default: 50
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'text'
|
|
}
|
|
},
|
|
methods: {
|
|
changeInput(e) {
|
|
this.$emit('changeInput', e.detail.value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.name {
|
|
height: 100rpx;
|
|
width: 750rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
|
|
.name-text {
|
|
width: 168rpx;
|
|
margin-left: 32rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.name-input {
|
|
margin-right: 32rpx;
|
|
text-align: right;
|
|
width: 518rpx;
|
|
height: 100rpx;
|
|
font-size: 32rpx;
|
|
line-height: 100rpx;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.placeholder-class {
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
</style>
|