vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演

this.$emit('cancel');
},
confirm(){
this.hide();
this.$emit('confirm');
}
}
}
</script>

<style lang="scss" scoped>

$search-z-index: 1200;
$search-popup-z-index: $search-z-index + 10;
$modal-bgc: rgba(0, 0, 0, 0.4);

@mixin flex-center($direction: row) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
@mixin ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.mine-confirm-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $search-popup-z-index;
@include flex-center();
background-color: $modal-bgc;
}

.mine-confirm {
overflow: hidden;
width: 88%;
background-color: #fff;
border-radius: 10px;
font-size: 16px;

&-title {
padding: 20px 15px 0;
font-size: 18px;
text-align: center;
@include ellipsis();

& + .mine-confirm-msg {
padding-top: 20px;
padding-bottom: 20px;
}
}

&-msg {
padding: 40px 15px;
text-align: center;
line-height: 1.5;
}

&-btns {
display: flex;
}

&-btn {
flex: 1;
height: 44px;
line-height: 44px;
background: none;
border: none;
}

&-cancel {
border-top: 1px solid #e3e5e9;
}

&-ok {
background-color: #f23030;
color: #fff;
}
}

.mine-confirm {
&-enter-active,
&-leave-active {
transition: opacity 0.3s;
}

&-enter,
&-leave-to {
opacity: 0;
}

&-enter-active {
.mine-confirm {
animation: bounce-in 0.3s;
}
}
}

// https://cn.vuejs.org/v2/guide/transitions.html#CSS-动画
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>

 搜索结果页

src/pages/search/result.vue

<template>
  <div class="result">
  <div class="loading-container" v-show="loading">
   <me-loading/>
  </div>
  <ul class="g-list" v-show="!loading && results.length">
   <li
    class="g-list-item"
    v-for="(item, index) in results"
    :key="index"
    @click="$_selectItem(item[0])"
   >
    <span class="g-list-text">{{item[0]}}</span>
   </li>
  </ul>
  <div class="no-result" v-show="!loading && !results.length">没有结果</div>								 
 6/8   首页 上一页 4 5 6 7 8 下一页 尾页