第七十八篇：写一个按需展示的文本框和按钮(使用ref)

好家伙，

我们又又又来了一个客户

用户说:

我想我的页面上有一个搜索框,

当我不需要他的时候,它就是一个按钮

当我想要搜索的时候,我就点一下它,

然后按钮消失,搜索框出现,

当我在浏览其他东西时,这个搜索框会自己变回一个按钮

1.按需展示的文本框和按钮

来做一个按需展示的按钮和文本框

上代码:

<template>
  <div id="app">
    <input type="text" v-if="inputvalue" @blur="showButton">
    //@blur 当失去焦点的时候触发showButton事件
    //失去焦点:你点了文本框以外的区域时,焦点不再在文本框上
    <button v-else @click="showInput">展示输入框</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return{
      inputvalue:false
    }
  },
  components: {
    HelloWorld
  },
  methods:{
    showInput(){
      this.inputvalue=true;
    },
    showButton(){
      this.inputvalue=false;
    }
  }
}
</script>     

效果如下:

用户看了直摇头

2.优化

现在用户说:

为什么我点了按钮,

输入框出现了,

我还要再次点一下输入框,才能开始输入?

于是我们又来解决需求了

来稍作修改:

来为文本框绑定一个ref属性:

<input type="text" v-if="inputvalue" @blur="showButton" ref="inputRef"> 

添加一个focus方法:

methods:{
    showInput(){
      //1.调用方法改inputvalue的值
      this.inputvalue=true;
      //2.让展示出来的文本框,自动获得焦点
      this.$refs.inputRef.focus()
    },
    showButton(){
      this.inputvalue=false;
    }

于是,不出意外地话,总是要出点意外的,

来看看生命周期的这张图:

发现问题了

showInput(){
      //1.调用方法改inputvalue的值
      this.inputvalue=true;
      //2.让展示出来的文本框,自动获得焦点
      this.$refs.inputRef.focus()
    },

js是线性执行的,

数据被更改后,就直接操作页面的dom元素了,

但此时的页面并未渲染完毕

于是就报错了

那么,我们寻找另一个解决方法:

3.$nextTick(cb)方法

延迟到dom渲染完毕再调用其中的cd方法:

组件的$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新周期之后执行。

通俗的理解是：等组件的DOM更新完成之后，再执行cb回调函数。

从而能保证cb回调函数可以操作到最新的DOM元素。

showInput(){
      //1.调用方法改inputvalue的值
      this.inputvalue=true;
      //2.让展示出来的文本框,自动获得焦点
      this.$nextTick(()=>{
        this.$refs.inputRef.focus()
        })

    },

解决问题了,

客户看了直点头

That's all