kotak carian vue menukar warna latar belakang

Memandangkan rangka kerja Vue semakin digunakan dalam pembangunan bahagian hadapan, cara menggunakan kotak carian dan menukar warna latar belakangnya dalam rangka kerja Vue telah menjadi tumpuan pembangun.

Artikel ini akan memperkenalkan cara menambah kotak carian dalam rangka kerja Vue dan menukar warna latar belakangnya melalui gaya tersuai untuk membantu pembangun membangunkan aplikasi Vue dengan lebih baik.

1. Tambah kotak carian

Pertama sekali, menambah kotak carian dalam rangka kerja Vue memerlukan penggunaan komponen Vue. Kita boleh menggunakan kotak carian sebagai komponen yang berasingan dan merujuknya di mana perlu.

Berikut ialah contoh komponen kotak carian mudah:

<template>
  <div class="search-box">
    <input type="text" placeholder="搜索..." v-model="query" @input="search" />
  </div>
</template>

<script>
export default {
  name: "SearchBox",
  data() {
    return {
      query: ""
    }
  },
  methods: {
    search() {
      this.$emit("search", this.query);
    }
  }
}
</script>

<style>
.search-box {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
}
</style>

Dalam komponen ini, kami menggunakan kotak input dan kaedah carian, yang dicetuskan oleh peristiwa $emitsearch dan hantar teks dalam kotak carian sebagai parameter acara.

2. Sesuaikan gaya kotak carian

Seterusnya, mari lihat cara menukar warna latar belakang kotak carian melalui gaya tersuai.

Pertama, kita boleh menggunakan kelas pseudo CSS :focus untuk mengawal gaya kotak carian apabila ia mendapat fokus. Apabila kotak carian mendapat fokus, kami menukar warna latar belakangnya kepada biru.

.search-box input:focus {
  outline: none;
  border-color: #0099ff;
  box-shadow: 0 0 3px rgba(0,153,255,.5);
}

Kemudian, kita boleh menggunakan kelas pengikatan dinamik Vue untuk menambah gaya berbeza pada kotak carian mengikut situasi yang berbeza. Sebagai contoh, kita boleh menghantar atribut color dalam kotak carian dan menambah warna latar belakang yang berbeza pada kotak carian berdasarkan nilai atribut yang berbeza.

<template>
  <div class="search-box" :class="color">
    <input type="text" placeholder="搜索..." v-model="query" @input="search" />
  </div>
</template>

<script>
export default {
  name: "SearchBox",
  props: {
    color: {
      type: String,
      default: "white"
    }
  },
  data() {
    return {
      query: ""
    }
  },
  methods: {
    search() {
      this.$emit("search", this.query);
    }
  }
}
</script>

<style>
.white {
  background-color: #fff;
}
.blue {
  background-color: #0099ff;
}
.yellow {
  background-color: #ffff00;
}
</style>

Apabila menggunakan kotak carian, kita boleh menghantar nilai atribut color yang berbeza. Contohnya:

<SearchBox color="blue"/>
<SearchBox color="yellow"/>

Dengan cara ini, kami boleh menambahkan gaya berbeza pada kotak carian secara fleksibel.

Ringkasan

Artikel ini memperkenalkan cara menambah kotak carian dalam rangka kerja Vue dan menukar warna latar belakangnya melalui gaya tersuai. Melalui contoh dalam artikel ini, kita dapat melihat bahawa fleksibiliti dan kebolehlanjutan mudah rangka kerja Vue memudahkan pembangun membangunkan aplikasi web berkualiti tinggi.

Pada masa yang sama, artikel ini juga mengingatkan pembangun bahawa apabila menggunakan rangka kerja Vue untuk membangunkan aplikasi, mereka harus memberi perhatian untuk menguasai konsep teras dan sintaks Vue, dan membiasakan diri dengan pemalam Vue yang biasa digunakan. dan perpustakaan komponen, supaya dapat membangunkan aplikasi Web yang cekap dan berskala, mudah diselenggara dengan lebih baik.

Atas ialah kandungan terperinci kotak carian vue menukar warna latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!