@codehat/vue-color-picker
v1.0.0
Published
A volor picker componetn for Vue
Downloads
4
Readme
��#� �v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r�
�
�
�
�T�h�i�s� �i�s� �a� �p�u�r�e� �C�S�S� �c�o�l�o�r�-�p�i�c�k�e�r� �c�o�m�p�o�n�e�n�t� �f�o�r� �V�u�e�/�N�u�x�t� �p�r�o�j�e�c�t�.�
�
�
�
�[�!�[�N�P�M�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�n�p�m�/�v�/�@�c�o�d�e�h�a�t�/�v�u�e�-�c�s�s�-�l�o�a�d�e�r�.�s�v�g�)�]�(�h�t�t�p�s�:�/�/�w�w�w�.�n�p�m�j�s�.�c�o�m�/�p�a�c�k�a�g�e�/�@�c�o�d�e�h�a�t�/�v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r�)� �[�!�[�J�a�v�a�S�c�r�i�p�t� �S�t�y�l�e� �G�u�i�d�e�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�c�o�d�e�_�s�t�y�l�e�-�s�t�a�n�d�a�r�d�-�b�r�i�g�h�t�g�r�e�e�n�.�s�v�g�)�]�(�h�t�t�p�s�:�/�/�s�t�a�n�d�a�r�d�j�s�.�c�o�m�)�
�
�
�
�<�i�m�g� �s�r�c�=�"�.�/�p�i�c�k�e�r�.�p�n�g�"�/�>�
�
�
�
�#�#� �I�n�s�t�a�l�l�a�t�i�o�n�
�
�
�
��
��b�a�s�h�
�
�n�p�m� �i� �-�-�s�a�v�e� �@�c�o�d�e�h�a�t�/�v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r�
�
�
��
�
�
�
�
�#�#� �P�r�o�p�s� �a�n�d� �o�t�h�e�r� �f�e�a�t�u�r�e�s�
�
�
�
���v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r��� �c�o�m�e� �w�i�t�h� �o�n�e� �p�r�o�p� ��s�e�l�C�o�l�o�r�
� �w�h�i�c�h� �c�a�n� �b�e� �u�s�e�d� �t�o� �s�e�t� �i�n�i�t�i�a�l� �c�o�l�o�r�.� �F�o�r� �d�y�n�a�m�i�c�a�l�l�y� �s�e�t� �t�h�e� �c�o�l�o�r� �u�s�e� �t�h�e� ��b�i�n�d�i�n�g�
� �f�e�a�t�u�r�e�.�
�
�
�
�T�h�e� �c�o�m�p�o�n�e�n�t� ��e�m�i�t�
� ���c�o�l�P�i�c�k�e�d��� �e�v�e�n�t� �w�h�i�c�h� �r�e�t�u�r�n� �t�h�e� �s�e�l�e�c�t�e�d� �c�o�l�o�r�.� �A�l�l� �w�e� �h�a�v�e� �t�o� �d�o� �i�s� �c�r�e�a�t�e� ��m�e�t�h�o�d�
� �a�n�d� �r�e�c�e�i�v�e� �t�h�e� ��e�m�i�t�e�d�
� �v�a�l�u�e�.�
�
�
�
�
�
�#�#� �U�s�a�g�e�
�
�
�
��
��j�a�v�a�s�c�r�i�p�t�
�
�<�t�e�m�p�l�a�t�e�>�
�
� � � �<�d�i�v� �c�l�a�s�s�=�"�c�o�l�u�m�n�s� �s�e�c�t�i�o�n�"�>�
�
� � � � �<�d�i�v� �c�l�a�s�s�=�"�c�o�l�u�m�n�"�>�
�
� � � � � � �<�c�-�p�i�c�k�e�r� �:�s�e�l�C�o�l�o�r�=�"�c�o�l�"�
�
� � � � � � � � �@�c�o�l�P�i�c�k�e�d�=�"�c�h�a�n�g�e�C�o�l�o�r�"� �/�>� �
�
� � � � � � �{�{� �c�o�l� �}�}�
�
� � � � �<�/�d�i�v�>�
�
� � � � �<�d�i�v� �c�l�a�s�s�=�"�c�o�l�u�m�n�"� �:�s�t�y�l�e�=�"�{� �b�a�c�k�g�r�o�u�n�d�:� �c�o�l� �}�"� �>�
�
� � � � �<�C�h�e�c�k�G�r�o�u�p�/�>�
�
� � � � �<�p�>� � �
�
� � � � �<�/�p�>�
�
� � � � �<�/�d�i�v�>�
�
� � �<�/�d�i�v�>�
�
�<�/�t�e�m�p�l�a�t�e�>�
�
�
�
�<�s�c�r�i�p�t�>� �
�
�i�m�p�o�r�t� � �V�u�e�C�o�l�o�r�P�i�c�k�e�r� �f�r�o�m� �"�@�c�o�d�e�h�a�t�/�v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r�"� �;� �
�
�
�
�e�x�p�o�r�t� �d�e�f�a�u�l�t� �{�
�
� � �n�a�m�e�:� �"�G�a�l�l�e�r�y�"�,�
�
� � �d�a�t�a�(�)� �{�
�
� � � � �r�e�t�u�r�n� �{�
�
� � � � � � �c�o�l�:� �"�"�,�
�
� � � � � � �
�
� � � � �}�;�
�
� � �}�,�
�
� � �m�e�t�h�o�d�s�:� �{�
�
� � � � �c�h�a�n�g�e�C�o�l�o�r�(�v�a�l�u�e�)� �{�
�
� � � � � � �t�h�i�s�.�c�o�l� �=� �v�a�l�u�e�;�
�
� � � � �}�,�
�
� � � � �
�
� � �}�,�
�
� � �c�o�m�p�o�n�e�n�t�s�:� �{�
�
� � � � �"�c�-�p�i�c�k�e�r�"�:� �V�u�e�C�o�l�o�r�P�i�c�k�e�r�,� � � �
�
� � � � � � �
�
� � �}�,�
�
�
�
�}�;�
�
�<�/�s�c�r�i�p�t�>�
�
�
�
�<�s�t�y�l�e� �s�c�o�p�e�d�>�
�
�.�c�a�r�d�C�o�n�t�a�i�n�e�r� �{�
�
� � �p�o�s�i�t�i�o�n�:� �a�b�s�o�l�u�t�e�;�
�
� � �l�e�f�t�:� �3�0�p�x�;�
�
� � �t�o�p�:� �2�0�p�x�;�
�
� � �t�e�x�t�-�a�l�i�g�n�:� �c�e�n�t�e�r�;�
�
�}�
�
�.�f�r�o�n�t�,�
�
�.�b�a�c�k� �{�
�
� � �p�o�s�i�t�i�o�n�:� �a�b�s�o�l�u�t�e�;�
�
� � �h�e�i�g�h�t�:� �1�0�0�%�;�
�
� � �w�i�d�t�h�:� �1�0�0�%�;�
�
� � �b�a�c�k�g�r�o�u�n�d�:� �#�f�f�9�6�2�d�;�
�
� � �/�*� �l�i�n�e�-�h�e�i�g�h�t�:� �3�0�0�p�x�;� �*�/�
�
� � �c�o�l�o�r�:� �#�0�3�4�4�6�a�;�
�
� � �/�*� �t�e�x�t�-�a�l�i�g�n�:� �c�e�n�t�e�r�;� �*�/�
�
� � �f�o�n�t�-�s�i�z�e�:� �1�8�p�x�;�
�
� � �b�o�r�d�e�r�-�r�a�d�i�u�s�:� �5�p�x�;�
�
� � �b�a�c�k�f�a�c�e�-�v�i�s�i�b�i�l�i�t�y�:� �h�i�d�d�e�n�;�
�
�}�
�
�.�b�a�c�k� �{�
�
� � �b�a�c�k�g�r�o�u�n�d�:� �#�d�9�0�0�0�0�;�
�
� � �c�o�l�o�r�:� �w�h�i�t�e�;�
�
� � �t�r�a�n�s�f�o�r�m�:� �r�o�t�a�t�e�Y�(�1�8�0�d�e�g�)�;�
�
�}�
�
�<�/�s�t�y�l�e�>�
�
�
�
�
��
�
�
�#�#� �L�i�c�e�n�s�e�
�
�
�
�M�I�T� ��� �[�m�a�n�o�j�a�p�]�(�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�m�a�n�o�j�a�p�)�