Meskipun ini cukup sering terjadi pada saya, saya masih memiliki daftar kecil perpustakaan favorit yang telah saya gunakan di banyak proyek, dan yang telah terbukti sangat berguna dari waktu ke waktu. Saya telah mencoba banyak pendekatan untuk memecahkan masalah yang dipecahkan oleh perpustakaan ini. Pilihan saya dipengaruhi oleh kenyamanan bekerja dengan perpustakaan, variasi kemampuannya, penampilan bagus dari apa yang diperoleh saat menggunakannya. Hasilnya, saya memiliki daftar yang ingin saya bagikan dengan Anda.
1. Menyembunyikan elemen dengan mengklik di luarnya
Terkadang Anda perlu memicu peristiwa ketika pengguna mengklik di luar elemen. Paling sering, Anda perlu melakukan ini saat Anda ingin agar Anda dapat menutup daftar drop-down atau kotak dialog. Ada satu paket untuk mengimplementasikan perilaku ini yang saya gunakan di hampir setiap aplikasi yang saya kembangkan.
Ini adalah pustaka vue-clickaway .
Menyembunyikan elemen saat Anda mengklik di luarnya
▍Menggunakan vue-clickaway
Saya biasanya menyertakan paket ini
main.js, yang memungkinkannya digunakan di seluruh aplikasi. Jika hanya berlaku untuk satu atau dua halaman, kemungkinan besar Anda memutuskan untuk mengimpornya hanya di tempat yang Anda butuhkan.
Saat mengimpornya satu per satu, ingat bahwa Anda mengimpor direktif, bukan komponen. Artinya, hal yang benar untuk dilakukan adalah:
directives: { onClickaway }
Tapi tidak seperti ini:
components: { onClickaway }
Berikut cara membuat arahan tersedia secara global (dalam
main.js):
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
Berikut cara menggunakan direktif ini dalam templat (di sini, untuk kesederhanaan, versi kode yang disingkat):
<button
v-on-clickaway="closeYearSelect"
class="select_option gray"
@click="toggleYearSelect"
>
<span class="txt">{{ selectedYear }}</span>
<span class="arrow blind">Open</span>
</button>
Bayangkan saya memiliki
<li>kolom lengkap untuk memilih item, termasuk daftar item (tidak ditampilkan dalam kode). Tombol di atas digunakan untuk menampilkan daftar di layar, dan ketika saya mengklik di luar elemen ini, saya dengan demikian memanggil metode yang menutup daftar. Ini memungkinkan pengalaman pengguna yang jauh lebih baik daripada selalu harus mengklik tombol tutup yang terletak di sudut elemen. Kami mendapatkan fungsionalitas ini dengan menambahkan konstruksi berikut ke deskripsi tombol:
v-on-clickaway="closeMethodName"
Perhatikan bahwa
vue-clickawayAnda harus selalu menggunakan metode yang menutup sesuatu, bukan metode yang menampilkan dan menyembunyikan elemen. Yang saya maksud adalah metode yang terhubung v-on-clickawayharus terlihat seperti ini:
closeMethod() {
this.showSomething = false
}
Tetapi metode ini seharusnya tidak seperti ini:
toggleMethod() {
this.showSomething = !this.showSomething
}
Jika Anda menggunakan sesuatu seperti metode
toggleMethod, maka saat Anda mengeklik di luar elemen, Anda akan membuka dan menutupnya, di mana pun Anda mengeklik. Anda mungkin tidak membutuhkannya. Jadi gunakan saja dengan v-on-clickawaymetode yang menyembunyikan elemen.
2. Pemberitahuan pop-up
Anda dapat membuat notifikasi bersulang menggunakan berbagai alat, tetapi saya penggemar berat pustaka vue-toastification .
Notifikasi yang diimplementasikan dengan vue-toastification
Ini memberi pengembang banyak penyesuaian yang dapat digunakan untuk mengimplementasikan notifikasi agar sesuai dengan berbagai macam kebutuhan. Gaya perpustakaan dan kapabilitas animasi untuk notifikasi memungkinkan Anda membuat solusi menarik dan ramah pengguna yang lebih baik daripada yang dapat Anda buat dengan paket lain.
▍Menggunakan vue-toastification
Perpustakaan
vue-toastificationdapat digunakan dengan berbagai cara. Lihat dokumentasinya untuk detailnya. Jadi, ini dapat digunakan di tingkat komponen, di tingkat global, atau bahkan dalam hubungannya dengan Vuex , jika pemberitahuan perlu ditampilkan berdasarkan perubahan status aplikasi, atau tindakan yang terkait dengan server.
Berikut adalah contoh penggunaan global pustaka ini (dalam
main.js):
import Toast from "vue-toastification"
//
import "vue-toastification/dist/index.css"
Vue.use(Toast, {
transition: "Vue-Toastification__bounce",
maxToasts: 3,
newestOnTop: true,
position: "top-right",
timeout: 2000,
closeOnClick: true,
pauseOnFocusLoss: true,
pauseOnHover: false,
draggable: true,
draggablePercent: 0.7,
showCloseButtonOnHover: false,
hideProgressBar: true,
closeButton: "button",
icon: true,
rtl: false,
})
Gaya pemberitahuan dapat dikontrol secara terpisah dengan mengaturnya di setiap komponen, tetapi dalam kasus di atas, saya membuat gaya pemberitahuan tersedia di seluruh aplikasi dengan mengimpornya ke
main.js. Setelah itu, saya mengkonfigurasi pengaturan notifikasi. Ini menyelamatkan saya dari masalah menulis kode yang sama setiap kali saya perlu menggunakan notifikasi. Perpustakaan vue-toastification memiliki taman bermain yang bagus untuk eksperimen. Di atasnya, Anda dapat melihat efek parameter pada notifikasi dan segera menyalin apa yang Anda butuhkan ke dalam kode Anda. Ini persis seperti yang saya lakukan pada contoh di atas.
Mari pertimbangkan beberapa kasus penggunaan untuk pustaka ini.
▍Opsi 1: menggunakan notifikasi dalam sebuah komponen (dalam template)
<button @click="showToast">Show toast</button>
Berikut adalah metode yang dipanggil saat tombol diklik:
methods: {
showToast() {
this.$toast.success("I'm a toast!")
}
}
▍Opsi 2: menampilkan pemberitahuan ketika terjadi kesalahan (atau ketika operasi berhasil) di Vuex
Berikut adalah contoh kode untuk mendemonstrasikan cara menggunakannya
this._vm.$toast.errordi Vuex ketika terjadi kesalahan:
async fetchSomeData({ commit }) {
const resource_uri = `/endpoint/url`
try {
await axios.get(resource_uri).then((response) => {
commit(SET_DATA, response.data)
})
} catch (err) {
this._vm.$toast.error('Error message: ' + err.message)
}
}
Anda dapat mengubah jenis pemberitahuan hanya dengan mengubah nama metode
.errormenjadi .success, .infoatau .warning. Dan jika perlu, Anda dapat menghapusnya sama sekali dan menerima pemberitahuan dengan pengaturan default.
Notifikasi roti panggang memungkinkan pengembang untuk menampilkan beberapa informasi berdasarkan perubahan status aplikasi, atau ketika terjadi kesalahan yang tidak terduga. Ini meningkatkan pengalaman pengguna aplikasi. Notifikasi roti bakar memberikan indikasi visual yang lebih baik kepada pengguna tentang peristiwa daripada mode atau jendela peringatan yang buruk. Memang, saat bekerja dengan jendela, pengguna perlu mengklik mouse lagi untuk menutupnya. Pengguna akan menghargai bahwa Anda memberi mereka isyarat visual bahwa ada sesuatu yang tidak beres, menghilangkan kebutuhan untuk menatap layar tanpa daya, menunggu peristiwa yang tidak akan pernah terjadi. Selain itu, pemberitahuan berguna untuk memastikan keberhasilan operasi tertentu.
3. Bekerja dengan tabel
Tabel adalah bagian yang sangat penting dari banyak aplikasi web. Memilih perpustakaan spreadsheet berkualitas rendah dapat menyebabkan banyak masalah. Saya telah mencoba banyak pustaka serupa dan memilih vue-good-table .
Contoh penggunaan vue-good-table
Saya yakin bahwa library ini mampu menyelesaikan sebagian besar tugas kerja tabel yang dihadapi developer. Dan namanya, "good-table", bukan hanya kata-kata. Ini adalah perpustakaan yang sangat bagus dan memberi kita lebih banyak fitur daripada yang kita duga.
▍Menggunakan vue-good-table
Dalam contoh berikut, saya mengikat data
:rowske pengambil Vuex yang disebut getOrderHistory:
<vue-good-table
class="mx-4"
:columns="columns"
:rows="getOrderHistory"
:search-options="{ enabled: true }"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 25,
position: 'top',
perPageDropdown: [25, 50, 100],
dropdownAllowAll: false,
setCurrentPage: 2,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
pageLabel: 'page', // 'pages'
allLabel: 'All'
}"
>
Berikut adalah deskripsi kolom tabel pada data lokal (
data()):
columns: [
{
label: 'Order Date',
field: 'orderDtime',
type: 'date',
dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
tdClass: 'force-text-center resizeFont'
},
{
label: 'Order Number',
field: 'orderGoodsCd',
type: 'text',
tdClass: 'resizeFont'
},
{
label: 'Title',
field: 'orderTitle',
type: 'text',
tdClass: 'resizeFont ellipsis'
},
{
label: 'Price',
field: 'saleAmt',
type: 'number',
formatFn: this.toLocale
},
{
label: 'Edit btn',
field: 'deliveryUpdateYn',
type: 'button',
tdClass: 'force-text-center',
sortable: false
},
]
Berikut
labeladalah tajuk kolom yang ditampilkan di layar, dan fieldini adalah data yang akan diikat di pengambil Vuex.
Dalam contoh di atas, saya menggunakan beberapa kemampuan vue-good-table untuk menyesuaikan tabel. Ini, misalnya, menyetel format tanggal masukan dan keluaran (ini memungkinkan saya untuk mengambil deskripsi lengkap tentang tanggal dan waktu dari server dan menunjukkan informasi ini kepada pengguna dalam format yang lebih nyaman). Saya juga menggunakannya di sini
formatFnuntuk memformat harga menggunakan metode khusus yang saya beri nama toLocale. Kemudian saya menyesuaikan tampilan sel tabel dengan mengikat tdClasskelas yang saya atur di tag lokal saya<style>... Paket vue-good-table sebenarnya memiliki opsi penyesuaian yang tidak ada habisnya. Kemampuan ini memungkinkan Anda membuat tabel yang sesuai untuk berbagai penggunaan.
▍Buat template Anda sendiri
Pustaka vue-good-table juga berfungsi dengan baik dengan templat yang dibuat oleh pemrogram sendiri. Ini berarti Anda dapat dengan mudah menyematkan tombol, bidang untuk memilih nilai dari daftar, atau apa pun di sel tabel. Untuk melakukan ini, cukup menggunakan arahan
v-if, untuk menunjukkan tempat di mana sesuatu yang istimewa harus ditempatkan. Berikut adalah contoh menambahkan tombol ke kolom tabel.
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field === 'cancelYn' && props.row.cancelYn === 'Y' ">
<BaseButton class="button" @click="showModal">
Cancel Order
</BaseButton>
</span>
</template>
Dalam contoh ini, saya menjelaskan tombol yang membuka jendela modal. Ini ditampilkan di lapangan
cancelYn(di kolom) jika nilai bidang data yang sesuai sama Y.
Untuk menambahkan kolom Anda sendiri ke tabel, Anda hanya perlu menambahkan
v-else-ifkonstruksi setelah tag penutup yang menggunakan direktif v-if(dalam kasus kami, ini adalah tag <span>). Setelah itu, Anda perlu mendeskripsikan logika kolom baru. Secara umum, kita dapat mengatakan bahwa pustaka vue-good-table dapat membantu dalam situasi apa pun yang terkait dengan menampilkan tabel di halaman web.
4. Alat untuk memilih tanggal
Dan sekarang saya akan memberi tahu Anda tentang perpustakaan yang dirancang untuk mengatur pemilihan tanggal. Hal serupa ditemukan di berbagai macam aplikasi kehidupan nyata. Ada lebih banyak perpustakaan yang menerapkan fungsi ini daripada perpustakaan untuk memecahkan masalah lain yang saya bicarakan di sini. Saya secara teratur kembali ke pustaka vue2-datepicker untuk menyelesaikan masalah ini .
Contoh menggunakan pustaka vue2-datepicker
Kontrol pemilih tanggal yang dibuat dengan pustaka ini mudah untuk ditata. Ini mendukung banyak penyesuaian yang terkait dengan pemilihan tanggal dan rentang tanggal. Pustaka memungkinkan Anda membuat elemen antarmuka pengguna yang rapi dan nyaman. Bahkan mendukung alat pelokalan.
Perhatikan bahwa meskipun paket tersebut disebut vue2-datepicker, Anda seharusnya tidak memiliki masalah dalam menggunakannya dalam aplikasi berbasis Vue 3 (hal yang sama berlaku untuk pustaka lain yang dibahas dalam posting ini).
▍Menggunakan vue2-datepicker
Pustaka dapat diimpor menjadi komponen atau disertakan dalam templat.
Berikut adalah contoh mengimpornya ke dalam sebuah komponen:
import DatePicker from 'vue2-datepicker';
//
import 'vue2-datepicker/index.css';
Berikut cara menggunakannya dalam template:
<date-picker
v-model="dateRange"
value-type="format"
range
@clear="resetList"
@input="searchDate"
></date-picker>
Di sini saya menggunakan opsi yang
rangememungkinkan pengguna memilih rentang tanggal. Di sini saya, menggunakan arahan v-model, menghubungkan data yang dimasukkan oleh pengguna ke nilai dateRange. Kemudian dateRange, sebagai contoh, vue-good-table dapat digunakan untuk menyesuaikan keluaran dari data pada tabel. Saya juga menggunakan opsi acara di sini - @cleardan @input, menggunakannya untuk memanggil metode, salah satunya membuang tabel ( resetList), dan yang kedua mengirim permintaan ke server ( searchDate). Library vue2-datepicker menawarkan lebih banyak opsi dan peristiwa daripada yang saya jelaskan di sini. Tapi apa yang saya ceritakan di sini, paling sering saya gunakan.
5. Peringkat
Sistem peringkat dapat ditemukan, misalnya, di situs-situs seperti Amazon dan Rotten Tomatoes. Mungkin Anda tidak menggunakan sistem seperti itu di setiap proyek, tetapi saya, di setiap situs yang membutuhkannya, mengimplementasikan fitur ini menggunakan pustaka vue-star-rating .
Contoh menggunakan library vue-star-rating
Sepertinya sesuatu seperti ini sangat mudah dibuat sendiri. Tetapi jika Anda menggali lebih dalam, ternyata merancang kontrol semacam itu bisa dengan cepat menjadi jauh lebih sulit daripada yang Anda duga. Pustaka ini memungkinkan Anda menggunakan gambar SVG Anda sendiri untuk menyesuaikan bentuk bentuk yang digunakan untuk penilaian. Ini memungkinkan Anda untuk menyesuaikan ukuran elemen, jarak di antara mereka, warnanya.
Peringkat yang diberikan pengguna untuk sesuatu menggunakan kontrol dari vue-star-rating dapat dengan mudah digunakan
v-modeluntuk ditransfer ke tempat Anda berencana menggunakannya. Estimasi dapat dibuat berubah atau tidak berubah menggunakan parameter tunggal.
Dan jika Anda merasa membutuhkan lebih banyak fitur saat bekerja dengan pustaka ini, lihat paket vue-rate-it oleh penulis yang sama.
▍Menggunakan peringkat bintang-vue
Berikut cara menggunakan pustaka ini dalam templat (dengan opsi):
<star-rating
class="star-rating"
:rating="newReivew.score"
active-color="#FBE116"
:star-size="starSize"
:increment="increment"
:show-rating="showRating"
@rating-selected="setRating"
/>
Berikut cara mengimpornya menjadi komponen:
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
}
Hasil
Kami telah membahas 5 perpustakaan untuk Vue. Kami berharap Anda menemukan sesuatu di sini yang akan berguna bagi Anda saat mengembangkan proyek Anda.
Library Vue.js mana yang paling sering Anda gunakan?
