hellogithub-vue/src/components/Home/SearchInput.vue

<template>
    <div class="search-item">
        <el-popover
                placement="bottom"
                width="275"
                ref="popover"
                trigger="focus"
                :visible-arrow="false"
                style="padding-top: 0"
                v-model="visible"
                >
            <div class="search-content" v-show="this.$cookie.get('username')!=null">
                <div class="search-his" v-show="historySearch.length!=null">
                    <div>
                        <span class="title">搜索历史</span>
                        <span class="clear" @click="clearHistory"><i class="el-icon-circle-close"></i>清空</span>
                    </div>
                    <el-tag
                            v-for="(tag,index) in historySearch"
                            :key="index"
                            size="small"
                            closable
                            @close="handleClose(tag)"
                            style="margin-right: 10px; margin-top: 10px; cursor: pointer"
                            @click="handleSearch(tag)"
                            >
                        {{ tag }}
                    </el-tag>
                </div>
            </div>

        </el-popover>
        <el-input
                size="medium"
                :placeholder="tipsWord"
                style="width: 20vw"
                clearable
                v-popover:popover
                @keyup.enter.native="searchRequest"
                v-model="search">
            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchRequest"></i>
        </el-input>
    </div>
</template>


<script>
import axios from "axios";
import Vue from "vue";

export default {
    data() {
        return {

            visible: false,
            isMouseOver: false,
            search: '',
            tipsWord: '',
            historySearch: [],
            items: [
            ]
        }
    },
    methods: {
        handleSearch(word) {
            this.search = word
            this.searchRequest()
        },
        clearHistory() {
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/deleteAllLabel',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                if (res.data.code === 200) {
                    Vue.prototype.$notify({
                        title: '成功',
                        message: ('i', {style: 'color: teal'}, res.data.msg),
                        type: 'success',
                        offset: 50
                    });
                } else {
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                }
            });
        },
        searchRequest() {
            const params = {
                word: this.search || this.tipsWord
            }
            const queryString = new URLSearchParams(params).toString();
            const url = `${window.location.origin}/video/search?${queryString}`;
            window.open(url, '_blank');
        },
        gethistorySearch(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectUserLabel',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                // console.log(res.data);
                that.historySearch=res.data;
            });
        },
        handleClose(tag){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/deletelabel',
                // URL 中的查询参数
                params: {
                    tag:tag+';'
                }
            }).then((res)=>{
                if(res.date.code===200){
                    that.$message({
                        showClose: true,
                        message: res.date.msg,
                        type: 'success'
                    });
                }else{
                    that.$message({
                        showClose: true,
                        message: res.date.msg,
                        type: 'error'
                    });
                }
            });
        }
    },
    mounted() {
        this.tipsWord = "helloGithub";
        this.gethistorySearch();
    }
};
</script>

<style scoped>
.search-item ::v-deep .el-input .el-input__inner {
    border-radius: 8px !important;
}

.search-content span.title {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
}

.search-content .search-his span.clear {
    float: right;
    cursor: pointer;
}

.search-content .search-his span.clear:hover {
    color: #00aeec;
}

.search-content .mt {
    margin-top: 10px;
}

.search-content .search-hot {
    width: 100%;
}

.search-content .search-hot ul.hot-list {
    width: 100%;
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    margin-top: 5px;
    list-style: none;
}

.search-content .search-hot ul.hot-list li.hot-item {
    width: 50%;
    height: 30px;
    font-size: 15px;
    display: flex;
    cursor: pointer;
    align-items: center;
}

.search-content .search-hot ul.hot-list li.hot-item span:first-child {
    width: 10%;
    color: #999999;
    text-align: center;
    display: inline-block;
}

.search-content .search-hot ul.hot-list li.hot-item span:last-child {
    margin-left: 5px;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-content .search-hot ul.hot-list li.hot-item span.top {
    color: #EA322BFF;
}

.search-content .search-hot ul.hot-list li.hot-item:hover {
    background-color: #f2f2f2;
}

</style>