首页uview-plus u-input 输入框里获得焦点时边框颜色改变，失去焦点后边框恢复原颜色

uview-plus u-input 输入框里获得焦点时边框颜色改变，失去焦点后边框恢复原颜色

时间: 2024-12-02 13:16:23 浏览: 114

UView Plus是一个基于Vue.js的UI组件库，它提供了一个名为`u-input`的输入框组件。如果你想在`u-input`获取焦点时改变边框颜色，并在失去焦点后恢复原色，你可以通过CSS样式和Vue组件的`v-model`配合实现这个效果。首先，在CSS中，你可以设置两个类别，一个用于激活状态（聚焦），另一个用于默认状态： ```css .u-input-focused { border-color: /* 焦点颜色，例如：blue */; } .u-input-default { border-color: /* 默认颜色，可能是黑色或原样 */; } ``` 然后，在Vue组件中，利用`@focus`和`@blur`事件监听器控制这两个类的切换： ```html <template> <u-input v-model="inputValue" :class="{ 'u-input-focused': focused, 'u-input-default': !focused }">  </u-input> </template> <script> export default { data() { return { inputValue: '', focused: false, }; }, methods: { handleFocus() { this.focused = true; }, handleBlur() { this.focused = false; }, }, // ... watch: { inputValue(value) { /* 触发 blur 或 focus 事件 */ }, }, directives: { // 如果u-input有自定义的:focus或:blur指令，这里需要处理 focus(e) { this.handleFocus(); }, blur(e) { this.handleBlur(); } }, }; </script> ``` 在这个例子中，当用户点击输入框并聚焦时，`handleFocus`会被调用，给`u-input`添加`.u-input-focused`类，改变边框颜色；反之，当失去焦点时，`handleBlur`会被调用，移除该类，恢复原来的边框颜色。

阅读全文