[TOC] ### 仿美團搜索框組件 ~~~ <template> <div class="header-search"> <!-- 搜索框 --> <div class="search-wrap"> <el-input v-model="search" @focus="onFoucs" @blur="onBlur" @input="onInput" placeholder="請輸入內容" class="search-input"></el-input> <el-button type="success" class="search-button"><i class="el-icon-search"></i></el-button> </div> <!-- 聚焦框 --> <dl class="focus-wrapper" v-if="showHotWords"> <dt>熱門搜索</dt> <dd v-for="(item, index) in hotWords" :key="index"><nuxt-link to="/2">{{item}}</nuxt-link></dd> </dl> <!-- 輸入關鍵詞框 --> <dl class="key-words" v-if="showSearchList"> <dd v-for="(item, index) in focusData" :key="index"><nuxt-link to="/1">{{item}}</nuxt-link></dd> </dl> <!-- 熱門搜索 --> <dl class="hot-keywords"> <dd v-for="(item,index) in searchData" :key="index"><nuxt-link to="/2">{{item}}</nuxt-link></dd> </dl> <!-- tag 標簽 --> <dl class="search-tag"> <dd>美團外賣</dd> <dd>貓眼電影</dd> <dd>美團酒店</dd> <dd>民宿／公寓</dd> <dd>商家入駐</dd> <dd>美團公益</dd> </dl> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { // 搜索關鍵詞 search: '', // 獲取焦點狀態 isFocus: false, // 熱門搜索 hotWords: ['北京動物園', '故宮博物院', '故宮', '北京歡樂谷', '八達嶺長城'], // 聚焦框數據 focusData: ['火鍋','火鍋自助餐','火鍋','火鍋串串'], // 搜索框數據 searchData: ['北京動物園','故宮博物院','故宮','北京歡樂谷','八達嶺長城','歡樂水魔方','水上樂園','十渡蹦極俱樂部'] } }, computed: { // 獲取焦點時，熱門搜索框出現，輸入關鍵詞 熱門搜索框隱藏 showHotWords() { return this.isFocus && this.search.length === 0 }, // 獲取焦點時，輸入關鍵詞，熱門搜索隱藏，搜索列表顯示 showSearchList() { return this.isFocus && this.search; } }, methods: { // 獲取焦點 onFoucs() { this.isFocus = true; }, // 失去焦點 onBlur() { setTimeout(() => { this.isFocus = false; }, 200) }, // 監聽input事件 onInput() { console.log('input') } } } </script> <style lang="scss" scoped> .header-search { position: relative; padding-left: 154px; /* 搜索框樣式 */ .search-wrap { display: flex; .search-input { width: 462px; height: 40px; /deep/ .el-input__inner { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; border-right: none; border-color: #13D1BE; } } .search-button { width: 88px; height: 40px; background: #13D1BE; border-color: #13D1BE; border-top-left-radius: 0; border-bottom-left-radius: 0; } } /* 熱搜詞樣式 */ .hot-keywords { padding: 10px 0; display: flex; dd { padding: 0 6px; a { color: #999; } } } /* tag樣式 */ .search-tag { padding-top: 30px; color: #222; display: flex; dd { font-weight: 700; font-size: 16px; margin-right: 20px; cursor: pointer; position: relative; } } /* 聚焦框樣式 */ .focus-wrapper { position: absolute; z-index: 1000; width: 462px; box-sizing: border-box; padding: 10px 10px; background-color: #f8f8f8; border: 1px solid #E5E5E5; border-top: none; box-shadow: 0 3px 5px 0 rgba(0,0,0,.1); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; dt { margin-bottom: 10px; } dd { display: inline-block; margin-right: 10px; line-height: 20px; a { color: #999; &:hover { color: #31BBAC; } } } } /* 搜索關鍵詞樣式 */ .key-words { position: absolute; z-index: 1000; width: 462px; box-sizing: border-box; padding: 10px 10px; background-color: #f8f8f8; border: 1px solid #E5E5E5; border-top: none; box-shadow: 0 3px 5px 0 rgba(0,0,0,.1); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; dd { color: #999; line-height: 30px; a { color: #333; &:hover { color: #31BBAC; } } } } } </style> ~~~