Pembangunan komponen Vue: Kaedah pelaksanaan komponen segera gelembung

Pembangunan komponen Vue: Kaedah pelaksanaan komponen gesaan gelembung

Komponen gesaan gelembung biasanya digunakan dalam halaman web di mana pengguna perlu digesa, seperti sebagai tetikus Maklumat yang lebih terperinci perlu dipaparkan apabila melayang di atas sesuatu kawasan. Artikel ini akan memperkenalkan kaedah melaksanakan komponen gesaan gelembung dalam pembangunan komponen Vue dan memberikan contoh kod khusus.

1. Komponen komposisi

Komponen gesaan gelembung terutamanya terdiri daripada tiga bahagian berikut:

#🎜🎜 #Pencetus Pencetus merujuk kepada elemen yang perlu mencetuskan gesaan gelembung, yang boleh muncul apabila tetikus melayang atau diklik. Pencetus harus digayakan untuk menunjukkan bahawa ia mencetuskan hujung gelembung.

Kotak gelembung

Kotak gelembung ialah bingkai yang menggesa pengguna, dan biasanya mengandungi beberapa teks, gambar dan maklumat lain. Kotak gelembung hendaklah terletak di bawah/atas/kiri/kanan pencetus dan boleh diletakkan melalui CSS. Kotak gelembung boleh ditunjukkan/disembunyikan melalui arahan v-show Vue.

Kandungan

Kandungan merujuk kepada maklumat yang perlu dipaparkan dalam kotak gelembung, termasuk teks, gambar, dsb. Kandungan perlu diikat melalui sintaks interpolasi Vue untuk mengemas kini secara dinamik.

Kaedah pelaksanaan

Terdapat banyak cara untuk melaksanakan komponen gesaan gelembung dalam Vue Berikut ialah kaedah pelaksanaan biasa dan menyediakan contoh kod Khusus .

Tentukan komponen

Dalam Vue, kami boleh menentukan komponen melalui kaedah Vue.component(). Dalam contoh ini, kami mentakrifkan komponen yang dipanggil "petua alat".
• Vue.component('tooltip', {

templat: `

<div class="tooltip-container">
  <div class="tooltip-trigger" @mouseenter="showTooltip" @mouseleave="hideTooltip">
    <slot name="trigger"></slot>
  </div>
  <div class="tooltip-box" :class="positionClass" v-show="show">
    <span class="tooltip-arrow"></span>
    <div class="tooltip-content">
      <slot name="content"></slot>
    </div>
  </div>
</div>

`,

data() {
rree 🎜#},

kaedah: {

return {
  show: false,  // 是否显示气泡框
  position: 'top',  // 气泡框位置
}

},

dikira: {

showTooltip() {
  this.show = true
},
hideTooltip() {
  this.show = false
},

},

})#🎜#})

Dalam komponen, kami mentakrifkan tiga bahagian gesaan gelembung: pencetus, kotak gelembung dan kandungan. Pencetus dan kandungan ditakrifkan melalui slot Vue dan boleh digantikan apabila menggunakan komponen.

Tetapan gaya

Dalam CSS, kita perlu menggayakan pencetus untuk menunjukkan bahawa ia boleh mencetuskan petua gelembung untuk kotak gelembung Letakkannya jadi ia berada di bawah/atas/kiri/kanan pencetus;

.tooltip-trigger {
• kedudukan: relatif;
paparan: inline-block;

cursor: pointer;

}

#🎜 🎜#.tooltip-box {

kedudukan: mutlak;
z-index: 9999;
padding: 10px;
background-color: #fff;
border: 1px pepejal #ccc;

jejari sempadan: 4px;

bayang-bayang kotak: 0 0 5px rgba(0, 0, 0, 0.3);
saiz fon: 14px;#🎜🎜 # line-height: 1.5;
text-align: center;
}

.tooltip-box-top {
bawah: 100%;
kiri: 50%;
transform: translateX(-50%);
}

.tooltip-box-bawah {

atas: 100%;#🎜🎜 # kiri: 50%;

transform: translateX(-50%);
}

.tooltip-box-left {
atas: 50%;#🎜 🎜# kanan: 100%;

transform: translateY(-50%);

}

.tooltip-box-right {
atas: 50%;# 🎜🎜# kiri: 100%;
transformasi: terjemahY(-50%);

}

.alat-anak panah {
kedudukan: mutlak;#🎜🎜 # lebar: 0;
tinggi: 0;
lebar sempadan: 6px;

gaya sempadan: pepejal;

warna sempadan: lutsinar lutsinar #fff lutsinar;#🎜🎜 #}


Menggunakan komponen

Apabila menggunakan komponen, kita perlu menggunakan komponen induk untuk mengandungi pencetus dan kotak gelembung, dan lulus slot untuk menggantikan ia. Sebagai contoh, dalam kod berikut, kami menggunakan butang sebagai pencetus dan div sebagai kandungan. Ambil perhatian bahawa dalam pencetus dan kandungan, kita perlu menetapkan slot="trigger" dan slot="content" masing-masing agar sepadan dengan nama slot dalam templat komponen.


Butang

Ini adalah maklumat petua .

Apabila menggunakan komponen, kita boleh menentukan kedudukan kotak gelembung. Contohnya:

• Butang
Ini ialah mesej segera.

Ini akan meletakkan kotak gelembung di bawah picu.

Ringkasan

Melalui langkah di atas, kami boleh melaksanakan komponen gesaan gelembung ringkas dengan mudah. Sudah tentu, kami juga boleh mengoptimumkan komponen, seperti menambah kesan animasi, menggunakan Vuex untuk pengurusan negeri, dsb. Dalam penggunaan sebenar, kita boleh memilih mengikut keperluan sebenar, dan mengulang dan mengoptimumkan semasa proses pembangunan.

Atas ialah kandungan terperinci Pembangunan komponen Vue: Kaedah pelaksanaan komponen segera gelembung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!