Cara vue menembusi gaya komponen ui

Dengan aplikasi meluas rangka kerja Vue, pembangun semakin memberi perhatian kepada pelaksanaan dan pemprosesan pelbagai butiran rangka kerja Vue, salah satunya ialah cara untuk menembusi gaya komponen UI. Artikel ini akan memperkenalkan cara Vue menembusi gaya komponen UI.

1. Mengapa anda perlu menembusi gaya komponen UI?

Dalam rangka kerja Vue, kami sering menggunakan komponen UI untuk melengkapkan beberapa interaksi biasa dan elemen visual. Walau bagaimanapun, memandangkan komponen UI ialah modul terkapsul bebas, helaian gayanya juga ditutup, menyukarkan kami untuk mengubah suai gayanya secara fleksibel adalah seperti berikut:

(1) Gaya lalai komponen UI dan. gaya halaman Tidak sepadan, gaya perlu diubah suai untuk memenuhi keperluan halaman; 🎜> (3) Perubahan keadaan komponen UI memerlukan pengubahsuaian dinamik gaya, seperti tuding, fokus, dilumpuhkan, dsb.

Untuk menyelesaikan masalah ini, kami perlu menembusi gaya komponen UI untuk mencapai penyesuaian gaya dan perubahan dinamik.

Gunakan slot skop Vue untuk melaksanakan gaya yang menembusi komponen UI

Slot (slot) skop Vue memasukkan kandungan ke lokasi tertentu dalam kaedah komponen. Melalui slot skop, kami boleh mengakses terus elemen DOM di dalam komponen, dengan itu mencapai gaya yang menembusi komponen UI.
2. Mengambil Element-UI sebagai contoh, kami akan menunjukkan cara mengubah suai gaya melalui slot skop.

Mula-mula, kami memperkenalkan perpustakaan komponen Elemen-UI dan mencipta komponen Butang asas:

<template>
  <el-button type="primary">按钮</el-button>
</template>

Seterusnya, kami menghantar nod teks butang ke komponen induk melalui slot skop, Dan menyesuaikan gaya dalam komponen induk:

<!-- Button.vue -->
<template>
  <el-button type="primary">
    <slot name="text">按钮</slot>
  </el-button>
</template>

<!-- Parent.vue -->
<template>
  <button is="el-button" type="primary">
    <template v-slot:text>
      <span class="button-text">自定义样式按钮</span>
    </template>
  </button>
</template>

<style scoped>
.button-text {
  font-size: 20px;
  color: #ff0000;
}
</style>

Dalam kod di atas, kami menghantar nod teks butang ke komponen induk melalui slot skop, dan menggunakan arahan v-slot untuk menentukan teks nama slot. Dalam komponen induk, kami menukar elemen butang kepada komponen Butang Elemen-UI melalui atribut is, dan menyesuaikan gaya dalam slot untuk mencapai penyesuaian dan penembusan gaya.

Gunakan /deep/ pseudo-class untuk melaksanakan gaya yang menembusi komponen UI

Selain slot skop, kami juga boleh menggunakan CSS /deep/ pseudo-class untuk mencapai Gaya yang menembusi komponen UI. Kelas pseudo /deep/ boleh memanjangkan skop gaya ke bahagian dalam subkomponen, dengan itu mengubah suai gaya subkomponen.
3. Mengambil iView sebagai contoh, kami akan menunjukkan cara menggunakan kelas pseudo /deep/ untuk mengubah suai gaya.

Mula-mula, kami memperkenalkan perpustakaan komponen iView dan mencipta komponen Butang asas:

<template>
  <Button>按钮</Button>
</template>

Seterusnya, kami menggunakan kelas pseudo /deep/ dan pemilih turunannya untuk mengubah suai komponen Button :

<template>
  <Button>按钮</Button>
</template>

Dalam kod di atas, kami menggunakan /deep/ pseudo-class untuk memilih elemen .ivu-btn di dalam komponen Button dan mengubah suai warna latar belakang dan warna teks melalui helaian gaya untuk mencapai penyesuaian daripada gaya.

Perlu diambil perhatian bahawa kelas pseudo /deep/ akan menggunakan gaya pada semua elemen DOM dalam komponen dan pengubah suai berskop perlu ditambahkan pada helaian gaya untuk berkuat kuasa.

Ringkasan

Dalam rangka kerja Vue, untuk menyelesaikan masalah seperti penyesuaian dan perubahan dinamik gaya komponen UI, kami boleh menggunakan slot skop dan /deep/ pseudo Kelas melaksanakan gaya yang menembusi komponen UI. Kaedah ini membolehkan kami mengubah suai gaya komponen UI dengan lebih fleksibel, dengan itu mencapai kesan visual dan interaktif yang lebih baik.

Atas ialah kandungan terperinci Cara vue menembusi gaya komponen ui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!