Ant Design of Vue中修改a-input默认样式

Ant Design of Vue中修改a-input默认样式

浏览器对于input会有自动填充功能,给input添加默认样式,导致自定义样式不生效,书写以下样式进行延迟使自定义样式生效

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{ 
        -webkit-transition-delay: 99999s; 
        -webkit-transition: color 99999s ease-out, background-color 99999s ease-out; 
        transition-delay: 99999s; 
        transition: color 99999s ease-out, background-color 99999s ease-out;
}

修改默认样式

.has-error .ant-input-affix-wrapper .ant-input, .has-error .ant-input-affix-wrapper .ant-input:hover {
    background: #141C68;
  } // 错误时的背景颜色

  .has-error .ant-input, .has-error .ant-input:hover {
    background: #141C68;
  } // 错误时的背景颜色
  
  .ant-input-affix-wrapper .ant-input:not(:first-child) {
    padding-left: 46px;
  } // input与边框之间的距离

参考文档:https://blog.csdn.net/RepecTT/article/details/125784577#comments_27574635

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design of Vue框架,a-input输入框组件默认是支持使用ts进行开发的,可以通过自定义指令或者事件处理函数来实现小数点自动格式化百分比的功能。 一种实现方式是使用自定义指令。可以在输入框上添加v-number指令,然后通过该指令的bind和update钩子函数来处理输入框的值。在bind钩子函数,可以将输入值进行格式化,并将格式化后的值赋值给输入框。在update钩子函数,可以在输入值变化时再次进行格式化。 ```html <template> <a-input v-model="value" v-number></a-input> </template> <script> export default { data() { return { value: 0, }; }, directives: { number: { bind(el, binding) { el.value = formatPercentage(binding.value); }, update(el, binding) { el.value = formatPercentage(binding.value); }, }, }, methods: { formatPercentage(value) { // 格式化百分比 return (value * 100).toFixed(2) + '%'; }, }, }; </script> ``` 另一种实现方式是使用事件处理函数。可以在输入框上监听input事件,在事件处理函数将输入值进行格式化,并将格式化后的值赋值给输入框。 ```html <template> <a-input :value="value" @input="handleInput"></a-input> </template> <script> export default { data() { return { value: 0, }; }, methods: { handleInput(event) { const value = parseFloat(event.target.value); if (!isNaN(value)) { this.value = formatPercentage(value); } }, formatPercentage(value) { // 格式化百分比 return (value * 100).toFixed(2) + '%'; }, }, }; </script> ``` 以上是两种实现小数点自动格式化百分比的方式,你可以根据自己的需求选择其一种方式进行使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值