枫枫知道个人博客|【项目相关】0208--文章搜索

[[ slide_text ]]

[[ item.content ]]

101

【项目相关】0208--文章搜索

发布时间：2022-02-09 作者：枫枫来源：枫枫知道个人博客

python Vue Django

前端的一些必备知识

判断类属性是否存在与节点中

```JavaScript
let box = document.querySelector('.search')
box.classList.contains('show')
```

添加与删除类属性

```JavaScript
box.classList.add('show')
box.classList.remove('show')
```

js实现新建标签页跳转

```JavaScript
window.open(url=`/?search=...`, name='_blank')
```

html结构

```JavaScript
<div class="search">
    <input v-model="search_key" type="text" placeholder="搜索文章">
    <button @click="show_search"><i class="fa fa-search"></i></button>
</div>
```

一共有四个地方要注意

![](http://python.fengfengzhidao.com/023/20220208130753.png)

![](http://python.fengfengzhidao.com/023/20220208130821.png)

![](http://python.fengfengzhidao.com/023/20220208130805.png)

![](http://python.fengfengzhidao.com/023/20220208130837.png)

这里的js代码比较简单

点击的时候去获取search标签，判断是否存在特定类属性

如果存在就说明是展开状态

如果不存在就说明是收缩状态

```JavaScript
show_search() {
    let box = document.querySelector('.search')
    if (!box.classList.contains('show_search')) {
        box.classList.add('show_search')
    } else {
        if (this.search_key){
            window.open(url=`/serach/?key=${this.search_key}`, name='_blank')
            return
        }
        box.classList.remove('show_search')
    }
}
```

css样式编写

css部分就比较复杂了，要对应四种状态，搜索框的展开与收缩，以及导航条的显示与隐藏，两两组合，共有四种状态

我们一一举例

导航条在顶部，搜索框收缩状态，对应的类名为

```CSS
nav .serach{

}
```

导航条在顶部，搜索框展开状态，对应的类名为

```CSS
nav .show_search{

}
```

导航条在其他位置，搜索框收缩状态，对应的类名为

```CSS
.show_nav .serach{

}
```

导航条在其他位置，搜索框展开状态，对应的类名为

```CSS
.show_nav .show_search{

}
```

然后去编写对应的代码

```CSS
nav .search {
  display: inline-flex;

input {
    border: none;
    padding-left: 10px;
    outline: none;
    width: 0;
    height: 40px;
    border-radius: 5px 0 0 5px;
    transition: all 0.3s;
    opacity: 0;
  }

button {
    width: 50px;
    height: 40px;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    background-color: rgba(white, 0);
    transition: all 0.3s;
  }
}

nav .show_search {
  input {
    width: 300px;
    opacity: 1;
    background-color: rgba(white, 0.5);

}

button {
    color: #333333;
    background-color: rgba(white, 0.5);

}
}

.show_nav .search {
  button {
    color: #333333;
  }
}

.show_nav .show_search {
  input {
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: #f0eeee;
  }

button {
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: #f0eeee;
  }
}
```

101

已经是第一篇啦下一篇：项目搭建

你觉得文章怎么样

清闲.

### 牛逼

10个月前
点赞（3）回复（2）

mustcd @ 清闲.

牛

2个月前
点赞（1）回复

mustcd @ 清闲.

6

2个月前
点赞（0）回复
苦酒

![emoji](https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/4a/2018new_xiaoku_thumb.png)

11个月前
点赞（1）回复（1）

mustcd @ 苦酒

6

2个月前
点赞（0）回复

枫枫知道个人博客

【项目相关】0208--文章搜索

清闲.

mustcd @ 清闲.

mustcd @ 清闲.

苦酒

mustcd @ 苦酒