本文接上文: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') }