Unduh mini color picker - pengunduhan kode sumber mini color picker

mini color picker

Kode Sumber AI

1.0.0

Unduh

Pemetik warna mini

Komponen pemilih warna applet (pemilih warna) mengambil warna melalui palet warna dan digunakan untuk pemandangan yang ditentukan pengguna.

ciri:

Analisis solusi yang ada

Kami yang memilih warna perlu memperhatikan posisi komponen, pengoperasiannya tidak lancar dan pengoperasiannya tidak lancar, serta konfigurasinya rumit. Penempatannya akan merenggangkan halaman asli, sehingga menghasilkan pengalaman yang buruk. Jarak geser dibedakan berdasarkan piksel (tetap), dan resolusi perangkat perlu dipertimbangkan, yang tidak kondusif untuk multi-end.
PapaerPen menggunakan komponen penggeser asli untuk mewujudkan pemilihan geser, yang tidak terbatas pada resolusi perangkat. Namun, hal ini memerlukan tiga operasi, dan penerapan internal pemilihan rona rumit. Hal ini tidak terlalu memengaruhi nilai warna sebagai tiga komponen (HSV/HSB).

larutan

Gunakan penggeser resmi untuk memilih rona, dan tampilan bergerak untuk memilih saturasi dan kecerahan. Karena ini adalah komponen dasar resmi, pengoperasiannya lancar.
Dalam pengaturan area geser, setelah mendapatkan node sebenarnya, proporsi digunakan untuk mempengaruhi perubahan nilai warna, tanpa mempertimbangkan konversi rpx.
Dalam hal proses pengoperasian, ini terbatas pada area pengoperasian ponsel, dan Popover tidak dapat digunakan. Gunakan bagian bawah untuk menarik jendela pop-up, yang tidak memengaruhi halaman asli dan menyoroti poin-poin penting.
Dalam hal pratinjau pengoperasian, karena topeng jendela pop-up tidak dapat dihindari dan tidak dapat dipratinjau secara waktu nyata, warna penggeser rona digunakan untuk mencapai pratinjau. Pada saat yang sama, masalah area keamanan iPhone-X juga dipertimbangkan.

Gunakan efek

tangkapan layar

Mencicipi

Pratinjau efeknya di alat pengembang => ID cuplikan kode: YOF4QUmO7NmW

Instal dan gunakan

1. Dapatkan komponen

git

Mungkin tidak stabil, namun berisi pembaruan fitur terkini

git clone https://github.com/MakerGYT/mini-color-picker.git

Salin folder komponen/pemilih warna dalam proyek ke jalur komponen

npm

Stabilkan

npm install mini-color-picker --save

Untuk menggunakan paket npm, silakan merujuk ke dokumentasi resmi applet WeChat.

2. Perkenalkan komponen

Tambahkan yang berikut ini ke file json yang sesuai dengan halaman yang menggunakan komponen ini:

{
  "usingComponents" : {
    "color-picker" : " /components/color-picker/color-picker " 
  }
}

Jika menggunakan npm, klik bilah menu di alat pengembang: Tools --> Build npm; centang opsi "Gunakan modul npm" (demo adalah hasil setelah build)

{
  "usingComponents" : {
    "color-picker" : " mini-color-picker/color-picker " 
  }
}

3. Gunakan komponen

Referensi/halaman

 <!-- index.wxml -->
< view style =" background:{{rgb}};width:100px;height:24px; " bindtap =" toPick " > </ view >
< color-picker bindchangeColor =" pickColor " initColor =" {{rgb}} " show =" {{pick}} " />

 Page ( {
  data : {
    rgb : 'rgb(0,154,97)' , //初始值
    pick : false
  } ,
  // 显示取色器
  toPick : function ( ) {
    this . setData ( {
      pick : true
    } )
  } ,
  //取色结果回调
  pickColor ( e ) {
    let rgb = e . detail . color ;
  } ,
} )

Daftar properti

milik	jenis	nilai bawaan	Diperlukan	menjelaskan
menunjukkan	Boolean	PALSU	Ya	Apakah akan ditampilkan
initColor	Rangkaian	rgb(255,0,0)	Ya	Warna awal, representasi RGB
masker	Boolean	BENAR	TIDAK	Apakah akan menampilkan topeng latar belakang
topengDapat Ditutup	Boolean	BENAR	TIDAK	Bisakah background mask dimatikan dengan mengkliknya?
bindchangeColor	pengendali acara		TIDAK	Panggilan balik setelah pemilihan warna, event.detail = {color}
mengikatdekat	pengendali acara		TIDAK	Peristiwa dipicu setelah mengklik topeng latar belakang untuk mematikan pemilih warna

mengembangkan

Melihat :

Saat ini tidak ada pengikatan dua arah, yaitu nilai warna dipilih oleh pengguna setelah mendapatkan nilai awal, dan tidak boleh diubah oleh masukan eksternal (maka arti pemilihan warna akan hilang)
Anda dapat melihat pratinjau nilai warna penggeser secara real-time selama proses sentuh, dan meneruskan nilai warna ke halaman setelah menghentikan sentuhan untuk menghindari pemblokiran yang disebabkan oleh seringnya setData.
Format data yang digunakan untuk komunikasi eksternal dengan komponen adalah rgb. Untuk menghindari pengenalan beberapa format data yang dapat menyebabkan redundansi kode dalam skenario sebenarnya, pengembang dapat mengonversi sesuai permintaan dan membalas konten terkait berikut di akun publik "MakerGYT. " untuk mendapatkan kode fungsi referensi: