Bagaimana untuk menggunakan Vue untuk merapikan dan mengaburkan tepi imej?

Bagaimana cara menggunakan Vue untuk mengaburkan dan mengaburkan tepi imej?

Vue.js ialah rangka kerja bahagian hadapan yang popular yang boleh melaksanakan kemas kini responsif dan pengurusan antara muka pengguna dengan mudah. Dalam pembangunan bahagian hadapan, pemprosesan imej juga merupakan keperluan yang sangat biasa. Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk mencapai kesan bulu dan kesan tepi kabur imej.

Pertama, kita perlu memasang dan memperkenalkan perpustakaan Vue.js. Ia boleh diperkenalkan melalui CDN atau dipasang menggunakan npm.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Seterusnya, kami mencipta tika Vue dan mentakrifkan URL imej dalam atribut data untuk memaparkan imej.

<div id="app">
  <img :src="imageUrl" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  }
})
</script>

Dalam contoh Vue, kami boleh memproses imej melalui sifat yang dikira. Sifat yang dikira ialah sifat unik Vue yang mengira nilai baharu secara dinamik berdasarkan data bergantung.

Pertama, mari kita capai kesan bulu. Kesan bulu adalah untuk menambahkan sedikit ketelusan pada tepi imej, menjadikan imej kelihatan lebih lembut.

<div id="app">
  <img :src="imageUrl" :  style="max-width:90%" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  },
  computed: {
    featherStyle() {
      return {
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.3)",
        borderRadius: "10px"
      }
    }
  }
})
</script>

Dalam kod di atas, kami mentakrifkan atribut featherStyle yang dikira melalui atribut yang dikira, yang mengembalikan objek yang mengandungi gaya CSS yang diperlukan untuk menambah kesan bulu pada imej. Khususnya, kami menambah bayang hitam lutsinar 20 piksel dan memberikan imej sudut bulat 10 piksel.

Seterusnya, mari laksanakan kesan tepi kabur. Kesan tepi kabur menggunakan kabur Gaussian pada tepi imej, menjadikan warna tepi menjadi kabur.

<div id="app">
  <img :src="imageUrl" :  style="max-width:90%" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  },
  computed: {
    blurStyle() {
      return {
        filter: "blur(10px)"
      }
    }
  }
})
</script>

Dalam kod di atas, kami mentakrifkan sifat blurStyle yang dikira melalui sifat yang dikira, yang mengembalikan objek yang mengandungi gaya CSS yang diperlukan untuk menggunakan kabur Gaussian pada imej. Khususnya, kami menetapkan atribut penapis kepada kabur(10px), yang bermaksud untuk menggunakan kesan kabur Gaussian 10 piksel pada imej.

Akhir sekali, jika kita ingin menggunakan kedua-dua kesan bulu dan kesan tepi kabur pada masa yang sama, kita boleh menggabungkan gaya CSS kedua-dua kesan bersama-sama.

<div id="app">
  <img :src="imageUrl" :  style="max-width:90%" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  },
  computed: {
    featherStyle() {
      return {
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.3)",
        borderRadius: "10px"
      }
    },
    blurStyle() {
      return {
        filter: "blur(10px)"
      }
    }
  }
})
</script>

Dalam kod di atas, kami mencapai aplikasi serentak kesan bulu dan kesan tepi kabur dengan menggabungkan sifat kedua-dua objek.

Melalui langkah di atas, kami telah berjaya menggunakan Vue.js untuk mencapai kesan bulu dan kesan tepi kabur imej. Kesan ini boleh menjadikan gambar lebih jelas dan menarik dalam antara muka pengguna. Sudah tentu, kami juga boleh menyesuaikan dan mengembangkan gaya mengikut keperluan sebenar untuk memenuhi keperluan reka bentuk yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk merapikan dan mengaburkan tepi imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!