97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<!-- 带label的输入框 -->
|
|
<!--
|
|
可接收一个width用于控制输入框长度
|
|
可接收一个placeholder用户显示待输入提示
|
|
可接收一个clearable用户是否包含清除按钮
|
|
可接收一个maxlength 用于限制输入框长度
|
|
-->
|
|
<template>
|
|
<div id="labelInput">
|
|
<label>{{ label }}</label>
|
|
<div class="label-input-content" :style="{ width: width + 'px' }">
|
|
<el-input :value="value" @input="handleChange" :maxlength="maxlength" :placeholder="placeholder" :clearable="clearable"></el-input>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'index',
|
|
data () {
|
|
return {
|
|
currentValue: this.value
|
|
}
|
|
},
|
|
methods: {
|
|
handleChange (val) {
|
|
this.$emit('input', val)
|
|
}
|
|
},
|
|
components: {},
|
|
props: {
|
|
value: String,
|
|
label: String,
|
|
width: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
maxlength: Number,
|
|
placeholder: String,
|
|
clearable: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
mounted () {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
#labelInput{
|
|
vertical-align: top;
|
|
label{
|
|
width: 88px;
|
|
display: inline-block;
|
|
border: 1px solid #DDD;
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
border-right: none;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
background: #F4F8FB;
|
|
padding: 0 7px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
float: left;
|
|
font-size: 12px;
|
|
color: #515a6e;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.label-input-content{
|
|
display: inline-block;
|
|
.el-input{
|
|
display: inline-block;
|
|
width: 100%;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
line-height: normal;
|
|
.el-input__inner{
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 12px;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.el-input__suffix{
|
|
.el-icon-circle-close{
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|