点击按钮显示输入框并聚焦，失焦时变为按钮-创新互联

在vue中实现代码：(使用了具名插槽)

效果图：

点击后：

点击空白处后变回按钮

第一步：有一个按钮和一个输入框

点我切换输入框

第二步：给按钮添加v-if给输入框添加v-else，效果是要只显示一个，在data中使用flag控制显示隐藏

点我切换输入框

script中：

export default {data() {return {flag: true,
  };
},
}

第三步：给按钮添加点击事件@click，当按钮被点击的时候按钮消失，输入框出现

点我切换输入框

第四步：点击后输入框显示，同时输入框自动聚焦。使用vue的自定义指令v-focus

点我切换输入框

在script中添加自定义指令：

export default {directives:{focus:{inserted(el){  el.focus()
    }
  }
}
}

第五步：失去焦点（点击输入框外空白处）时，变回按钮。给input添加失焦事件@blur

点我切换输入框

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧