Bagaimana untuk melaksanakan reka bentuk halaman seperti kamus Youdao dalam Vue?

Vue ialah rangka kerja JavaScript yang sangat popular untuk membina aplikasi web moden yang berprestasi tinggi. Dalam Vue, menggunakan pembangunan berasaskan komponen untuk membina halaman menjadikannya sangat mudah untuk melaksanakan pelbagai reka bentuk UI yang kompleks. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan reka bentuk halaman yang serupa dengan Kamus Youdao.

1. Reka bentuk halaman

Sebelum memulakan pelaksanaan Vue, mari kita lihat reka bentuk halaman Kamus Youdao tiruan. Reka bentuk dibahagikan kepada tiga bahagian utama: bar navigasi atas, kotak carian dan senarai hasil carian.

Bar navigasi teratas: Ia terdiri daripada logo dan dua pautan navigasi Logo boleh diklik untuk kembali ke halaman utama. Pautan navigasi biasanya termasuk "Laman Utama" dan "Terjemahan".

Kotak carian: termasuk kotak input dan butang carian. Pengguna boleh memasukkan perkataan atau frasa yang mereka ingin tanya dalam kotak input dan klik butang carian untuk membuat pertanyaan.

Senarai hasil carian: Hasil pertanyaan dibentangkan dalam bentuk senarai, dan setiap hasil pertanyaan termasuk definisi dan contoh ayat perkataan atau frasa.

2. Pembahagian komponen

Mengikut reka bentuk halaman, keseluruhan halaman boleh dibahagikan kepada tiga komponen: komponen bar navigasi, komponen kotak carian dan komponen hasil carian.

Komponen bar navigasi: Terutamanya bertanggungjawab untuk gaya dan logik bar navigasi atas.

Komponen kotak carian: Terutamanya bertanggungjawab untuk gaya dan logik kotak carian.

Komponen hasil carian: Terutamanya bertanggungjawab untuk memaparkan gaya dan logik hasil pertanyaan.

3. Pelaksanaan komponen

1. Komponen bar navigasi

Pertama sekali, komponen bar navigasi perlu diperkenalkan dalam App.vue Vue.

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'

export default {
  name: 'App',
  components: {
    NavBar
  }
}
</script>

<style>
/* 全局样式 */
</style>

Seterusnya, cipta komponen NavBar.vue dan tentukan gaya dan logik bar navigasi.

<template>
  <div id="nav-bar">
    <div class="nav-left">
      <img src="./assets/logo.png" alt="logo" @click="backToHome">
      <div class="nav-link" @click="$router.push('/')">首页</div>
      <div class="nav-link" @click="$router.push('/translate')">翻译</div>
    </div>
    <div class="nav-right">
      <!-- 登录按钮等右侧组件 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  methods: {
    backToHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style>
/* 导航栏样式 */
</style>

2. Komponen kotak carian

Komponen kotak carian mengandungi kotak input dan butang carian Pengguna memasukkan perkataan atau frasa untuk ditanya dalam kotak input dan mengklik butang carian untuk membuat pertanyaan. Sama seperti komponen bar navigasi, mula-mula perkenalkan komponen kotak carian dalam App.vue.

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <search-box></search-box>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox
  }
}
</script>

<style>
/* 全局样式 */
</style>

Seterusnya, cipta komponen SearchBox.vue dan tentukan gaya dan logik kotak carian.

<template>
  <div id="search-box">
    <input type="text" class="search-input" v-model="searchWord">
    <button class="search-btn" @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  data() {
    return {
      searchWord: ''
    }
  },
  methods: {
    search() {
      // 跳转到搜索结果页面，将searchWord作为查询参数
      this.$router.push({path: '/search', query: {word: this.searchWord}})
    }
  }
}
</script>

<style>
/* 搜索框样式 */
</style>

3. Komponen hasil carian

Komponen hasil carian bertanggungjawab terutamanya untuk memaparkan gaya dan logik hasil pertanyaan. Mula-mula memperkenalkan komponen hasil carian dalam App.vue.

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <search-box></search-box>
    <search-result v-if="$route.path === '/search'"></search-result>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'
import SearchResult from './components/SearchResult.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox,
    SearchResult
  }
}
</script>

<style>
/* 全局样式 */
</style>

Seterusnya, cipta komponen SearchResult.vue untuk menentukan gaya dan logik hasil carian. Dapatkan perkataan parameter pertanyaan dalam cangkuk kitaran yang dibuat dan dapatkan hasil pertanyaan dengan memanggil API luaran.

<template>
  <div id="search-result">
    <div v-if="resultLoading" class="result-loading">正在查询...</div>
    <ul v-else class="result-list">
      <li v-for="(item, index) in resultList" :key="index">
        <h3 class="result-word">{{item.word}}</h3>
        <p class="result-translation">{{item.translation}}</p>
        <p class="result-example">{{item.example}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SearchResult',
  data() {
    return {
      resultLoading: true,
      resultList: []
    }
  },
  created() {
    const query = this.$route.query
    if (query.word) {
      // 调用API查询结果
      this.resultLoading = false
      this.resultList = [...]
    }
  }
}
</script>

<style>
/* 搜索结果样式 */
</style>

Di sini kami hanya memperkenalkan secara ringkas kaedah pelaksanaan komponen Dalam pembangunan sebenar, ia perlu diselaraskan dan diperbaiki mengikut keperluan tertentu.

4. Ringkasan

Kaedah pembangunan berasaskan komponen Vue sangat fleksibel dan boleh melaksanakan pelbagai reka bentuk UI yang kompleks dengan mudah. Artikel ini memperkenalkan cara menggunakan Vue untuk melaksanakan aplikasi carian berkualiti tinggi dengan meniru reka bentuk halaman Kamus Youdao. Selain tiga komponen di atas, fungsi seperti rekod sejarah dan buku kosa kata juga boleh ditambah untuk meningkatkan pengalaman pengguna. Saya harap artikel ini akan membantu pembaca yang baru menggunakan Vue.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan reka bentuk halaman seperti kamus Youdao dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!