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

点击按钮显示输入框并聚焦，失焦时变为按钮

在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元起，快前往官网查看详情吧

网页名称：点击按钮显示输入框并聚焦，失焦时变为按钮-创新互联
链接地址：http://cdxtjz.cn/article/dhdgpd.html