mini color picker herunterladen - mini color picker Quellcode herunterladen

mini color picker

AI-Quellcode

1.0.0

Herunterladen

Mini-Farbauswahl

Die Applet-Farbauswahlkomponente (Farbauswahl) wählt Farben aus der Farbpalette aus und wird für benutzerdefinierte Szenen verwendet.

Merkmal:

Analyse bestehender Lösungen

Wir, der Farbwähler, müssen auf die Positionierung der Komponenten achten, der Betrieb ist nicht reibungslos und die Konfiguration ist kompliziert. Durch die Positionierung wird die Originalseite in die Länge gezogen, was zu einem schlechten Erlebnis führt. Der Gleitabstand wird durch Pixel differenziert (fest), und die Geräteauflösung muss berücksichtigt werden, was für Multi-End nicht förderlich ist.
PapaerPen verwendet die ursprüngliche Slider-Komponente, um eine Schiebeauswahl zu realisieren, die nicht auf die Geräteauflösung beschränkt ist. Es sind jedoch drei Vorgänge erforderlich, und die interne Implementierung der Farbtonauswahl ist umständlich. Sie hat keinen wirklichen Einfluss auf den Farbwert als drei Komponenten (HSV/HSB).

Lösung

Verwenden Sie den offiziellen Schieberegler, um den Farbton auszuwählen, und die bewegliche Ansicht, um Sättigung und Helligkeit auszuwählen. Da es sich um eine offizielle Grundkomponente handelt, ist die Bedienung reibungslos.
Bei der Einstellung des Gleitbereichs wird nach Erhalt des tatsächlichen Knotens der Anteil verwendet, um die Änderung des Farbwerts zu beeinflussen, ohne die Rpx-Konvertierung zu berücksichtigen.
In Bezug auf den Bedienungsprozess ist es auf den Bedienbereich des Mobiltelefons beschränkt, und Popover kann nicht verwendet werden. Verwenden Sie die Unterseite, um das Popup-Fenster aufzurufen, was sich nicht auf die Originalseite auswirkt und die wichtigsten Punkte hervorhebt.
Da in der Betriebsvorschau die Popup-Fenstermaske für die Echtzeitvorschau zwangsläufig nicht verfügbar ist, wird die Farbe des Farbtonschiebereglers zur Realisierung der Vorschau verwendet. Gleichzeitig werden auch die Sicherheitsaspekte des iPhone-X berücksichtigt.

Nutzungseffekt

Screenshot

Probe

Vorschau des Effekts in Entwicklertools => Code-Snippet-ID: YOF4QUmO7NmW

Installieren und verwenden

1. Komponenten besorgen

Idiot

Möglicherweise instabil, enthält aber die neuesten Funktionsupdates

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

Kopieren Sie den Ordner „components/color-picker“ im Projekt in den Komponentenpfad

npm

Stabilisieren

npm install mini-color-picker --save

Informationen zur Verwendung des npm-Pakets finden Sie in der offiziellen Dokumentation des WeChat-Applets

2. Komponenten vorstellen

Fügen Sie die JSON-Datei hinzu, die der Seite entspricht, die diese Komponente verwendet:

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

Wenn Sie npm verwenden, klicken Sie auf die Menüleiste in den Entwicklertools: Extras -> Build npm; aktivieren Sie die Option „Npm-Modul verwenden“ (die Demo ist das Ergebnis nach dem Build).

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

3. Komponenten verwenden

Referenz/Seiten

 <!-- 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 ;
  } ,
} )

Immobilienliste

Eigentum	Typ	Standardwert	Erforderlich	veranschaulichen
zeigen	Boolescher Wert	FALSCH	Ja	Ob angezeigt werden soll
initColor	Zeichenfolge	RGB(255,0,0)	Ja	Ausgangsfarbe, RGB-Darstellung
Maske	Boolescher Wert	WAHR	NEIN	Ob die Hintergrundmaske angezeigt werden soll
MaskeVerschließbar	Boolescher Wert	WAHR	NEIN	Kann die Hintergrundmaske durch Anklicken ausgeschaltet werden?
bindchangeColor	Eventhandler		NEIN	Rückruf nach Farbauswahl, event.detail = {color}
bindclose	Eventhandler		NEIN	Ereignis, das nach dem Klicken auf die Hintergrundmaske zum Ausschalten der Farbauswahl ausgelöst wird

entwickeln

Beachten :

Derzeit gibt es keine bidirektionale Bindung, das heißt, der Farbwert wird vom Benutzer ausgewählt, nachdem er den Anfangswert erhalten hat, und sollte nicht durch externe Eingaben geändert werden (dann geht die Bedeutung der Farbauswahl verloren).
Sie können den Farbwert des Schiebereglers während des Berührungsvorgangs in Echtzeit in der Vorschau anzeigen und den Farbwert nach dem Stoppen der Berührung an die Seite übergeben, um eine Blockierung durch häufiges setData zu vermeiden.
Das für die externe Kommunikation mit Komponenten verwendete Datenformat ist RGB. Um die Einführung mehrerer Datenformate zu vermeiden, die in tatsächlichen Szenarien zu Coderedundanz führen können, können Entwickler bei Bedarf den folgenden entsprechenden Inhalt auf dem öffentlichen Konto „MakerGYT“ konvertieren " um den Referenzfunktionscode zu erhalten: