背景:antd组件中输入框长度限制没有显示,不能像elementUI一样,所以自己来封装实现
目的:对antd-vue输入框的二次封装,显示长度限制,兼容v-decorator和v-model
效果图:
代码:
<template>
<a-input v-model="currentValue"v-bind="Sattrs"v-on="_$listeners">
<span slot="suffix">{{currentvalue currentvalue.length 0 }}/{$attrs['max-length']}}</span>
</a-input>
</template>
<script>
export default {
name:'MyInput',
inheritAttrs:false,
model:{
prop:'value',
event:'change
}
props:{
value:{
type:String
}
},
computed::{
_$listeners(){
return object.assign(this.$listeners,{
change:this.handleModelInput
})
},
watch:{
value(val){
this.currentValue = val
}
},
data(){
return {
currentValue:''
}
},
methods:{
handleModelInput(e){
this.$emit('change',e.target.value)
}
}
}
</script>
<style lang="less" scoped>
/deep/.ant-input:not(:last-child){
padding-right:60px !important;
}
/deep/.ant-input-suffix{
font-size:12px;
}
</style>