You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.0 KiB
111 lines
2.0 KiB
<template>
|
|
<HandleWrapper v-on="$listeners">
|
|
<el-input
|
|
:maxlength="item.maxlength || 30"
|
|
:disabled="item.disabled"
|
|
:class="item.borderType | getBorderType"
|
|
:placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)"
|
|
:value = "value"
|
|
@input = "onInput"
|
|
/>
|
|
</HandleWrapper>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import HandleWrapper from './HandleFormItem.vue'
|
|
export default {
|
|
components:{
|
|
HandleWrapper
|
|
},
|
|
props:{
|
|
borderType: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
item:{
|
|
type:Object,
|
|
default:()=>{
|
|
return{
|
|
placeholder:"",
|
|
maxlength:30,
|
|
label:"",
|
|
disabled:false,
|
|
}
|
|
}
|
|
},
|
|
value:{
|
|
type:String,
|
|
value:"",
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
inputValue: this.$attrs.modelValue
|
|
}
|
|
},
|
|
filters: {
|
|
getBorderType(type) {
|
|
const typeObj = {
|
|
orange: "orange-border",
|
|
green: "green-border",
|
|
blue: "blue-border",
|
|
}
|
|
return typeObj[type] || ""
|
|
},
|
|
|
|
},
|
|
methods:{
|
|
onInput(val){
|
|
this.$emit("input",val)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.orange-border {
|
|
input {
|
|
border-color: #f9c588;
|
|
|
|
&:focus {
|
|
border-color: #f9c588;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #f9c588;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.green-border {
|
|
input {
|
|
border-color: green;
|
|
|
|
&:focus {
|
|
border-color: green;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: green;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.blue-border {
|
|
input {
|
|
border-color: #4ea2ff;
|
|
|
|
&:focus {
|
|
border-color: #4ea2ff;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #4ea2ff;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|