闲云旅游网02（基于vue+element ui）
生活随笔
收集整理的這篇文章主要介紹了
闲云旅游网02（基于vue+element ui）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首頁開發(fā)
項(xiàng)目GitHub地址：https://github.com/q2419068625/xianyun
新建公共組件
頭部組件
在components文件夾中新建頭部組件components/header.vue。
<!-- logo --><div class="logo"><nuxt-link to="/"><img src="http://157.122.54.189:9093/images/logo.jpg" alt=""></nuxt-link></div><!-- 菜單欄 --><el-row type="flex" class="navs"><nuxt-link to="/">首頁</nuxt-link><nuxt-link to="/post">旅游攻略</nuxt-link><nuxt-link to="/hotel">酒店</nuxt-link><nuxt-link to="/air">國(guó)內(nèi)機(jī)票</nuxt-link> </el-row><!-- 登錄/用戶信息 --><el-row type="flex" align="middle"><!-- 如果用戶存在則展示用戶信息，用戶數(shù)據(jù)來自store --><el-dropdown v-if="false"><el-row type="flex" align="middle" class="el-dropdown-link"><nuxt-link to="#"><img src="http://157.122.54.189:9093/images/pic_sea.jpeg"/>用戶名</nuxt-link><i class="el-icon-caret-bottom el-icon--right"></i></el-row><el-dropdown-menu slot="dropdown"><el-dropdown-item><nuxt-link to="#">個(gè)人中心</nuxt-link></el-dropdown-item><el-dropdown-item><div @click="handleLogout">退出</div> </el-dropdown-item></el-dropdown-menu></el-dropdown><!-- 不存在用戶信息展示登錄注冊(cè)鏈接 --><nuxt-link to="/user/login" class="account-link" v-else>登錄 / 注冊(cè) </nuxt-link></el-row></el-row> </header>
頁腳組件
在components文件夾中新建頭部組件components/footer.vue。
<template><div class="footer-wrapper"><div class="footer"><el-row class="info-list"><el-col :span="6" :offset="1"><h5>閑云旅游旅游網(wǎng)</h5><p>上億旅行者共同打造的"旅行神器"</p><p><span>60,000</span> 多個(gè)全球旅游目的地</p><p><span>600,000</span> 個(gè)細(xì)分目的地新玩法</p><p><span>760,000,000</span> 次攻略下載</p><p><span>38,000</span> 家旅游產(chǎn)品供應(yīng)商</p></el-col><el-col :span="5"><h5>關(guān)于我們</h5><p>隱私政策 商標(biāo)聲明</p><p>服務(wù)協(xié)議 游記協(xié)議</p><p>商城平臺(tái)服務(wù)協(xié)議</p><p>網(wǎng)絡(luò)信息侵權(quán)通知指引</p><p>閑云旅游旅游網(wǎng)服務(wù)監(jiān)督員</p><p>網(wǎng)站地圖加入閑云旅游</p></el-col><el-col :span="5"><h5>旅行服務(wù)</h5><p>旅游攻略 酒店預(yù)訂</p><p>旅游特價(jià) 國(guó)際租車</p><p>旅游問答 旅游保險(xiǎn)</p><p>旅游指南 訂火車票</p><p>旅游資訊 APP下載</p></el-col><el-col :span="6" class="scan"><p><img src="http://157.122.54.189:9093/images/1556522965.png" alt=""></p>關(guān)注我們</el-col></el-row><div class="licence">京ICP備08001421號(hào) 京公網(wǎng)安備110108007702 Copyright ? 2016-2019 博學(xué)谷 All Rights Reserved</div></div></div> </template><script> export default {} </script><style scoped lang="less">.footer-wrapper{background:#333;color:#ccc;min-width:1000px;}.footer{padding-top:30px;margin:0 auto;width:1000px;}.info-list{h5{font-weight: normal;font-size:16px;margin-bottom:10px;}p{font-size:12px;line-height: 1.8;span{color:orange;}}}.scan{text-align: center;img{width:140px;height:140px;;}font-size:12px;}.licence{border-top:1px #666 solid;margin-top:20px;padding:50px 0;text-align: center;font-size:12px;} </style>首頁輪播圖
實(shí)現(xiàn)步驟
新增輪播圖布局
把pages/index.vue內(nèi)容替換成以下代碼：
<template><div class="container"><!-- 幻燈片 --><el-carousel :interval="5000" arrow="always"><el-carousel-item v-for="(item, index) in banners" :key="index"><div class="banner-image" :style="`background:url(${item.url}) center center no-repeat;background-size:contain contain;`"></div></el-carousel-item></el-carousel></div> </template><script> export default {data(){return {// 輪播圖數(shù)據(jù)banners: [{url: "http://157.122.54.189:9095/assets/images/th03.jfif",},{url: "http://157.122.54.189:9095/assets/images/th04.jfif",}]}} } </script><style scoped lang="less"> .container{min-width:1000px;margin:0 auto;position:relative;/deep/ .el-carousel__container{height:700px;}.banner-image{width:100%;height:100%;} } </style>請(qǐng)求后端接口數(shù)據(jù)
接下來使用接口數(shù)據(jù)來替換本地的靜態(tài)數(shù)據(jù)
接口地址：http://157.122.54.189:9095/scenics/banners
替換template的圖片地址為$axios.defaults.baseURL，因?yàn)榻涌诜祷氐膱D片鏈接是相對(duì)鏈接
<!--省略代碼--> <div class="banner-image" :style="`background:url(${$axios.defaults.baseURL}${item.url}) center center no-repeat;background-size:contain contain;`"> </div> <!--省略代碼-->搜索跳轉(zhuǎn)
思路
添加搜索框布局
搜索框tab切換執(zhí)行不同的操作
搜索跳轉(zhuǎn)
實(shí)現(xiàn)步驟
搜索框布局
把搜索框定位在輪播圖上，在pages/index.vue的template新增以下代碼
<template><div class="container"><!-- 幻燈片 --><!-- 省略代碼 --><!-- 搜索框 --><div class="banner-content"><div class="search-bar"><!-- tab欄 --><el-row type="flex" class="search-tab"><span v-for="(item, index) in options" :key="index" :class="{active: index === currentOption}"@click="handleOption(index)"><i>{{item.name}}</i></span></el-row><!-- 輸入框 --><el-row type="flex" align="middle" class="search-input"><input :placeholder="options[currentOption].placeholder" v-model="searchValue"@keyup.enter="handleSearch"/><i class="el-icon-search" @click="handleSearch"></i></el-row></div></div></div> </template>在pages/index.vue的script替換如下：
<script> export default {data(){return {banners: [], // 輪播圖數(shù)據(jù)options: [ // 搜索框tab選項(xiàng){name: "攻略", placeholder: "搜索城市", pageUrl: "/post?city="},{name: "酒店", placeholder: "請(qǐng)輸入城市搜索酒店", pageUrl: "/hotel?city="},{name: "機(jī)票", placeholder: "請(qǐng)輸入出發(fā)地", pageUrl: "/air"}],searchValue: "", // 搜索框的值currentOption: 0, // 當(dāng)前選中的選項(xiàng) }},mounted(){this.$axios({url: "/scenics/banners"}).then(res => {const {data} = res.data;this.banners = data;})},methods: {handleOption(index){},handleSearch(){}}, } </script>tab欄操作
實(shí)現(xiàn)切換效果，并且判斷如果切換的機(jī)票tab，那么直接跳轉(zhuǎn)到機(jī)票首頁
編輯methods下的handleOption方法
// 切換tab欄時(shí)候觸發(fā) handleOption(index){// 設(shè)置當(dāng)前tabthis.currentOption = index;// 如果切換的機(jī)票tab，那么直接跳轉(zhuǎn)到機(jī)票首頁const item = this.options[index];if(item.name === "機(jī)票"){return this.$router.push(item.pageUrl);} },搜索跳轉(zhuǎn)
確定搜索時(shí)候會(huì)跳轉(zhuǎn)到當(dāng)前tab的pageUrl頁面路徑，并且在url上攜帶上輸入框的值
// 搜索時(shí)候觸發(fā) handleSearch(){const item = this.options[this.currentOption];// 跳轉(zhuǎn)時(shí)候給對(duì)應(yīng)的頁面url加上搜索內(nèi)容參數(shù)this.$router.push(item.pageUrl + this.searchValue); }總結(jié)
總結(jié)
以上是生活随笔為你收集整理的闲云旅游网02（基于vue+element ui）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： koom koom-java-leak
- 下一篇： 闲云旅游网03（基于vue+elemen