18. 尚硅谷_Mpvue_搜索页面头部功能完成

好，来我们继续啊，我们上节课呢，咱是去完成了一下那个搜索图书的啊，Note GS这一块的接口，并且我们也测试了我们的接口没有问题，那这一节课呢，我们就可以转站到我们的前端，嗯，去写我们前端的样式以及功能，好，那这是搜索的界面，那在搜索之前呢，我们应该是先去写这个样式，对吧？呃，搜索到图书呢，下边是个列表，其实这个列表不难，为什么？因为我们做过了，大家想一下啊，我这个图书列表在这儿，那这个不就是要显示的列表吗？啊，说白了，我们一个页面组件写好了，最后是不是可以去复用了啊，所以呢，我们现在只需要搭一下它的头部，这就OK。好，那来到我们的项目里面找到我们的搜索图书的组件，那在这儿呢？哎，先把这些先撤掉。我们。

接来一个啊div，来一个search header，好，里边呢有个input，然后呢，我们再去给它来个please holder书中啊自由黄金屋，好，把这些基本的写好以后来到我们的项目。来切换到搜索图书啊，这个是不是就有了，为了方便调试的话呢，那这一把咱们可以把什么把这个搜索图书的啊。这个路径呢，放到最上面去，那这样的话，我的项目一编译加载最些什么，加载这个页面好呃，这些弄完以后，我们去写一下对应的样式啊写引，那来一个ID，来这个呢，我们去得search contain好呃，来到样式这一块，它下边的我们叫它search handle对吧？那这个呢，我们可以来一个宽度，比如说80%啊，高的话来个80RPX，然后呢，左右让它居中一下啊上下你说来个12PX，左右为零。

来我们看一下效果，呃，这个效果好像不太明显，对吧，效果不明显啊，那这个时候呢，我们可以来一个什么呀，来一个包，嗯，Border erpx，然后呢，来个so井号E，好，那这个时候再来看一眼，来这个是不是就过来了，那这个时候呢，左右这我们让它居住，来个凹凸。嗯，大家看是不是到这一侧了，上下边距其实要不要都行吧，那这儿呢，我们直接让他来个凹吐吧，这样的话顶住上边，因为我这个行钢给的肯定是够了，哎，行高给的肯定是够了，那接下来这个input呢，我们也得写一点样式啊，它下边的input我呢让它高是多高呢？100%，你说跟我们外边的一样吧，宽呢也是100%，这样不就行了吗？嗯，然后来看一下效果，哎，是把这个文字也居中了呀，那最后呢，我们应该是什么？我可以把外边容器的上下那上边框以及左右边框撤掉，就留一下边框。

是不是就可以同时下边框的颜色应该是什么，我们当前项目的主题色啊，在这呢，把这个border画成啊A，然后呢，颜色我们来找一下我们的主题色，哎，就是它。那这个时候呢，我们去把对应的颜色换掉，再来看一下，好，基本的样式出来了，但是呢，现在这个please holder的文字样式不对啊，不对，那这个时候大家看一下我写好这个，这很明显版本是居中的，而且字体有颜色啊，也有大小设置，那其实在我们HTML里面啊，在CSS里面我们要去操作please hold很难啊，很多浏览器都不支持操作它可倒是可以啊，但是呢，也需要对应的这个浏览器厂商前缀，对吧？那我是做到怎么做到的这个呢？啊，你这写了input，如果说你啥都不设置，那这既是一个H5的input的标签，同时呢，小程序里边也有一个input组件，跟它长得一模一样，那我们H5搞不定的东西怎么办？去看一下我们小程序里面啊。

在这呢，找到对应的input这个组件来，我们往上翻啊，往上翻其中有一个就叫please holder style，可以指定please holder的样式，哎，你可以在标签属性上是不是直接指定它的样式啊，同时大家看下边还给了一个叫please holder class哎，指定please holder的样式类，那这样的话呢，就很方便啊，也就是说当我们把这个设置上来以后啊，我们让小程序去解析这个标签就OK啊，那这个内有呢在这儿啊，我们去设置一下啊，之前我在考虑的时候啊，我第一次用，我说这个please hold到底放在哪，你想啊，这是个标签属性，哎，这是个标签，按理来说我认为它俩应该是一体，所以呢，我刚开始把这个样式呢设到这儿，那这个color呢，也应该是主题色。

还有什么呢？哎，正常写啊，Text line center，然后呢，再来一个photo，比如说282PX，那这个时候呢，我们来看，哎，样式是不是生效了，说明它跟音input的同级没有问题，那后来呢，我发现啊，这个其实缩进一下也没有问题啊，样式也是能出来的，大家看是吧，好的好，那这个input的样式搭建完了以后呢，我们接下来再写一个东西，那就是当我这儿输入内容的时候，这一侧应该有一个叉号，然后点击叉号，我们是可以清除输入框的内容，那这个时候来，呃，在我们头部的旁边，我们再去整一个东西，来一个span，那这个叉号呢，我们就来一个大写的X，同时呢，我们去给它一个类名class，这呢就叫clear，那这个东西它应该是跟谁同级的，跟这个。

我们看啊，头部是不同颈的，然后呢，在它的下面我们应该设置什么呢？呃，首先这个叉号我们应该是干嘛定位到右侧absolute啊，然后呢，我们来一个right吧，先来个20个像素，我们来看一眼啊，大家看是不是在这了。嗯，没问题，然后呢，顶部的距离是不是也应该去调整一下啊，在这呢，我们来个top，也来个20个像素看一眼，让它往上走。

是不是在这儿，那现在你看啊，我调顶部也好，调右侧也好，它是相对于谁定位的。哎，这很明显是相对于我们视口窗口定位呢，那其实最好的方式是什么，我们去给什么给他的这个负负极元素，呃，我们再去开一个什么呀，开一个相对定位，让它相对于负极元素定位是不是就可以，那这样的话呢，我们最好是什么？把这个span其实放到这儿比较好，那别相当于什么我们这个根元素去定位啊，不太好，相当于这个哈ER定位好一点，那这样的话，我这儿是不是要缩进一下啊，我们再来看。呃，来来到我们导铁这钥匙什么没动啊，没动了以后啊，为什么相当于窗口呢？给大家解释一下啊，你开启了absoluteut绝对定位它会相对于离它最近的那个开启。

定位元素，那开启定位的负元素是不是定位啊，如果没有的话，一直会往上找到什么初始包含块的，那现在呢，我们为了让它相对于负元素定位，我们可以给它的负元素开一个什么，哎，来一个T，好，那这个时候呢，再看这个X是不是就到里面了，因为现在它相当于是我们头部这个容器定的位。对不好，那这个X定位上去以后呢，我们写一下逻辑，这个X呢，叉号什么时候应该显示出来，那一定是输入框有内容，同时我们知道我们最终是不是要获取输入框输入内容，那在这呢，就不用说了，这一定是V-model，来我们去关联一下search content，那同时呢，我们在GS里面去初始化一个data，那对象，那默认它就是CR，好，那其实在这儿我们要做的是什么，我把V-SH啊，因为它频繁的显示隐藏，所以我就用微感受了，直接去判断一下这个是否有值，是不是就可以来，这个时候我们来看一下啊，上来没有输A是不是就可以啊，好，再生一个是不是就没了来，没问题，那这个时候呢，我们再去给这个清除的。

啊，STEM去绑定一个点击事件，因为你点的时候是不是要清空输入框输入的内容。因为现在呢，我们这个事件对应的动作只有一个，就是让search content为空，所以呢，这一条语句呢，我们可完全可以在这去写，那样的话是不是就不不用什么定义定义的回调了，好来我们验证一下。走快一点，嗯。

我再给大家证明一下啊，我在一点你会发现这是不是没动呀，哎，那这是为什么呢？打开调试器你看看也没有报错。也没有报错，那这个是我写错了吗？你要验证它为什么没有清空，首先你得证明你点击生效了对吧？那这个时候，哎，我们这样写就问题了，也不是有问题啊，我们这样写就看不出来它到底有没有问题，那在这呢，我先来一个handler啊，可定义个方法啊，那这个方法呢，我们需要对应的到method里边是不去定义一下走你然后呢，我随便输出个内容啊，我要证明我的点击是否生效，好来到对应的页面，我去插一下打家卡，根本没有反应，那这是为什么呢？哎，我们仔细琢磨一下啊，我点击上去就好像没底一样，那这个时候很有可能是因为层级了，而我们刚刚是不是正好使用了定位啊，所以呢，在这儿为了确认这个事情呢，我们在这儿呢，会给他设一个Z。

X，哎，来在这呢，我们成绩高一点，99，再来看输入内容再一点，哎，是吧，这个世界就出来了，那说明一个事情，刚刚点不了，就是因为它层级低了，一定是被其他元素压住了。OK，搞完了这个以后呢，那其实接下来我们的逻辑就可以写在这了，this.search content等于一个空串，是不是就可以最后再验证一下啊，输入内容，点击叉号清空，好，那到现在为止呢，我们搜索图书的这个搜索功能界面啊，就已经绘制完毕，好这节课呢，我们先讲到这里。