Bermula dengan VUE3 untuk pemula: Menggunakan komponen Vue.js untuk mencipta kesan menu lungsur

Vue.js ialah rangka kerja JavaScript popular yang membolehkan pembangun membuat aplikasi web interaktif dengan mudah. Seni bina komponennya adalah ciri pentingnya. Dalam artikel ini, kami akan memperkenalkan cara menggunakan komponen Vue.js untuk mencipta kesan menu lungsur.

1. Pasang Vue.js

Jika anda belum memasang Vue.js, sila gunakan arahan berikut untuk memasangnya dahulu:

npm install vue

Atau anda boleh memuat turunnya dalam Pusat Dokumen Vue.js, dan kemudian memperkenalkannya menggunakan teg <script> dalam fail HTML:

<script src="path/to/vue.js"></script>

2. Cipta contoh Vue

Mula-mula, kita perlu mencipta tika Vue di mana kita boleh menentukan komponen. Kita boleh menggunakan kod berikut untuk mencipta tika Vue:

var app = new Vue({
  el: '#app',
  data: {
    showMenu: false,
    options: [
      {text: 'Option 1', value: '1'},
      {text: 'Option 2', value: '2'},
      {text: 'Option 3', value: '3'}
    ]
  },
  methods: {
    toggleMenu: function() {
      this.showMenu = !this.showMenu;
    },
    selectOption: function(option) {
      console.log(option);
    }
  }
});

Titus Vue ini mempunyai dua sifat: showMenu digunakan untuk mengawal paparan dan menyembunyikan menu lungsur turun options ialah tatasusunan digunakan untuk menyimpan pilihan menu lungsur dalam .

Kami juga mentakrifkan dua kaedah: toggleMenu digunakan untuk menukar paparan dan menyembunyikan menu lungsur turun selectOption digunakan untuk mengendalikan peristiwa yang dicetuskan apabila pilihan dipilih.

3. Tentukan komponen menu lungsur

Sekarang, kita perlu mentakrifkan komponen Vue untuk memaparkan menu lungsur. Kita boleh menggunakan kod berikut:

Vue.component('dropdown', {
  props: {
    options: {
      type: Array,
      required: true
    },
    showMenu: {
      type: Boolean,
      required: true
    },
    selectOption: {
      type: Function,
      required: true
    }
  },
  template: `
    <div class="dropdown" v-bind:class="{ 'is-active': showMenu }">
      <div class="dropdown-toggle" v-on:click="toggle()">
        <span>Select an option</span>
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="dropdown-menu">
        <ul>
          <li v-for="option in options" v-on:click="select(option)">
            {{ option.text }}
          </li>
        </ul>
      </div>
    </div>
  `,
  methods: {
    toggle: function() {
      this.$emit('toggle');
    },
    select: function(option) {
      this.$emit('select', option);
    }
  }
});

Komponen ini mempunyai tiga sifat: options ialah senarai pilihan menu lungsur turun showMenu digunakan untuk mengawal paparan dan penyembunyian drop-down menu; selectOption adalah untuk mengendalikan kaedah acara pilihan pemilihan.

Dalam templat komponen, kami mentakrifkan dua <div> elemen, satu untuk menukar paparan dan menyembunyikan menu lungsur dan satu lagi untuk memaparkan senarai pilihan. Kami juga mentakrifkan dua pengendali acara untuk pengendalian pensuisan dan pemilihan.

4. Menggunakan komponen dalam HTML

Kini kita boleh menggunakan komponen dropdown kami dalam fail HTML:

<div id="app">
  <dropdown v-bind:options="options" v-bind:show-menu="showMenu" v-on:toggle="toggleMenu" v-on:select="selectOption"></dropdown>
</div>

Kami perlu memaparkan HTML elemen contoh Vue dan gunakan teg <dropdown> untuk memaparkan komponen menu lungsur. Kami juga menghantar sifat options dan showMenu contoh kepada komponen dan menggunakan v-on untuk mengikat pengendali acara kepada peristiwa toggle dan select komponen.

5. Gunakan gaya CSS untuk mencantikkan menu lungsur

Akhir sekali, kita perlu menambah beberapa gaya CSS untuk mencantikkan menu lungsur. Berikut ialah beberapa contoh gaya:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  padding: 0.5rem;
  background-color: #fff;
  border: 1px solid #ccc;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
  display: none;
}

.dropdown-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  padding: 0.5rem;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #f9f9f9;
}

Gaya di atas akan mencipta rupa menu lungsur yang bersih dan menarik.

6. Ringkasan

Dalam artikel ini, kami meneroka cara membuat komponen menu lungsur menggunakan Vue.js. Mula-mula kami mencipta contoh Vue dan menentukan komponen, kemudian menambah komponen pada fail HTML dan menambah gaya untuk mencantikkan menu lungsur. Menggunakan seni bina berasaskan komponen Vue.js, pembangun boleh membuat aplikasi web interaktif yang kompleks dengan mudah.

Atas ialah kandungan terperinci Bermula dengan VUE3 untuk pemula: Menggunakan komponen Vue.js untuk mencipta kesan menu lungsur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!