设置input标签禁用_Vue造轮子 | input组件

服务区的晚霞

设计

input组件单独使用时，在样式上并没有多花里胡哨，较为简洁纯粹。相较于element组件库中的input组件，这里的实现上应该也就只有边框颜色没有特意设计(element有主题系统)。

功能的设计上也略微简陋，没有针对各种type做相应的实现，目前只实现了input的类型。没实现的还有显示icon以及设置组件自身大小。

效果

属性

value，组件的核心功能，显示输入的内容，这也为该组件实现双向绑定的必要条件之一。

disabled，组件状态是否被禁用。

readonly，和禁用很像，只不过在表现形式上有略微差距，设置组件状态是否只读。

事件

change，输入内容发生改变后触发，但和input不同的是，change更“防抖”。

input，实时响应输入框的值变化。

blur，输入框的失焦事件，可用于相关状态的绑定。

focus，当输入框获得焦点的事件。

代码

:value="value"
type="text"
:disabled="disabled"
:readonly="readonly"
@change="$emit('change', $event.target.value)"
@focus="$emit('focus', $event.target.value)"
@blur="$emit('blur', $event.target.value)"
@input="$emit('input', $event.target.value)"
/>




创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的设置input标签禁用_Vue造轮子 | input组件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。