Bagaimana untuk membuang tera air dalam vue

Semasa proses pembangunan menggunakan Vue, kami sering menggunakan beberapa perpustakaan komponen pihak ketiga Untuk memastikan hak cipta, perpustakaan komponen ini sering menambah tera air pada halaman. Tetapi tera air ini mungkin menjejaskan pengalaman pengguna dalam sesetengah projek, jadi kami perlu mencari cara untuk menghapuskan tera air ini. Artikel ini akan memperkenalkan dua kaedah untuk mengalih keluar tera air dalam Vue.

Kaedah 1: Ubah suai kod sumber komponen

Kaedah pertama untuk menghapuskan tera air dalam Vue ialah mengubah suai kod sumber komponen Kaedah ini adalah yang paling teliti, tetapi ia memerlukan asas pengaturcaraan tertentu .

Pertama, kita perlu mencari kod untuk menambah tera air. Secara amnya, kod tera air ditambah dalam fail JS komponen:

export default {
  name: 'Watermark',
  mounted() {
    const option = this.$options.watermarkOption
    let id = `wm_${new Date().getTime()}`
    let parentNode = option.parent || document.body
    let canvasEle = document.createElement('canvas')
    parentNode.appendChild(canvasEle)
    canvasEle.id = id
    canvasEle.width = option.defaultWidth
    canvasEle.height = option.defaultHeight
    let canvas = document.getElementById(id)
    let ctx = canvas.getContext('2d')
    ctx.font = '16px Microsoft JhengHei'
    ctx.fillStyle = 'rgba(200, 200, 200, 0.40)'
    ctx.rotate((Math.PI / 180) * option.angle)
    ctx.fillText(option.content, option.left, option.top)
  }
}

Dapat dilihat bahawa fungsi kod ini adalah untuk menambah elemen kanvas apabila komponen dipasang untuk melukis tera air. Kami hanya perlu mengulas kod ini atau memadam bahagian kod yang menambah tera air.

Jika anda menggunakan Vue Cli untuk membina projek seperti saya, adalah disyorkan untuk menyalin kod sumber komponen ke direktori src dalam projek dan kemudian mengubah suainya. Selepas pengubahsuaian selesai, komponen perlu disusun semula dan komponen yang diubah suai boleh diperkenalkan ke dalam projek.

Perlu diambil perhatian bahawa jika anda menggunakan alatan binaan automatik seperti Webpack atau Rollup dalam projek anda, pengubahsuaian anda mungkin ditimpa semasa proses pembungkusan, jadi anda perlu menyemak dengan kerap sama ada pengubahsuaian telah berkuat kuasa.

Kaedah 2: Gunakan ganti gaya CSS

Kaedah kedua ialah menggunakan ganti gaya CSS. Kaedah ini lebih mudah, tetapi mungkin mempunyai had tertentu dalam beberapa kes, seperti lokasi tera air terlalu kompleks.

Kami mula-mula mencari elemen induk di mana tera air terletak, dan kemudian menulis ganti dengan gaya CSS. Secara amnya, elemen induk tempat tera air terletak ialah bekas induk.

Jika kami ingin menghapuskan tera air yang ditambahkan pada keseluruhan halaman, kami boleh menambah gaya CSS berikut:

body ::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  background-image: url(data:png;base64,iVBORw0KGg...);
}

Di mana, imej latar belakang ialah pengekodan base64 bagi imej tera air. Dengan menambahkan gaya CSS seperti ini, kami boleh menghapuskan tera air pada keseluruhan halaman.

Jika anda ingin menghapuskan tera air pada komponen tertentu, anda perlu melaraskannya mengikut struktur DOM komponen dan menambah gaya CSS yang sesuai. Contohnya, jika tera air dalam komponen terletak dalam elemen bekas, kita boleh menambah gaya CSS berikut:

rreee

dengan .container ialah nama kelas bagi elemen bekas dalam komponen.

Kesimpulan

Di atas ialah dua kaedah untuk menghapuskan tera air dalam Vue. Jika anda baru dalam pengaturcaraan, mungkin lebih mudah untuk menggunakan kaedah kedua, tetapi kaedah ini mempunyai batasan tertentu. Jika anda ingin mengalih keluar tera air dengan lebih lengkap, anda boleh menggunakan kaedah pertama. Mana-mana kaedah yang anda pilih, anda perlu meneruskan dengan berhati-hati agar tidak menjejaskan kestabilan komponen atau projek anda.

Atas ialah kandungan terperinci Bagaimana untuk membuang tera air dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!