Bagaimana untuk mengalih keluar sempadan dengan Vue? Analisis ringkas kaedah

Vue ialah rangka kerja Javascript moden dan ringan yang dibangunkan untuk membina aplikasi satu halaman (SPA). Vue ialah rangka kerja yang sangat fleksibel yang membolehkan pembangun membina aplikasi hadapan interaktif berkualiti tinggi, modular dan boleh guna semula dengan cepat dan mudah. Dalam Vue, biasanya terdapat dua cara untuk mengalih keluar sempadan: melalui CSS dan melalui prop Vue.

Kaedah 1: Alih keluar sempadan melalui CSS

Gaya dalam komponen Vue boleh dikawal melalui CSS. Oleh itu, kita boleh menggunakan peraturan CSS untuk mengalih keluar sempadan komponen. Sebagai contoh, gaya berikut boleh digunakan untuk mengalih keluar sempadan komponen butang Vue:

button {
  border: none;
}

Jika anda ingin mengalih keluar sempadan semua komponen, anda boleh menggunakan kod berikut:

* {
  border: none;
}

Ini akan Digunakan pada semua elemen pada halaman, tetapi boleh menjejaskan reka letak dan penggayaan beberapa elemen.

Kaedah 2: Alih keluar sempadan melalui prop Vue

Selain menggunakan peraturan CSS, anda juga boleh menggunakan prop Vue untuk mengawal sama ada komponen memaparkan sempadan. Sebagai contoh, komponen butang Vue mempunyai prop yang dipanggil "plain". Apabila ditetapkan kepada benar, sempadan komponen butang boleh dialih keluar. Berikut ialah kod contoh:

<template>
  <button :plain="true">按钮</button>
</template>

Ini akan menyebabkan butang tanpa sempadan.

Jika anda ingin mengalih keluar sempadan semua komponen, anda boleh mencipta campuran yang akan menambah prop pada semua komponen.

Vue.mixin({
  props: {
    plain: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    borderStyle: function() {
      return this.plain ? 'none' : 'initial';
    }
  }
});

Di sini, kami menambahkan prop bernama "plain" pada mixin Vue, dengan nilai lalai adalah palsu. Kami juga menambahkan sifat terkira borderStyle yang menetapkan gaya kepada plain apabila none adalah benar, jika tidak, kami menetapkan gaya kepada initial.

Anda boleh menggunakan kod berikut dalam komponen anda untuk menggunakan campuran:

Vue.component('custom-component',{
  mixins: [commonMixin],
  template: '<div :style="{ border: borderStyle }">content</div>'
})

Ini akan mencipta komponen tersuai dengan prop plain kongsi dan harta terkira borderStyle, dan akan Gaya sempadan digunakan pada komponen ini.

Ringkasan:

Biasanya terdapat dua cara untuk mengalih keluar sempadan dalam Vue: melalui CSS dan melalui prop Vue. Gunakan peraturan CSS untuk mengawal gaya komponen dan gunakan prop Vue untuk mengawal sama ada komponen memaparkan sempadan. Tidak kira kaedah yang anda gunakan, anda boleh mengalih keluar sempadan komponen dengan mudah dan mencipta gaya tersuai untuk memenuhi keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar sempadan dengan Vue? Analisis ringkas kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!