vue手机商城项目实战(3)-首页搜索框组件实现

Web前端 潘老师 2个月前 (09-16) 211 ℃ (0) 扫码查看

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

vue手机商城项目实战(3)-首页搜索框组件实现


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (4)
请潘老师喝杯Coffee吧!】
分享 (0)

您必须 微信登录 才能发表评论!

登录