本文接上文：vue手机商城项目实战（2）-底部选项卡公共组件实现
1、在views目录下新建Search.vue代码如下：
<template>
<div id="search">
<!-- 顶部导航栏 -fixed 固定-->
<mt-header fixed title="搜索">
<mt-button slot="left" icon="back" @click="goback">返回</mt-button>
</mt-header>
<!-- 搜索框 -->
<mt-search v-model="value" autofocus placeholder=" 请输入您想找的商品..." @keyup.enter.native="search" >
<!-- 这里显示搜索结果-后期会引入商品列表 -->
</mt-search>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui'
export default {
data(){
return {
value:''
}
},
methods:{
// 返回
goback(){
this.$router.go(-1);
},
// 这里调用搜索方法-这里目前先简化为弹窗
search(){
MessageBox("提示","搜索内容为："+this.value);
}
}
}
</script>
<style scoped>
#search{
position: fixed;
width:100%;
}
.mint-search{
margin-top: 40px;
}
/* /deep/可以改变深层组件样式但不会影响组件本身 */
/deep/ .mint-searchbar-inner{
border-radius: 18px;
}
/deep/ .mint-searchbar{
background-color: #eee;
}
</style>
我们把搜索框一按钮的形式引入到首页顶部导航栏右侧，点击跳转到搜索页，修改Home.vue代码如下：
<template>
<div id="home">
<!-- 顶部导航栏-fixed 固定 -->
<mt-header fixed title="首页">
<mt-button icon="search" slot="right" @click="search"></mt-button>
</mt-header>
</div>
</template>
<script>
export default {
methods:{
// 点击搜索按钮，跳转到搜索组件
search(){
this.$router.push({name:"Search"});
}
}
}
</script>
<style scoped>
</style>
在router\index.js新增搜索组件路由配置如下：
{
name:"Search",
path:"/search",
component:()=>import('@/views/Search.vue')
}
