本篇文章给大家带来了关于vue布局的相关知识，其中主要给大家总结介绍vue是怎么利用flex布局来实现tv端城市列表效果的，非常全面详细，下面一起来看一下，希望对需要的朋友有所帮助。
vue利用flex布局实现tv端城市列表
vue中城市列表和搜索很常见，这篇博客就来说说咋实现搜索和城市列表
1.实现搜索布局代码：
<div class="search-bar"> <input class="search-input" v-model="citysearchresult" :placeholder="searchdefault" :key="searchtitle" @endediting="endediting" :focusable="true" ref="searchinput" :duplicateparentstate="true" :enablefocusborder="true"/> <img class="index-root-search-image-view-css" :src="searchicon"> <span class="index-root-search-text-view-css" ref="textviewcity">{{searchdefaultkeyword}}</span></div>
2.搜索布局css样式代码：
.search-bar-root { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 140px;}.index-root-search-title-css { flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px;}.search-bar-root .search-bar { background-color: #ffffff; width: 1000px; height: 100px; display: flex; justify-content: center; border-radius: 8px;}.search-input { width: 780px; border-radius: 8px; font-size: 36px; font-family: pingfangsc-regular, pingfang sc; font-weight: 400; color: #000000; margin-left: 40px; text-indent: 40px;}.index-root-search-image-view-css { position: absolute; width: 32px; height: 32px; top: 35px; bottom: 35px; right: 0; margin-right: 102px; text-align: center;}.index-root-search-flex-view-css { display: flex; flex-wrap: wrap; flex-direction: row; width: 1450px; margin-left: 245px; margin-right: 245px; margin-top: 40px;}.index-root-search-text-view-css { font-size: 30px; font-family: pingfangsc-regular, pingfang sc; color: #000000; text-align: center; font-weight: 400; top: 0; bottom: 0; right: 0; position: absolute; margin-right: 30px;}.index-root-search-title-text-view-css { font-size: 70px; font-family: pingfangsc-regular, pingfang sc; color: #ffffff; text-align: center; opacity: 1.0;}.search-city-button-view-css { width: 270px; height: 100px; background-color: rgba(0, 0, 0, .1); margin-right: 20px; margin-top: 40px; border-radius: 11px; border-width: 2px; border-color: rgba(255, 255, 255, 0.1); focus-background-color: #fff;}.search-city-button-view-css .city-sel-box { border-width: 2px; border-color: #32c5ff;}
3.城市列表布局代码：
<div class="index-root-search-flex-view-css" :clipchildren="false" ref="citysearch"> <div class="search-city-button-view-css" v-for="(item,cityid) in hotcity" :focusable="true" :key="cityid" :ref="`hotref${cityid}`" @focus="onfocus" :clipchildren="false"> <div class="icon-location-reactive" ref="searchlocation" :duplicateparentstate="true" style="visibility: visible;margin-right: 20px" v-if="showhot && cityid===0"> <img src="@/assets/location.png" alt="" class="icon-location" showonstate="normal"> <img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showonstate="focused"> </div> <span class="search-city-hot-text-iew-css" :duplicateparentstate="true" showonstate="focused" ref="searchhotselected" :style="{focuscolor: focushottextcolor,fontsize: textfontsize,fontweight: textfontweight,}">{{item.cityname}}</span> </div>
4.城市列表css样式代码：
.index-root-search-flex-view-css { display: flex; flex-wrap: wrap; flex-direction: row; width: 1450px; margin-left: 245px; margin-right: 245px; margin-top: 40px;}.index-root-search-text-view-css { font-size: 30px; font-family: pingfangsc-regular, pingfang sc; color: #000000; text-align: center; font-weight: 400; top: 0; bottom: 0; right: 0; position: absolute; margin-right: 30px;}.index-root-search-title-text-view-css { font-size: 70px; font-family: pingfangsc-regular, pingfang sc; color: #ffffff; text-align: center; opacity: 1.0;}.search-city-button-view-css { width: 270px; height: 100px; background-color: rgba(0, 0, 0, .1); margin-right: 20px; margin-top: 40px; border-radius: 11px; border-width: 2px; border-color: rgba(255, 255, 255, 0.1); focus-background-color: #fff;}.search-city-button-view-css .city-sel-box { border-width: 2px; border-color: #32c5ff;}.icon-location-reactive { position: absolute; width: 26px; height: 34px; margin-left: 60px; margin-top: 30px; margin-bottom: 30px;}.icon-location { width: 26px; height: 34px; position: absolute; left: 0; top: 0; z-index: 9;}.search-city-hot-text-iew-css { width: 270px; height: 100px; background-color: rgba(50, 197, 255, 0.1); border-radius: 11px; border: 2px solid #32c5ff; font-size: 36px; font-family: pingfangsc-regular, pingfang sc; text-align: center; color: white;}.search-city-empty { margin-top: 40px; width: 425px; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: 535px;}.search-city-empty .icon-no-connect { width: 425px; height: 307px;}.search-city-empty .empty-txt { font-size: 32px; font-family: pingfangsc-light, pingfang sc; font-weight: 300; color: #ffffff; margin-top: 60px;}
5.城市列表获取焦点的事件：
主要是在div设置:focusable="true"和@focus="onfocus"
<div class="search-city-button-view-css" v-for="(item,cityid) in hotcity" :focusable="true" :key="cityid" :ref="`hotref${cityid}`" @focus="onfocus" :clipchildren="false"> <div class="icon-location-reactive" ref="searchlocation" :duplicateparentstate="true" style="visibility: visible;margin-right: 20px" v-if="showhot && cityid===0"> <img src="@/assets/location.png" alt="" class="icon-location" showonstate="normal"> <img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showonstate="focused"> </div>
6.设置焦点背景颜色和字体效果：
主要是设置:duplicateparentstate="true"当文本获得焦点时颜色不受父布局影响，还可以设置焦点放大和带边框效果
:enablefocusborder="true"//设置获得焦点时的边框:focusscale="1.0"//设置焦点放大时的倍数
焦点效果的样式：:style="{focuscolor: focushottextcolor,fontsize: textfontsize,fontweight: textfontweight,}
<span class="search-city-hot-text-iew-css" :duplicateparentstate="true" showonstate="focused" ref="searchhotselected" :style="{focuscolor: focushottextcolor,fontsize: textfontsize,fontweight: textfontweight,}">{{item.cityname}}</span>
7.搜索框输入事件：
//输入内容之后请求城市列表接口刷新数据endediting(e) { console.log("--resultdata--", this.citysearchresult)},
8.搜索框获取焦点的事件：
onfocus(e) { this.focused = e.isfocused; this.$emit("onbuttonfocused", e.isfocused);},
9.默认弹出tv软键盘：
mounted() { this.hotcity = hotcity; this.showhot = true; this.pageloading = true //弹出软键盘 this.$refs.searchinput.focus() //搜索框默认获取焦点 this.sethideloading()},
10.完整代码如下：
<template> <div class="index-root-search-view-css" :clipchildren="false"> <img class="search-background-view-css" :src="searchimagedata"/> <div class="search-bar-root"> <div class="index-root-search-title-css"> <span class="index-root-search-title-text-view-css"> {{ searchtitle }}</span> </div> <div class="search-bar"> <input class="search-input" v-model="citysearchresult" :placeholder="searchdefault" :key="searchtitle" @endediting="endediting" :focusable="true" ref="searchinput" :duplicateparentstate="true" :enablefocusborder="true"/> <img class="index-root-search-image-view-css" :src="searchicon"> <span class="index-root-search-text-view-css" ref="textviewcity">{{searchdefaultkeyword}}</span> </div> <div class="index-root-search-flex-view-css" :clipchildren="false" ref="citysearch"> <div class="search-city-button-view-css" v-for="(item,cityid) in hotcity" :focusable="true" :key="cityid" :ref="`hotref${cityid}`" @focus="onfocus" :clipchildren="false"> <div class="icon-location-reactive" ref="searchlocation" :duplicateparentstate="true" style="visibility: visible;margin-right: 20px" v-if="showhot && cityid===0"> <img src="@/assets/location.png" alt="" class="icon-location" showonstate="normal"> <img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showonstate="focused"> </div> <span class="search-city-hot-text-iew-css" :duplicateparentstate="true" showonstate="focused" ref="searchhotselected" :style="{focuscolor: focushottextcolor,fontsize: textfontsize,fontweight: textfontweight,}">{{item.cityname}}</span> </div> <div class="search-city-empty" v-if="hotcity.length === 0"> <img src="@/assets/no_content.png" alt="" class="icon-no-connect"/> <p class="empty-txt">没有搜索结果~</p> </div> </div> </div> <loading-view style="width: 100px;height: 100px;position: absolute;left:960px;right:960px;top:500px;bottom:500px;align-self: center;align-items: center;justify-content: center" v-show="pageloading"/> </div></template><script>import searchimage from "@/assets/search_focus.png";import searchbackgroundimage from "@/assets/index-bg-qing.jpg";import {hotcity} from '@/views/contsants';import {eslaunchmanager} from "@extscreen/es-core";export default { name: "city_list", props: { searchkeyword: { type: string, default: '', }, focustextcolor: { type: string, default: '#000000' }, focushottextcolor: { type: string, default: '#00efff' }, textcolor: { type: string, default: '#ffffff' }, textfontsize: { type: string, default: '30px' }, textfontweight: { type: number, default: 400 }, focusbackground: { orientation: 'tl_br',//top_bottom,tr_bl, right_left, br_tl, bottom_top,bl_tr,left_right,tl_br, cornerradius: [40, 40, 40, 40], normal: ['#00000000', '#00000000'], focused: ['#f5f5f5', '#f5f5f5'], }, }, data() { return { pageloading: false, text: 'search city', search: '', searchicon: searchimage, searchimagedata: searchbackgroundimage, searchtitle: "切换城市", searchdefaultkeyword: '搜索', searchdefault: '请输入城市名称首字母或全拼', focuscolor: '#f5f5f5', citysearchresult: "", hotcity: [], cityname: "", cityid: "", showhot: true, params: '', } }, activated() { }, deactivated() { this.resetmodel() }, mounted() { this.hotcity = hotcity; this.showhot = true; this.pageloading = true //弹出软键盘 this.$refs.searchinput.focus() //搜索框默认获取焦点 this.sethideloading() }, methods: { sethideloading() { settimeout(() => { this.pageloading = false }, 500) }, onfocus(e) { this.focused = e.isfocused; this.$emit("onbuttonfocused", e.isfocused); }, //输入内容之后请求城市 endediting(e) { console.log("--resultdata--", this.citysearchresult) }, onbackpressed() { eslaunchmanager.finishespage(); }, resetmodel() { this.citysearchresult = ""; this.hotcity = []; this.pageloading = false; this.searchtitle = ""; this.searchdefaultkeyword = ""; this.searchdefault = ""; }, }}</script><style scoped>.index-root-search-view-css { width: 1920px; height: 1080px; background-color: transparent;}.search-background-view-css { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent;}.search-bar-root { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 140px;}.index-root-search-title-css { flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px;}.search-bar-root .search-bar { background-color: #ffffff; width: 1000px; height: 100px; display: flex; justify-content: center; border-radius: 8px;}.search-input { width: 780px; border-radius: 8px; font-size: 36px; font-family: pingfangsc-regular, pingfang sc; font-weight: 400; color: #000000; margin-left: 40px; text-indent: 40px;}.index-root-search-image-view-css { position: absolute; width: 32px; height: 32px; top: 35px; bottom: 35px; right: 0; margin-right: 102px; text-align: center;}.index-root-search-flex-view-css { display: flex; flex-wrap: wrap; flex-direction: row; width: 1450px; margin-left: 245px; margin-right: 245px; margin-top: 40px;}.index-root-search-text-view-css { font-size: 30px; font-family: pingfangsc-regular, pingfang sc; color: #000000; text-align: center; font-weight: 400; top: 0; bottom: 0; right: 0; position: absolute; margin-right: 30px;}.index-root-search-title-text-view-css { font-size: 70px; font-family: pingfangsc-regular, pingfang sc; color: #ffffff; text-align: center; opacity: 1.0;}.search-city-button-view-css { width: 270px; height: 100px; background-color: rgba(0, 0, 0, .1); margin-right: 20px; margin-top: 40px; border-radius: 11px; border-width: 2px; border-color: rgba(255, 255, 255, 0.1); focus-background-color: #fff;}.search-city-button-view-css .city-sel-box { border-width: 2px; border-color: #32c5ff;}.icon-location-reactive { position: absolute; width: 26px; height: 34px; margin-left: 60px; margin-top: 30px; margin-bottom: 30px;}.icon-location { width: 26px; height: 34px; position: absolute; left: 0; top: 0; z-index: 9;}.search-city-hot-text-iew-css { width: 270px; height: 100px; background-color: rgba(50, 197, 255, 0.1); border-radius: 11px; border: 2px solid #32c5ff; font-size: 36px; font-family: pingfangsc-regular, pingfang sc; text-align: center; color: white;}.search-city-empty { margin-top: 40px; width: 425px; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: 535px;}.search-city-empty .icon-no-connect { width: 425px; height: 307px;}.search-city-empty .empty-txt { font-size: 32px; font-family: pingfangsc-light, pingfang sc; font-weight: 300; color: #ffffff; margin-top: 60px;}</style>
11.实现的效果截图如下：
相关推荐：vuejs视频教程
以上就是一文详解vue+flex布局实现tv端城市列表的详细内容。