vue elementui pengubahsuaian gaya butang

Vue.js ialah rangka kerja JavaScript untuk membina aplikasi web interaktif dan ElementUI ialah rangka kerja UI berdasarkan Vue.js.

Sebagai salah satu rangka kerja UI bahagian hadapan yang biasa digunakan, ElementUI menyediakan banyak komponen yang mudah digunakan oleh pembangun Komponen butang adalah perkara yang biasa kami gunakan, tetapi kadangkala gaya butang lalai mungkin tidak memenuhi projek atau keperluan, pada masa ini kita perlu mengubah suai gaya butang. Artikel ini akan memperkenalkan cara menggunakan gaya untuk mengubah suai gaya butang.

Gaya butang dalam ElementUI boleh diubah suai dengan cara berikut:

1 Ubah suai melalui nama kelas

Komponen butang ElementUI mempunyai beberapa kelas gaya lalai. untuk kegunaan pembangun, seperti utama, bahaya, amaran, maklumat, kejayaan, dsb. Kita boleh menukar warna dan gaya butang melalui nama kelas ini.

<el-button type="primary">primary</el-button>
<el-button type="danger">danger</el-button>
<el-button type="warning">warning</el-button>
<el-button type="info">info</el-button>
<el-button type="success">success</el-button>

Jenis di sini ialah nama kelas gaya butang.

Kami juga boleh mengubah suai gaya dengan menyesuaikan nama kelas:

<el-button class="my-btn">Custom</el-button>

2 Ubah suai melalui gaya sebaris

Ia juga boleh mengubah suai gaya butang melalui gaya sebaris Kaedah ini. boleh dicapai dengan menambah atribut gaya pada komponen butang:

.my-btn{
  background-color: #409EFF;
  color: #fff;
}

3 Dengan mengubah suai gaya global

Jika ia perlu digunakan pada semua butang dalam keseluruhan projek, kami boleh mengubah suai. gaya ElementUI Global dilaksanakan. Dalam Vue, kita boleh mengubah suai gaya ElementUI dengan mencipta fail .scss baharu dan memperkenalkannya dalam fail kemasukan projek.

Berikut ialah contoh mengubah suai gaya butang ElementUI:

<el-button style="background-color: #409EFF; color: #fff;">Custom</el-button>

Dalam contoh di atas, kami menukar warna tema dan saiz bulat butang dengan mengubah suai pembolehubah global ElementUI, dan kemudian tentukan gaya butang kami sendiri, dan menambah kesan dinamik apabila melayang. Gunakan nama kelas tersuai untuk menulis ganti gaya asal ElementUI untuk mengubah suai gaya butang.

Ringkasan

Di atas ialah beberapa cara untuk mengubah suai gaya komponen butang ElementUI Kita boleh menggunakan kaedah ini untuk melaksanakan gaya tersuai. Anda hanya perlu memilih kaedah pengubahsuaian yang sepadan mengikut keperluan khusus untuk mencapai hasil yang lebih baik pada halaman.

Atas ialah kandungan terperinci vue elementui pengubahsuaian gaya butang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!