网站建设资讯

NEWS

网站建设资讯

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

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

在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://cdweb.net/article/dhdgpd.html