Ein Artikel, in dem das Vue+Flex-Layout zur Implementierung der TV-End-Stadtliste ausführlich erläutert wird

Dieser Artikel vermittelt Ihnen relevantes Wissen über das Vue-Layout. Er fasst hauptsächlich zusammen und stellt vor, wie Vue den TV-seitigen Stadtlisteneffekt erzielt. Ich hoffe, dass dies der Fall ist Helfen Sie, wenn Sie es brauchen.

Vue verwendet Flex-Layout, um Städtelisten im Fernsehen zu implementieren.

Stadtlisten und -suchen sind in Vue weit verbreitet. In diesem Blog wird erläutert, wie Such- und Städtelisten implementiert werden:

<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. Fokus:

Hauptsächlich festgelegt in div: focusable="true" und @focus="onFocus"

.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;
}

6. Fokus-Hintergrundfarbe und Schrifteffekt festlegen:

Hauptsächlich festgelegt: doubleParentState="true", wenn der Text erhält Die Farbe wird nicht durch das übergeordnete Layout beeinflusst. Sie können auch die Fokusvergrößerung und Randeffekte festlegen: :style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}

ed76d99cadb54934987ccda60213aaab
  d6742aa8100a6a3b19dbdf5cde037991
    749714ddfb4ec5038e2e50724dac60ce
      735b094dcf8a1672f3afdb0f768b9e06
      452857a82653e215279b047c3a6aa938
    16b28748ea4df4d9c2150843fecfba68
    5dac3396ba0354581e28393488b4f440{{item.cityName}}54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68

7. Suchfeld-Eingabeereignis:

.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;
}

9. Die TV-Softtastatur wird standardmäßig angezeigt:

af9547faf23048e844d45e2fa2140ce2
          749714ddfb4ec5038e2e50724dac60ce
            735b094dcf8a1672f3afdb0f768b9e06
            452857a82653e215279b047c3a6aa938
 16b28748ea4df4d9c2150843fecfba68

10 folgt:

:enableFocusBorder="true"//设置获得焦点时的边框
:focusScale="1.0"//设置焦点放大时的倍数

11 Der Screenshot des erzielten Effekts ist wie folgt:

Verwandte Empfehlungen: vuejs Video-Tutorial

Das obige ist der detaillierte Inhalt vonEin Artikel, in dem das Vue+Flex-Layout zur Implementierung der TV-End-Stadtliste ausführlich erläutert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!