对antd-vue输入框的二次封装,显示长度限制,兼容v-decorator和v-model

背景: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,//属性不会显示在子组件的dom元素上
	model:{
		prop:'value',
		event:'change
	}
	props:{
		value:{
			type:String
		}
	},
	computed::{
		//v-on="$listeners"与重写事件有冲突,会执行两次
		//使用_$listeners继承原有属性,并覆盖原有事件
		_$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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King_960725

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值