视图层-Search-pdd项目实现在搜索页面点击取消返回商品列表

实现在搜索面板点击取消按钮返回商品列表

项目源码所在地址

https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd

定义数据

在搜索主面板Search.vue中定义一个数据设置搜索面板显示隐藏，并通过指令v-if给搜索面板

<template>
  <div class="search">
    <!--搜索框-->
    <search-nav/>
    <!--商品分类-->
    <shop/>
    <!--点击搜索框跳转的面板-->
    <search-panel v-if='isShow'/>
  </div>
</template>
<script>
//引入子组件
import SearchNav from "./Children/SearchNav";
import Shop from './Children/Shop';
import SearchPanel from "./Children/SearchPanel";

//引入第三方插件库实现滚动效果
import BScroll from 'better-scroll'
export default {
    name: 'Search',
    data() {
      isShow: false,  //设置搜索面板的显示与隐藏
    },
    components: {
      SearchNav,
      Shop,
      SearchPanel
 	}
}
</script>

---

点击搜索导航SearchNav.vue中的搜索框跳转到搜索面板SearchPanel.vue事件

在搜索主面板Search.vue中定义一个方法改变isShow的值

在搜索页面主面板Search.vue中定义

<script>
export default {
    methods: {
        isShowSearchPanel(flag) {
            this.isShow = flag;
        }
    }
}
</script>

向搜索导航SearchNav.vue中传递方法

将这个方法传递个搜索导航SearchNav.vue面板中

<template>
  <div class="search">
    <!--搜索框-->
    <search-nav :isShowSearchPanel="isShowSearchPanel"/>
    <!--商品分类-->
    <shop/>
    <!--点击搜索框跳转的面板-->
    <search-panel v-if='isShow'/>
  </div>
</template>

在搜索导航面板SearchNav.vue中接收这个方法

SearchNav.vue

<script>
export default {
  name: "SearchNav",
  props: {
    isShowSearchPanel : Function
  }
}
</script>

在搜索导航面板SearchNav.vue中绑定一个点击事件触发这个方法

SearchNav.vue

<template>
  <div class="search-nav">
    <a href="" class="search-nav-icon" @click.prevent="isShowSearchPanel(true)">
      <img src="../images/search.png" alt="" width="25px">
      <span>拼多多</span>
    </a>
  </div>
</template>

---

点击搜索面板SearchPanel.vue中的取消按钮返回搜索主面板Search.vue

向搜索面板SearchPanel.vue中传递这个点击方法

Search.vue

<template>
  <div class="search">
    <!--搜索框-->
    <search-nav :isShowSearchPanel="isShowSearchPanel"/>
    <!--商品分类-->
    <shop/>
    <!--点击搜索框跳转的面板-->
    <search-panel v-if='isShow' :isShowSearchPanel="isShowSearchPanel"/>
  </div>
</template>

在搜索面板SearchPanel.vue中接收这个方法

SearchPanle.vue

<script>
export default {
  name: "SearchPanel",
  props: {
    isShowSearchPanel: Function
  }
}
</script>

在取消按钮绑定一个点击事件触发这个方法

SearchPanel.vue

<template>
  <div class="search-panel">
    <div class="search-nav">
      <div class="search-input">
        <img src="../images/search.png" alt="" width="25px">
        <label>
          <input type="search" placeholder="拼多多">
        </label>
      </div>
      <button @click.prevent="isShowSearchPanel(false)">取消</button>
    </div>
  </div>
</template>