Cara melaksanakan pratonton imej dengan pemalam vue

Ikhtisar

Vue ialah salah satu rangka kerja bahagian hadapan yang lebih popular dan boleh digunakan untuk membina projek SPA (Single Page Application). Dalam Vue, kadangkala ia perlu untuk melaksanakan fungsi pratonton imej Artikel ini akan memperkenalkan cara menggunakan pemalam vue untuk melaksanakan pratonton imej.

Pengenalan Pemalam

Pemalam Vue ialah tika Vue boleh guna semula yang boleh disuntik ke dalam apl Vue. Pemalam ditulis dengan menambahkan kaedah atau komponen pada sifat prototaip Vue atau sifat contoh Vue, yang boleh digunakan dengan mudah di mana-mana dalam apl Vue. Pustaka pemalam Vue yang biasa digunakan termasuk Vue-Router, Vuex, dll. Pemalam ini boleh membantu pembangun mengurus status dan penghalaan aplikasi Vue dengan lebih mudah.

vue-preview ialah pustaka komponen vue pratonton imej, termasuk pemuatan malas imej, penskalaan dan fungsi lain serta menyokong operasi pratonton pada PC dan Mudah Alih. vue-preview dibangunkan berdasarkan perpustakaan Vue.js 2.x dan menyokong Vue2.0 dan ke atas.

Gunakan pemalam vue-preview untuk melaksanakan pratonton imej

Langkah 1: Pasang vue-preview

Anda boleh menggunakan npm untuk memasang vue-preview dalam baris arahan terminal:

npm install vue-preview --save-dev

Atau gunakan benang untuk memasang:

yarn add vue-preview

Langkah 2: Perkenalkan vue-preview ke dalam aplikasi Vue

Perkenalkan vue-preview ke dalam fail masukan apl Vue:

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

Langkah 3: Gunakan pratonton vue dalam komponen Vue

Dalam komponen Vue, anda boleh menggunakan pratonton vue dengan cara berikut:

<vue-preview :slides="imageList"></vue-preview>

Antaranya, slaid Ia adalah salah satu atribut props vue-preview, digunakan untuk menerima senarai imej. imageList ialah pembolehubah tatasusunan yang digunakan untuk menyimpan URL imej.

Berikut ialah fail komponen Vue yang lengkap:

<script>
import VuePreview from 'vue-preview'

export default {
  name: "Gallery",
  data() {
    return {
      imageList: [
          'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg',
          'https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg',
          'https://cdn.pixabay.com/photo/2014/10/22/16/38/sunset-498688__340.jpg'
      ]
    };
  },
  components: {
    VuePreview
  }
};
</script>

Dalam kod di atas, kami mentakrifkan komponen Vue bernama Galeri, mentakrifkan pembolehubah imageList melalui atribut data, dan menyerahkannya kepada Atribut slaid bagi pemalam pratonton vue. Rujuk pemalam pratonton vue di dalam komponen dan daftarkannya dalam apl Vue.

Langkah 4: Pratonton kesan

Buka penyemak imbas, jalankan apl Vue dan klik pada imej untuk pratonton kesan.

Ringkasan

Artikel ini memperkenalkan cara menggunakan pemalam pratonton vue untuk melaksanakan fungsi pratonton imej. Penggunaan pemalam Vue boleh meningkatkan kelajuan dan kecekapan pembangunan dengan sangat baik, dan mengelakkan mencipta semula roda. Jika anda perlu pratonton imej, anda boleh cuba menggunakan pemalam vue-preview ini sangat mudah untuk digunakan dan mempunyai fungsi yang kaya.

Atas ialah kandungan terperinci Cara melaksanakan pratonton imej dengan pemalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!